New Code Syntax Highlighter Prism

Everyone who posts code samples in their blogs needs a code highlighter. Why? Because without one the code samples would not look nice and readable and your readers would become unhappy and stop reading your blog. Don't like the sound of it? Use a code highlighter.

For over 10 years I have used a SyntaxHighlighter from Alex Gorbatchev. It was very simple to use and looked nice and readable. Recently, however, I've noticed that my blog takes over 5 seconds to load a page. When I've looked into a browser debugger I've immediately noticed a bunch of link loading errors on the page and all of them have been pointing to the locations of SyntaxHighlighter files that have been hosted outside of the blog on the author's web site. Well, not any more.

Too bad. As expected, most of the code samples have become invisible on the pages. As soon as I removed the links to the SyntaxHighlighter from the blog pages, though, it started loading fast again. So, the slowness was solved. Now, the questions is what do I use instead as a syntax highlighter?

After not so long Internet research I've settled on the PrismJS from prismjs.com. There are other active similar projects, of course, but the Prism seems to be very stable, well supported, widely used and simple. In addition, but very important it's supported by multiple public free CDNs and that should give me some peace of mind against sudden unavailability of the links how it happened with SyntaxHighlighter after over 10 years of use.

So, how do I use the Prism? First, add the links to the Prism files, specifically, a JavaScript file and a CSS file, to your page's HTML head's section. Only two links a needed and they should point to the CDN of your choice. I've chosen the CdnJs and here are the links:

<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/themes/prism-tomorrow.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/prism.min.js" type="text/javascript"></script>

By adding the two lines of HTML to your page you've just installed the PrismJS on your web site. Now, to use it you need to surround your code sample with pre and code tags and use a CSS class on the code tag with the name "lang-xxxx" where xxxx is a language code. The most often used language codes are html, xml, js, clike, but many more are supported. See the list of supported languages here: https://prismjs.com/index.html#supported-languages. If you have html or xml tags in your code sample they have to be HTML encoded, i.e. replace "<" with "&lt;" and ">" with "&gt;".

<pre><code class="lang-html">
Your code example
</pre></code>

Why am I telling you all that? First, in case you might have been affected by a sudden disappearance of the SyntaxHighlighter as well, and second, well... The formatting of Prism is not fully compatible with the one of the SyntaxHighligher as the HTML standards had changed significantly since then. So, a lot of manual reformatting in older articles will be required. I am doing that but it's a lot of work and it will take some time to complete. So, hang in there if you've decided to read one of the older posts that haven't been converted yet.