Adding mathjax

If only some Hugo pages require MathJax then it is possible to enable this via the front matter configuration.

Edit page front matter

Decide on the front matter property name. In this case mathjax is used.

For pages that require MathJax, add mathjax: true

title: "A page needing MathJax"
date: 2015-01-21
draft: false
mathjax: true

to the front matter

Import MathJax JavaScript

Add to the <head> template

a test for the MathJax param and
an import for MathJax if it is enabled.

<head>
    // omitted for brevity
    {{ if .Params.MathJax }}
    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3.0.1/es5/tex-mml-chtml.js"></script>
    {{ end }}
</head>

Edit page markdown

Inline Mathjax uses $ and $ to delimit expressions, but since Hugo requires \ to be escaped use \\ instead.

Avogadro's constant is \\( 6.02 * 10^{23} \\)

Block level MathJax doesn’t need to be escaped, the unescaped $$ delimiter is sufficient.

Adding mathjax

Edit page front matter

Import MathJax JavaScript

Edit page markdown

References