Migrating from Syntax Highlighter to Highlight.js
For many years I have been using Alex Gorbatchev’s Syntax Highlighter to provide the syntax highlighting on my blog. For the most part, it works well, and I use the excellent precode Windows Live Writer plugin to input my code snippets into blog posts. But I have run into a few problems with syntax highlighter, including scroll bars appearing even when they are not necessary, and not being able to get F# syntax highlighting working. Annoyingly Syntax Highlighter, throws up message boxes whenever it can’t find the syntax highlighter.
So I started taking a look at highlight.js, which has a number of very nice looking themes, a good up to date range of supported languages, and all the files available on a CDN, which makes it very easy to integrate with a blog. Integrating highlight.js is very easy, but it assumes that you will wrap all your code inside
<pre><code class="lang"> … </code></pre>.
However, for syntax highlighter, all code is wrapped inside a
pre block with a rather unusual class syntax for specifying the brush:
<pre class="brush: lang"> … </pre>. So to make the transition I would need to update all my posts to wrap each code snippet in a
pre and a
code block, and I would also no longer be able to use the precode plugin.
There were two steps. First, in the
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/tomorrow-night.min.css"/> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/languages/fsharp.min.js"></script>
And that’s all there is to it. I’m using this both here at markheath.net and at my old no longer updated blog at blogger (which still gets way more traffic than this site).
Thank you very much!khartnjava