This article shares how to embed Latex mathematics inside Hugo’s web pages. As latex math symbols are widely used, it is a good idea to have a way to render them in your blog.

We choose Katex as the math rendering engine. What we need to do for embedding katex is quite simple. We just need to include the katex css and js files in the header of our web page.

Since I’m using creating my own theme from the theme blank, what i did is I create a new file called “katex.html” under the folder “layouts/partials” and put the following code in it:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.css" integrity="sha384-vKruj+a13U8yHIkAyGgK1J3ArTLzrFGBbBc0tDp4ad/EyewESeXE/Iv67Aj8gKZ0" crossorigin="anonymous">

<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.js" integrity="sha384-PwRUT/YqbnEjkZO0zZxNqcxACrXe+j766U2amXcgMg5457rve2Y7I6ZJSm2A0mS4" crossorigin="anonymous"></script>

<!-- To automatically render math in text elements, include the auto-render extension: -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"
    onload="renderMathInElement(document.body);"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        renderMathInElement(document.body, {
            delimiters: [
                {left: "$$", right: "$$", display: true},
                {left: "$", right: "$", display: false}
            ]
        });
    });
</script>

In this file, we include the katex css and js files, and then we use the function “renderMathInElement” to render the math symbols in the web page. The function “renderMathInElement” will render all the math symbols in the web page, so we need to specify the delimiters for math symbols. In this case, we use “$$” for display math and “$” for inline math.\

The links to the katex css and js files are from the official website of katex. They update ofently, so we need to check the latest version of katex and update the links here Katex.

Then we need to include this file in the header of our web page. In my case, I just need to add the following line in the file “layouts/_default/baseof.html”:

{{ partial "katex.html" . }}

And, we also need to create shortcode for math symbols, preventing the rendering engine changing slash to escape characters. Since katex will only recognized the real slash. In my case, I create a file called “math.html” under the folder “layouts/shortcodes” and put the following code in it:

{{ .Inner }}

This means that we just render the raw content inside the shortcode. In order to use this shortcode, we need to add it before and after the math symbols. For example, if we want to render the following matrix:

{{< math >}}
$$
\begin{bmatrix}
1 & 2 & 3 \\
4 & 5 & 6 \\
7 & 8 & 9
\end{bmatrix}
$$
{{< /math >}}

After that, we can use the math symbols in our web page. Let’s have a try.

Here’s a matrix:

Here’s a vector:

Here’s a equation:

Inline math here: $x^2 + y^2 = z^2$.