Highlight.js has better highlighting for language constructs. This will highlight $faker in a different color, and operators, functions too.

Documentation for this can be found here:

• https://squidfunk.github.io/mkdocs-material/reference/code-blocks/#highlight
• https://highlightjs.org/
  • https://github.com/highlightjs/highlight.js/tree/master/src/styles

Because we are using the navigation.instant feature (this loads a new page using XHR instead of a reload), the code blocks in a page wouldn't initialize after navigation. I added a small workaround for this using the DOMContentSwitch event.

Before: https://s3.bram.cloud/sharex-bram/chrome_iZ4C4AwoWn.png
After: https://s3.bram.cloud/sharex-bram/chrome_rZ0d7i2ldR.png