Replacing/adding the syntax highlighter on Blogger

As you might have read in previous posts, I added a library to Blogger a long time ago to be able to use a syntax highlighter on code snippets. By default, Blogger does not have this functionality and as I regularly post code snippets I thought this was quite convient.

The library however is no longer supported, there was a bug recently and the embedding of the library is causing some issues with performance as these files are not being cached properly.

So it's time to look for something else, so in this post I'll be replacing my existing syntax highlighter with a new one.

Let's get to it!

To give you an idea, this is what it looks like without the highlighter, with the old one and with the new one.

Without the highlighter

With the old library

With th new library

Okay, in all fairness, this HTML snippet doesn't really do the new library credit. You can find other code snippets in this blog post to demonstrate a few different styles.

Adding the new library

A quick Google search led me to https://highlightjs.org/, which is ridiculously easy to set up.

1. Add the library, the theme and a call to the function in the library to your Blogger html. These go into the head tag.

<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js'/>
<script>hljs.highlightAll();</script>

2. Add your code between "<pre><code></code></pre>" tags. Note that you need to add these in the HTML editor and the code itself needs to be added in the normal edit mode, otherwise the rich text editor in Blogger will convert the tags and it won't work.

3. The library will try to auto-detect the language, if you prefer to set it yourself you can do so by setting it as a class of the code tag.

<pre><code class="language-html">...</code></pre>

And that's all :)

Removing the old library

Now that we've got the new library up and running, I need to remove the old code and update the old snippets.

1. I removed all the below code from the head tag, these are the scripts and themes for the old library with a call to the function.

<script async='async' src='https://dl.dropboxusercontent.com/s/n2m65h7wnd58c69/shCore.js' type='text/javascript'/>
<script async='async' src='https://dl.dropboxusercontent.com/s/5rm9fcpnppdm0v4/shBrushCSharp.js' type='text/javascript'/>
<script async='async' src='https://dl.dropboxusercontent.com/s/w5d95s9w53dc7ou/shBrushXml.js' type='text/javascript'/>
<script async='async' src='https://dl.dropboxusercontent.com/s/xn5zvbjm13b74l2/shBrushJScript.js' type='text/javascript'/>
<script async='async' src='https://dl.dropboxusercontent.com/s/hs8u67hvjcug8cj/shBrushCss.js' type='text/javascript'/>
<script async='async' src='https://dl.dropboxusercontent.com/s/fgbbxyd3t27ijpd/shBrushSql.js' type='text/javascript'/>
<link href='https://dl.dropboxusercontent.com/s/mx1757t37p4jqrr/shCore.css' rel='stylesheet' type='text/css'/>
<link href='https://dl.dropboxusercontent.com/s/lcgzgdwkzefugjr/shThemeDefault.css' rel='stylesheet' type='text/css'/>

<script type='text/javascript'>
  SyntaxHighlighter.config.bloggerMode = true;
  SyntaxHighlighter.all();
</script>

2. Next, I went through previous blog posts looking for code snippets. They stopped showing entirely so it was a bit of a struggle to find all of them. If you notice that I missed one, feel free to let me know in the comments :) As the previous library used a slightly differen setup with the pre and code tags, I had to correct those.

That's it! Updating previous posts was a bit of a bother but I'm happy with how easy this was to setup.

P.S. the CDN that distributes these scripts does allow me to cache these files so this will help in the performance review as well!

Could be useful, right?