Better Code Highlighting in Blogposts

Posted on January 9, 2015 by Richard Goulter

I’ve finally gotten around to improving the code syntax highlighting in my blogposts.
Previously, it wasn’t exactly heinous; but where my programs were too long, the code listing didn’t include a scrollbar to limit the width of the listing. e.g. This post was a bad offender.
Turns out the big difference is just having the CSS attribute overflow-x: auto; on the <code> tag. (Or the <pre> tag).

As far as I understood, previously Hakyll was highlighting my code listings using Pandoc, and so I needed to include the Pandoc-generated CSS for my blogposts.

I’ve just changed it to make use of highlight.js.
This post (one of the early ones in a search for “highlight.js vs syntaxhighlighter.js”) suggested highlight.js since it could handle <pre><code></code></code> which Hakyll/Pandoc generates; the comparison blogpost linked to says this is the HTML5 recommended way of listing code. So.

As far as I can tell from playing around with it, it’s still not ideal.
At the moment I’m using both at-the-same-time. (My Haskell code looked a little bland without Pandoc’s generation).
Perhaps I could’ve tried just using a different CSS style to feed to Pandoc, or perhaps I’ll get sensible and figure out The Right Way to do this kindof thing.

Newer post Older post