Mike Chumba
Mike Chumba
Author
|

Writing Math Equations in Your Blog Posts

Writing equations in your blog posts can be interesting. Instead of adding equations as images, you just type them in. It involves some small set up, but rewarding in the long run.
posts | 1 minute read
Cover image for Writing Math Equations in Your Blog Posts

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.

Related Articles

Article image
|

Git Best Practices Simplified

Git is the most important development tool. It allows you to time-travel through your code and provides excellent …

posts | 4 minute read