Better Code Highlighting in Blogposts

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.