Hugo Cosmos support $\LaTeX$ using $\KaTeX$ , you can include complex mathematical formulae into your web page, either inline or centred on its own line. Since $\KaTeX$ relies on server side rendering, it produces the same output regardless of your browser or your environment. Formulae can be shown either inline or in display mode.

Inline Mode

The following code sample produces a text line with three inline formulae:

1

When $a \ne 0$, there are two solutions to $ax^2 + bx + c= 0$ and they are $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$.

When $a \ne 0$, there are two solutions to $ax^2 + bx + c= 0$ and they are $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$.

Display Mode

The following code sample produces an introductory text line followed by a formula numbered as (1) residing on its own line:

1
2
3
4

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

The formula itself is written inside a GLFM math block. The above code fragment renders to:

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

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

math code blocks are only supported as of hugo version 0.93.

In case of hugo version 0.92 or lower, use this code snippet with $$ delimiter to display the formula:

1
2
3

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

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

Tip

This wiki page provides in-depth information about typesetting mathematical formulae using the $\LaTeX$ typesetting system.

Configuration

Hugo enable $\KaTeX$ automatically by default. If you want to use math formulae in your page, you need to manually activate $\KaTeX$ support. The easiest way to do so is to add a math attribute to the frontmatter of your page and set it to true:

1
2
3

---
math: true
---

Additionally, you can disable $\KaTeX$ support inside config.toml, if needed:

1
2
3

[params.katex]
    # enable/disable KaTeX support, default true
    enable = false

Here is the default delimiter option for $\KaTeX$ in hugo cosmos:

1
2
3
4
5
6
7
8

renderMathInElement(document.querySelector(`.post-content`), {
    delimiters: [
        { left: "$$", right: "$$", display: true },
        { left: "$", right: "$", display: false },
        { left: "\\(", right: "\\)", display: false },
        { left: "\\[", right: "\\]", display: true }
    ]
});

For a complete list of options and their detailed description, have a look at the documentation of ${\KaTeX}’s$ Rendering API options1 and of ${\KaTeX}’s$ configuration options2.

Examples

1

f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
$$f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi$$
1
2
3
4

\begin{matrix}
   a & b \\
   c & d
\end{matrix}
$$\begin{matrix} a & b \\ c & d \end{matrix}$$
1
2
3
4

\begin{array}{cc}
   a & b \\
   c & d
\end{array}
$$\begin{array}{cc} a & b \\ c & d \end{array}$$
1
2
3
4

\begin{pmatrix}
   a & b \\
   c & d
\end{pmatrix}
$$\begin{pmatrix} a & b \\ c & d \end{pmatrix}$$
1
2
3
4

\begin{bmatrix}
   a & b \\
   c & d
\end{bmatrix}
$$\begin{bmatrix} a & b \\ c & d \end{bmatrix}$$
1
2
3
4

\begin{vmatrix}
   a & b \\
   c & d
\end{vmatrix}
$$\begin{vmatrix} a & b \\ c & d \end{vmatrix}$$
1
2
3
4

\begin{Vmatrix}
   a & b \\
   c & d
\end{Vmatrix}
$$\begin{Vmatrix} a & b \\ c & d \end{Vmatrix}$$
1
2
3
4

\begin{Bmatrix}
   a & b \\
   c & d
\end{Bmatrix}
$$\begin{Bmatrix} a & b \\ c & d \end{Bmatrix}$$
1
2
3
4
5
6
7

\def\arraystretch{1.5}
   \begin{array}{c:c:c}
   a & b & c \\ \hline
   d & e & f \\
   \hdashline
   g & h & i
\end{array}
$$\def\arraystretch{1.5} \begin{array}{c:c:c} a & b & c \\ \hline d & e & f \\ \hdashline g & h & i \end{array}$$
1
2
3
4

x = \begin{cases}
   a &\text{if } b \\
   c &\text{if } d
\end{cases}
$$x = \begin{cases} a &\text{if } b \\ c &\text{if } d \end{cases}$$
1
2
3
4

\begin{rcases}
   a &\text{if } b \\
   c &\text{if } d
\end{rcases}=>...
$$\begin{rcases} a &\text{if } b \\ c &\text{if } d \end{rcases}=>...$$
1
2
3
4
5

\begin{equation}
\begin{split}   a &=b+c\\
      &=e+f
\end{split}
\end{equation}
$$\begin{equation} \begin{split} a &=b+c\\ &=e+f \end{split} \end{equation}$$
1
2
3
4

\begin{align}
   a&=b+c \\
   d+e&=f
\end{align}
$$\begin{align} a&=b+c \\ d+e&=f \end{align}$$
1
2
3
4

\begin{gather}
   a=b \\
   e=b+c
\end{gather}
$$\begin{gather} a=b \\ e=b+c \end{gather}$$
1
2
3
4

\begin{alignat}{2}
   10&x+&3&y=2\\
   3&x+&13&y=4
\end{alignat}
$$\begin{alignat}{2} 10&x+&3&y=2\\ 3&x+&13&y=4 \end{alignat}$$

Reference

  1. Rendering API options ↩︎

  2. configuration options ↩︎