I use Hugo static site generator to generate this website and many others. I love Hugo website generator for it’s speed. I can now gladly award it more points because I am more productive online after realizing I can write equations in my articles.

Here is a cool example:

$$\int_{1}^{12} x^5 + x^2 + 3 dx$$

The markup for the equation generally looks like so:

$$\int_{1}^{12} x^5 + x^2 + 3 dx$$

To make the above work, I only had to add the following to the footer partial:

....
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css"
integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq"
crossorigin="anonymous">

<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script 
defer 
src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" 
integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" 
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.11.1/dist/contrib/auto-render.min.js" 
integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" 
crossorigin="anonymous"
    
onload="renderMathInElement(document.body);"></script>

And then, in this article’s markdown file, I added the following to the frontmatter:

katex: true

Thanks to the Render LaTeX with KaTex in Hugo Blog post for the straightforward guide.

Recap

To make LaTeX equations work in Hugo, all you need to do is:

  1. Include KaTeX JS and CSS files in the baseof.html partial just before </body>, or in the footer.html.
  2. In the markdown file, add katex: true to the frontmatter.
comments powered by Disqus

You might also like