Maximilian Fettinger

Render Math with Hugo

This guide shows how to add math support to your Hugo website. I am using the theme Papermod, but this works for any Hugo site.

Enable math in your hugo.yaml

params:
  math: true

Add a partial which loads MathJax

In layouts/partials/ create a math.html file and load and configure MathJax.

<script>
  MathJax = {
    tex: {
      displayMath: [
        ["\\[", "\\]"],
        ["$$", "$$"],
      ], // block
      inlineMath: [["\\(", "\\)"]], // inline
    },
    loader: {
      load: ["ui/safe"],
    },
  };
</script>

<script
  id="MathJax-script"
  async
  src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-mml-chtml.js"
></script>

Enable passthrough functionality

The markdown renderer should ignore the math delimiters, this can be configured in your hugo.yaml.

markup:
  goldmark:
    extensions:
      passthrough:
        delimiters:
          block:
            - - '\['
              - '\]'
            - - $$
              - $$
          inline:
            - - '\('
              - '\)'
        enable: true

Load the partial

In Hugo Papermod you can create partial extend_head.html in layouts/partials/. In this file load the math.html partial on the condtition that math is enabled in our configuration.

{{ if or .Params.math .Site.Params.math }}
{{ partial "math.html" . }}
{{ end }}

Enjoy the math

$$ d\Theta(t) = \sum_{i=1}^n \lambda_i \lvert w_i \rvert^2 \delta_{\lambda_i}(t) dt $$

If you need more functionality, for example the mathtools, you can use the \require macro from MathJax.

$$
\require{mathtools}
A \xLeftarrow[under]{over} B
$$
$$ \require{mathtools} A \xLeftarrow[under]{over} B $$

List of supported packages

Sources