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.

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
$$
```

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
$$
```

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 >}}

Inline#

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

An inline 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:

   [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.