Enabling LaTeX rendering in Hugo

Some Hugo themes might have LaTeX rendering support built in, but they are usually not well documented. It may be worth looking through the layouts directory of your theme, to see if there are any files called math.html, katex.html, or math-jax.html. If there are, you likely have support for LaTeX rendering already enabled, and so all you would need to do this add a math variable to your front matter for any posts on your site.

---
# other various front matter
math: true
---

Now you should be able to write LaTeX in your posts. Try enclosing some LaTeX math in single or double dollar signs, like so: $$\int_{-\infty}^{\infty} \delta\left( \omega-\omega_0 \right) e^{-j\omega t} \, dt$$. This should display something similar to this: $$\int_{-\infty}^{\infty} \delta\left( \omega-\omega_0 \right) e^{-j\omega t} , dt$$

I can’t see these files / LaTeX doesn’t render

So your theme doesn’t have built in support for LaTeX rendering. Here’s how to add it.

There are two ways to do this, one that involves editing the partials in your theme, and the other that overrides them. I will be showing you how to do this by editing the partials in your theme.

Go to the themes directory, then to layouts and then to partials. Something like themes/THEME_NAME/layouts/partials. Inside you should see some files like head.html and footer.html.

  1. First make a new file called katex.html. Then navigate to here. Copy the code that contains the DOMContentLoaded function to your katex.html file. The code should look something like below, however you should always copy the code directly from the KaTeX website to ensure you have the most up to date code.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css" integrity="sha384-Xi8rHCmBmhbuyyhbI88391ZKP2dmfnOl4rT9ZfRI7mLTdk1wblIUnrIq35nqwEvC" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.js" integrity="sha384-X/XCfMm41VSsqRNQgDerQczD69XqmjOOOwYQvr/uuC+j4OPoNhVgjdGFwhvN02Ja" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/contrib/auto-render.min.js" integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR" crossorigin="anonymous"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        renderMathInElement(document.body, {
        // customised options
        // • auto-render specific keys, e.g.:
        delimiters: [
            {left: '$$', right: '$$', display: true},
            {left: '$', right: '$', display: false},
            {left: '\\(', right: '\\)', display: false},
            {left: '\\[', right: '\\]', display: true}
        ],
        // • rendering keys, e.g.:
        throwOnError : false
        });
    });
</script>
  1. Next, go to the head.html file. This will probably already include some stuff for your theme. Add in the following bit of code to the end of this file:
{{ if .Page.Params.math }}
    {{ partial "katex.html" . }}
{{ end }}
  1. That’s it! You should be ready to use LaTeX math in your website now, once you set math: true in your front matter. You can use the delimiters in the katex.html file to wrap math commands in, $$ and \\[ for block math (on its own line), and $ and \\( for inline math.

Welcome!

This is a place to store blog posts, college notes, and to show off my projects.


2022-08-18