The KaTeX library allow you to enable TeX support to your hugo website. The library supports all major browsers. TeX syntax allows us to write mathematical formulas and scientific symbols easily.

$$ \int_a^b f(x) dx $$

Installing

To install, we just need to import the library files from some CDN to our Hugo website. One way to do this is using the Hugo partials which allow us to import small HTML context.

To start, lets create a new partial template file to hold the code needed to add the library. Create a new partial file in hugo_root/layouts/tex.html.

For the KaTeX library we just need to include one .js file and one .css file.

However, we also need the auto-render Katex extension which is responsible for scanning our markdown content looking for delimitiers to tell what content is a TeX content that Katex should render. The auto-render extension can be included with another single .js file.

One last thing is configuring the auto-render extension using javascript inside <script> tags. You can configure what are the delimiters that the extension should look for.

The latex.html file

The full content of latex.html is the following:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<!-- TEX.HTML -->

<!-- KATEX CSS FILE -->
<link rel="stylesheet" 
  href="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.css"
  integrity="sha384-o3WH+1yEhq+grOgz1BVYTZPyTlMXrDxnjN1By9/ba94JqJhva6wFm2Hb+URQX53v" 
  crossorigin="anonymous">

<!-- KATEX JS FILE -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.js"
  integrity="sha384-C5yZTsgLOfuizO9kb+hrB8uSBwwvZ4yenKWU0KmWl+7bkL6Tph/KbcOa3S4zdoRE" 
  crossorigin="anonymous"></script>

<!-- AUTO-RENDER EXTENSION -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/contrib/auto-render.min.js"
  integrity="sha384-hCXGrW6PitJEwbkoStFjeJxv+fSOOQKOPbJxSfM6G5sWZjAyWhXiTIIAmQqnlLlh" 
  crossorigin="anonymous"></script>


<!-- AUTO-RENDER CONFIGURATION -->
<script>
  document.addEventListener("DOMContentLoaded", function () {
    renderMathInElement(document.body, {
      delimiters: [
        { left: "$$", right: "$$", display: true },
        { left: "$", right: "$", display: false },
        { left: "\\(", right: "\\)", display: false },
        { left: "\\[", right: "\\]", display: true },
      ],
      throwOnError: false,
    });
  });
</script>

Importing the partial to the theme

Now we just need to import the partial in your PaperMod theme. Find the hugo-root/themes/PaperMod/layouts/partials/head.html template file, then import the created partial.

1

{{- partial "latex.html" . -}}

Testing

You should now be able to use TeX! Trying adding the following matrix structure to your markdown:

1
2
3
4
5
6

$$
\begin{bmatrix}
   x & y \newline
   z & w
\end{bmatrix}
$$

And you should see the following renderized TeX:

$$ \begin{bmatrix} x & y \\ z & w \end{bmatrix} $$

Inline TeX

You can use inline TeX like this \( \begin{bmatrix} a & b \newline c & d \end{bmatrix} \). The only difference is the delimiters, instead of using $$, just use \\( and \\).

New Line

The Katex documentation says that hard line breaks are \\ and \newline. However, note that we had to use \\\ instead of \\ to split lines while avoiding conflict with Hugo parser.

Documentation

You can check more examples of supported TeXt functions at https://katex.org/docs/supported.