In the process of writing a math-heavy blog post, I ran into several problems with the existing Jekyll configuration. I had set up Jekyll to use Redcarpet as the Markdown renderer, but it simply does not play well with MathJax: it will screw up \ and & inside the MathJax code.

It is said that Kramdown does better with MathJax, but it doesn’t support syntax highlighting on fenced code blocks and its MathJax syntax is very non-standard:  for inline math is just weird.

As a last resort, I decided to integrate Jekyll with Pandoc, which is arguably the Swiss army knife of markup formats. It is unopinionated and has a lot of flexibility in what it can do.

Fortunately, there is already a jekyll-pandoc plugin to do this. It was as simple as running gem install jekyll-pandoc and then tweaking the configuration file:

markdown: Pandoc
gems:
- …
- jekyll-pandoc
pandoc:
extensions:
- mathjax

I had wanted to integrate with Pygments as well, but Pandoc’s highlight-kate isn’t too bad and I didn’t feel like adding another complication to the process, so I will just stick with it unless I run into something I don’t like.

To make the colors show up, I just needed to write some CSS akin to the default themes (see Kate docs for details on the categories):

code.sourceCode span.co { color: …; } /* comment */
code.sourceCode span.al { color: …; } /* alert (warning) */
code.sourceCode span.er { color: …; } /* error (wrong_syntax) */
code.sourceCode span.bn { color: …; } /* base_n (nondecimal) */
code.sourceCode span.dv { color: …; } /* decimal_value */
code.sourceCode span.fl { color: …; } /* float */
code.sourceCode span.ch { color: …; } /* character */
code.sourceCode span.st { color: …; } /* string */
code.sourceCode span.dt { color: …; } /* data_type */
code.sourceCode span.fu { color: …; } /* function */
code.sourceCode span.im { color: …; } /* import */
code.sourceCode span.cf { color: …; } /* control_flow */
code.sourceCode span.kw { color: …; } /* keyword */
code.sourceCode span.pp { color: …; } /* preprocessor */
code.sourceCode span.re { color: …; } /* region_marker */
code.sourceCode span.ot { color: …; } /* other */

Hopefully none of the older posts broke. If so, let me know!