⌨️ MMark and Hakyll

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>