syntax highlighting with prism.js
Given that this site frequently details snippets of code I don't want to forget about, it quickly became apparent that I'd need some syntax highlighting to make things easier to read.
The project prism.js does this and was super-easy to bolt on to this site.
To add it to your own:
- Visit https://prismjs.com/download.html - select the language(s) you will be needing to highlight. This updates the CSS and Javascript blocks at the bottom of the page.
- Download or copy the CSS and Javascript from the site and include in your own. For this site I added references to the files in the base template.
- Add the class
language-<your language>to any code blocks you'd like to highlight and your code is automagically syntax highlighted.
If, like this site, you use markdown as the source for your articles, you can add the language after the triple-backtick opener that designates a codeblock, and it will automatically class the code element with language-<your language>:
```markdown
# your markdown code here!
```