How to render math equations on your Minimal Mistakes

You need MathJax if you want to render mathematical equations on your Minimal Mistakes website.

I first learned about it from the blog post by Peter Willis (thanks, Peter!) However, I couldn’t enable MathJax even after following his instructions. So here’s what I did.

1.

Add this snippet at the end of the scripts.html which is in the _includes folder:

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" defer
        src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>

The MathJax documentation says that with this snippet you won’t need to change anything with each new version of MathJax.

2.

Enable MathJax in _config.yml by adding mathjax: true to the page defaults

# Defaults
defaults:
  # _posts
  - scope:
      path: ""
      type: posts
    values:
      layout: single
      author_profile: true
      read_time: true
      comments: true
      share: true
      related: true
      mathjax: true

Note: If you are using Docker, don’t forget to rebuild your container after making changes to _config.yml.

docker build -t minimal-mistakes .

Basically that’s it. Try rendering \(y_0\) using \\( and \\) delimeters for inline equations.

Use \\[ and \\] to display equations like this one:

\[ f(a) = \frac{1}{2\pi i} \oint_\gamma \frac{f(z)}{z-a} dz \]

Note: If things don’t work, check if the MathJax script is added to the page using Developer tools.