I've moved over the blog to Hakyll, so things are a bit less makeshfit.
I really the syntax highlighting, but one problem I noticed was that the code blocks didn't show up on Safari Reader.
After doing a bit of digging it turned out that some time around Pandoc 2.0.4, skylighting
started adding line numbers that had an
<a> tag, which seemed to throw Safari off.
<code class="sourceCode haskell"> <a class="sourceLine" id="cb1-1" data-line-number="1"> <span class="kw">data</span> <span class="dt">RequestMessage</span> m req resp <span class="fu">=</span> <span class="fu">...</span> </a> </code>
Unfortunately there doesn't seem to be a way to turn this off, and rather than try to strip off those tags myself, I decided just to use another compiler other than Pandoc.
Since I was only going to be compiling markdown, I landed on MMark. Unlike other compilers, MMark is strict - I plugged it into hakyll:
mmarkCompiler :: Compiler (Item String) mmarkCompiler = do fp <- getResourceFilePath getResourceLBS >>= withItemBody (\lbs -> let text = T.toStrict $ T.decodeUtf8 lbs in case MMark.parse fp text of Left e -> error (MMark.parseErrorsPretty text e) Right doc -> return $ T.unpack $ Lucid.renderText $ MMark.render doc
And right off the bat it picked up a bunch of mistakes in my existing blog posts:
Initialising... Creating store... Creating provider... Running rules... Checking for out-of-date items Compiling updated templates/default.html updated about.rst updated templates/post.html updated posts/hakyll.md updated posts/haskellMake.md updated posts/hello.md [ERROR] ./posts/lens.md:177:66: | 177 | In `haskell-lsp` these are also generated via (Template Haskell)[https://artyom.me/lens-over-tea-6]. | ^ could not find a matching reference definition for "https://artyom.me/lens-over-tea-6"
It also comes with an extension for ghc-syntax-highlighter, which was what I came for in the first place. Setting it up was super easy:
MMark.render $ MMark.useExtensions extensions doc where extensions = [ MMark.ghcSyntaxHighlighter , MMark.skylighting ]
And now I have clean, Safari-readable tags:
<code class="sourceCode haskell"> <span class="kw">data</span> <span class="dt">RequestMessage</span> m req resp <span class="fu">=</span> <span class="fu">...</span> </code>