This is a demo announcement, dismissible and configured in site.json.
Switch to latest

Math

Render LaTeX math expressions in your docs using KaTeX.

Bora renders LaTeX math via KaTeX (v0.17.0). Both display blocks and inline expressions are supported. KaTeX loads only on pages that use it, so pages without math carry no extra weight.

Display math

Use a fenced code block with the math language identifier. KaTeX renders it as a centered block equation:

markdown 
```math
\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
```
$$\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}$$

Another example:

$$\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}$$

Maxwell’s equations in differential form:

$$\nabla \cdot \mathbf{E} = \frac{\rho}{\varepsilon_0}, \quad \nabla \cdot \mathbf{B} = 0, \quad \nabla \times \mathbf{E} = -\frac{\partial \mathbf{B}}{\partial t}, \quad \nabla \times \mathbf{B} = \mu_0 \mathbf{J} + \mu_0 \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t}$$

Inline math

For inline math, add math: true to the page front matter and enable the Goldmark passthrough extension in hugo.toml. Then write $...$ for inline expressions and $$...$$ for display expressions directly in prose.

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

With passthrough enabled and math: true in front matter, you can write:

markdown 
The quadratic formula is $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$.

Which renders as: The quadratic formula is $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$.

Tip

Use math: true in front matter only on pages that contain inline $...$ math. Pages that only use ```math ``` blocks do not need it. The render hook sets the flag automatically.

How KaTeX loads

KaTeX (JS, CSS and fonts) is loaded only on pages where math is detected. The render hook for ```math ``` blocks sets the flag automatically. For inline math, the math: true front matter triggers the load. Neither the JS nor the CSS appears on pages without math.

Edit this page