A pain free recipe

Perhaps you’ve noticed that the standard Markdown library doesn’t render LaTex. Turn’s out that the workaround is really simple. All you need is the MathJax plugin for kramdown. MathJax is essentially a JavaScript PNG renderer that turn your LaTex Snippets into high qualit PNG images.

To get it up and running, two steps must be taken:

  1. Ensure you are running on a compatible markdown processing engine. If you use Jekyll, you’re good to go since it runs on kramdown, which support MathJax.
  2. You need to load the plugin. This is done by inserting a code snippet (below) into relevant page layouts that you have in the _layouts folder:
<script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_CHTML"></script>

So for instance, suppose you have post.html layout document. Then just insert the above code to enable LaTex rendering on any post that has layout: post. Now, if you have several layouts that all load a base layout, then you can insert the code in the base layout script to automatically load it in all its dependencies.

Syntax

For inline LaTex, MathJax looks for the \\( ... \\) delimiter. Hence to write \( a^2 = b^2 \) as an inline equation, use \\( a^2 = b^2 \\). For displayed equations, the delimiter is either \\[ ... \\]. And so to display \[ a^2 = b^2 + c^2 \] we would write \\[ a^2 = b^2 + c^2 \\].

Configurations

Now, to get serious, we need to configure MathJax to behave like a full-body LaTex renderer. To to this, we work with the MathJax.Hub.Congig API. There are plenty of configuration options allowing you a very high degree o flexibility, but it can require quite a bit of work as it has to be coded as javascript objections. Luckily some standard options are preconfigured, such as loading the AMSMAth and AMSSymbols packages. Here, we load these packages, turn equation numbering on, and define the $ ... $ as an inline equation environment (to get an actual $ sign, use \$). In the same file that you added the above script, paste in the below code underneath:

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [['$','$'], ['\\(','\\)']],
processEscapes: true},
jax: ["input/TeX","input/MathML","input/AsciiMath","output/CommonHTML"],
extensions: ["tex2jax.js","mml2jax.js","asciimath2jax.js","MathMenu.js","MathZoom.js","AssistiveMML.js", "[Contrib]/a11y/accessibility-menu.js"],
TeX: {
extensions: ["AMSmath.js","AMSsymbols.js","noErrors.js","noUndefined.js"],
equationNumbers: {
autoNumber: "AMS"
}
}
});
</script>

Now you’re set up for fancy, numbered equations:

You can easily reference and equation like \eqref{label} with the standard \eqref{label} syntax (note - no delimiters). To write the equations. The equation itself is render by typing:

$$ \begin{equation} \label{label} ... \end{equation} $$

And that’s it! See the documentation for more information on how to tweak MathJax.