December 3, 2017

Hakyll Code Highlighting Themes

As Hakylls FAQ points out, in order to have source code highlighting for your blog, you need appropriate CSS markup. It would be convenient if one could choose from the wealth of themes out there, but the existing pygments styles don’t seem to work any longer.

That’s probably because pandoc has since deprecated highlighting-kate in favor of skylighting, which adopts a different CSS naming convention, thus invalidating all prior CSS themes.

skylighting has a console app for highlighting code, but it doesn’t seem to be able to just dump CSS files for its rich style database. Fortunately, we can just pick from one of the pre-defined styles and generate the CSS with a GHCi two-liner:

$ stack --resolver=nightly-2017-12-01 --install-ghc install skylighting
...
$ stack --resolver=nightly-2017-12-01 ghci
...
Prelude> import Skylighting
Prelude Skylighting> writeFile "zenburn.css" $ styleToCss zenburn
Prelude Skylighting> ^D
$ cat zenburn.css
div.sourceLine, a.sourceLine { display: inline-block; min-height: 1.25em; }
a.sourceLine { pointer-events: none; color: inherit; text-decoration: inherit; }
.sourceCode { overflow: visible; }
code.sourceCode { white-space: pre; }
@media print {
code.sourceCode { white-space: pre-wrap; }
div.sourceLine, a.sourceLine { text-indent: -1em; padding-left: 1em; }
}
pre.numberSource div.sourceLine, .numberSource a.sourceLine
  { position: relative; }
...

With a little more effort, you could probably access skylightings whole style database, but I’m currently satisfied with the style I installed.