Who doesn't like color?
To enable on the blog, you need to include the
prism.css file in your injected header:
(Bonus points for using the minified version (
prism.min.css) which reduces the number of bytes you require your clients to download in order to execute the
And you need to declare the
prism.js file in your injected footer:
(More bonus points if you use the subresource integrity (SRI) signature.)
From here, you can pick and choose which languages you want to support and paste in the associated
.js files. For instance, I want to support Python, so I include the following in my footer:
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.8.4/components/prism-python.min.js" integrity="sha256-UG8/FkBcUZvmGnPiL1hw3i/ROpxXPqIpxkEt2SVYIP4=" crossorigin="anonymous"></script>
scripttag is auto-generated when you hover over the cdnjs download button and choose Copy Script Tag with SRI.)
I can then do some Python!
def foo(): return 'bar'
Just don't forget to include which language you want to invoke by appending the string at the end of the initial code block:
def foo(): return 'bar'
(This is done by declaring
```pythonat the beginning of the code block.)
But wait, there's more!
The process up to this point is straightforward, but I would prefer to be on the edge of Prism.js's versioning. For example, when I first started writing this post,
1.8.4 was latest. But at publishing time, it has bumped to
1.9.0, which necessitates changing 👏 every 👏 damn 👏 injected 👏 link 👏.
I'd also like to just maintain a list of languages I desire to support:
langs = ['python', 'bash', 'hack', 'java']
Which would unpack into the proper cdnjs links:
<script src=".../prism-python.min.js"></script> <script src=".../prism-bash.min.js"></script> <script src=".../prism-hack.min.js"></script> <script src=".../prism-java.min.js"></script>
I also ran into a wall when trying to dynamically add
<script> tags to the page body with really weird race conditions manifesting. I read some interesting articles about how specific elements are loaded into the page and what controlling mechanisms there are, but I didn't have the time to debug further. So out with dynamic, and in with explicit.
(For reference, the logic I was trying to support.)
latest feature I was originally going to code myself, jsDeliver:
But even more neato is that it supports "version aliasing", which means you get the latest version, of say
@1, which should contain all the bug fixes of that major version:
Highlighting broke and it turns out an additional file was needed: