Mathematical Expressions

You can use a fenced code block or shortcode to embed an SVG image of a LaTeX mathematical expression or equation in your Doks site using the free Math API service.

Unlike JavaScript solutions such as KaTeX or MathJax, this approach embeds an SVG image in your page.

Fenced code block

Include a LaTeX expression or equation in your markdown using a fenced code block.

Examples

```math
$$
\frac{1}{\Gamma(s)}\int_{0}^{\infty}\frac{u^{s-1}}{e^{u}-1}\mathrm{d}u
$$
```
mathematical expression or equation

You can add markdown attributes like class and id to the div element that wraps the SVG image — for example:

```math {.text-center}
$$
\frac{1}{\Gamma(s)}\int_{0}^{\infty}\frac{u^{s-1}}{e^{u}-1}\mathrm{d}u
$$
```
mathematical expression or equation

Shortcode

Include a LaTeX expression or equation in your markdown using a shortcode, either as a block or inline.

Examples

Block

{{< math class=text-center >}}

$$
x^n + y^n = z^n
$$

{{< /math >}}
mathematical expression or equation

Inline

An inline {{< math >}}${(x+y)}^2${{< /math >}} expression.

An inline mathematical expression or equation expression.

Performance

The render hook and shortcode call Hugo’s resources.GetRemote function to request the SVG image from the Math API. Hugo caches the result, and invalidates the cache when (a) you edit the LaTeX markup, or (b) the cache expires.

To optimize performance in a CI/CD environment such as Cloudflare Pages, GitHub Pages, or Netlify, you should:

  1. Edit your site configuration to store the getresource cache in the project’s resources directory, setting the cache to never expire:

    hugo.toml
    [getresource]
    dir = ':resourceDir/_gen'
    maxAge = -1
  2. Check the resources directory into source control.

In this configuration, Hugo will use the cached resources when building your site locally and remotely, invalidating the cache when you change the LaTeX markup.