Math Typesetting

• 23/2/2025
• 2-minute read

For math typesetting in a Hugo project, you can leverage hugo’s internal $\KaTeX$ rendering engine.

If you want to use mathematical or chemical equations in your site, enable the Goldmark passthrough extension and define delimiters for block and inline formulae in your config file:

hugo.toml

[markup]
  [markup.goldmark]
    [markup.goldmark.extensions]
      [markup.goldmark.extensions.passthrough]
        enable = true
        [markup.goldmark.extensions.passthrough.delimiters]
          block = [['\[', '\]'], ['$$', '$$']]
          inline = [['\(', '\)']]

Afterwards you can author formulae using the standard $\LaTeX$ syntax:

Examples

Inline math: $\varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887…$

Block math:

Chemical equations:

Note: Use the online reference of Supported TeX Functions

Mathematical formulae inside code blocks

As an alternative to the standard syntax used above, formulae can also be authored using a GLFM math block:

The probability of getting \(k\) heads when flipping \(n\) coins is:

```math
\tag*{(1)} P(E) = {n \choose k} p^k (1-p)^{n-k}
```

This math block renders to:

The probability of getting $k$ heads when flipping $n$ coins is:

Chemical equations inside code blocks

You can use a code block adorned with chem in order to render a chemical equation:

```chem
\tag*{(2)} \ce{Hg^2+ ->[I-]  $\underset{\mathrm{red}}{\ce{HgI2}}$  ->[I-]  $\underset{\mathrm{red}}{\ce{[Hg^{II}I4]^2-}$}
```

This chem block renders to: