Hugo Cosmos support LaTeX\LaTeX using KaTeX\KaTeX , you can include complex mathematical formulae into your web page, either inline or centred on its own line. Since KaTeX\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≠0a \ne 0, there are two solutions to ax2+bx+c=0ax^2 + bx + c= 0 and they are x=−b±b2−4ac2ax = {-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 kk heads when flipping nn coins is:

P(E)=(nk)pk(1−p)n−k(1)\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}
$$

P(E)=(nk)pk(1−p)n−k(1) \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\LaTeX typesetting system.

Configuration

Hugo enable KaTeX\KaTeX automatically by default. If you want to use math formulae in your page, you need to manually activate KaTeX\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\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\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{\KaTeX}’s Rendering API options1 and of KaTeX’s{\KaTeX}’s configuration options2.

Examples

1

f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
f(x)=∫−∞∞f^(ξ) e2πiξx dξ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}
abcd\begin{matrix} a & b \\ c & d \end{matrix}
1
2
3
4

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

\begin{pmatrix}
   a & b \\
   c & d
\end{pmatrix}
(abcd)\begin{pmatrix} a & b \\ c & d \end{pmatrix}
1
2
3
4

\begin{bmatrix}
   a & b \\
   c & d
\end{bmatrix}
[abcd]\begin{bmatrix} a & b \\ c & d \end{bmatrix}
1
2
3
4

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

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

\begin{Bmatrix}
   a & b \\
   c & d
\end{Bmatrix}
{abcd}\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}
abcdefghi\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={aif bcif dx = \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}=>...
aif bcif d}=>...\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}
a=b+c=e+f\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}
a=b+cd+e=f\begin{align} a&=b+c \\ d+e&=f \end{align}
1
2
3
4

\begin{gather}
   a=b \\
   e=b+c
\end{gather}
a=be=b+c\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}
10x+3y=23x+13y=4\begin{alignat}{2} 10&x+&3&y=2\\ 3&x+&13&y=4 \end{alignat}

Reference

  1. Rendering API options ↩︎

  2. configuration options ↩︎