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>