Display Math Equations

To display math equations in Hugo, we need to add math typesettings.

I followed the PaperMod - Math Typesetting tutorial since I use it as the template.

The tutorial uses KaTex as the library.

Step 1: Math.html

Create a partial under /layouts/partials/math.html.

I use the Auto-render Extension to render the math inside it, and I include the reference to the script:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.css"
  integrity="sha384-zh0CIslj+VczCZtlzBcjt5ppRcsAmDnRem7ESsYwWwg3m/OaJ2l4x7YBZl9Kxxib"
  crossorigin="anonymous"
/>
<script
  defer
  src="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.js"
  integrity="sha384-Rma6DA2IPUwhNxmrB/7S3Tno0YY7sFu9WSYMCuulLhIqYSGZ2gKCJWIqhBWqMQfh"
  crossorigin="anonymous"
></script>
<script
  defer
  src="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/contrib/auto-render.min.js"
  integrity="sha384-hCXGrW6PitJEwbkoStFjeJxv+fSOOQKOPbJxSfM6G5sWZjAyWhXiTIIAmQqnlLlh"
  crossorigin="anonymous"
  onload="renderMathInElement(document.body);"
></script>

Step 2: Extend Head.html

Then we need to include this partial in extend_head.html.

Create a partial named /layouts/partials/extend_head.html, and use the following content:

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

Step 3: Configuration

To enable KaTex globally, add the following configuration to hugo.yaml:

params:
  math: true

To enable KaTex on a specific page, include the math: true parameter in the frontmatter:

---
date: "2025-02-23"
title: "Hugo Math Typsesetting"
math: true
---

Test

Once you’ve done with the settings, test it out:

$$
  1+2+3+\cdots+10=\sum_{n=1}^{10}n
$$

You should be able to see something like:

$$ 1+2+3+\cdots+10=\sum_{n=1}^{10}n $$

Enjoy math typesetting: 🔢