LaTeX Formulae with MathJax in jekyll

Introduction

Every once in a while, scholars from natural sciences might want to add a formula on a Web page or in a blog post. Normally, these people are used to typeset formulae with LaTeX and thus prefer to simply copy over LaTeX code instead of using dirty and time-consuming workarounds like fiddling with unicode special characters or snapshotting from a PDF to get the formula displayed in a browser. Fortunately, adding formulae just by typing LaTeX code is super-easy (again) with jekyll. You only have to follow two simple steps I’m going to explain in this post.

Include MathJax Script Tag in Default Layout

The first step is to add a script tag linking to a CDN deployment of the MathJax library.

<script type="text/javascript" 
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

In the standard case, you simply add this tag to _layout/default.html, while some themes ship with a template dedicated to adding any JS libs you need additionally. For example, in the minimal-mistakes theme, you’ll find a file _includes/scripts.html just for this purpose.

Set Markdown Module

For MathJax to work properly, your markdown module has to support it. This is the case for kramdown. In your _config.yml, make sure that the markdown field is set to the right module.

Use LaTeX Code

You’re good to go now. Simply add double-dollar-embraced LaTeX math statements to your page like in this example:

$$ \sum_{i=1}^{n}\frac{n(n-1)}{2} $$

The result should look like this:

Or here… something more complex…

Conclusion

Et voilá! Just within one minute, you made your jekyll page render LaTeX formulae. Enjoy extreme formula-ing!