Using KaTeX in Hugo for math typesetting

Rendering latex in hugo can be achieved using KaTeX. This gives us the ability to render equations like below efficiently:

$\displaystyle\sum\limits_{i=0}^n i^3$

Steps to follow

We want to implement it in such a way that any pages that uses math typesetting can be earmarked with math: true in front-matter and then optionally katex will render the formulas given as below:

$\displaystyle\sum\limits_{i=0}^n i^3$


$\displaystyle\sum\limits_{i=0}^n i^3$

  1. Create a partial template under /layouts/partials/math.html, Make sure to check for the updated version of the extension:
    <link rel="stylesheet" href="">
    <script defer src=""></script>
    <script defer src="" onload="renderMathInElement(document.body);"></script>

    i. If you need inline equations include the following as-well:

    document.addEventListener("DOMContentLoaded", function() {
        renderMathInElement(document.body, {
            delimiters: [
                {left: "$$", right: "$$", display: true},
                {left: "$", right: "$", display: false}
  2. Include the below partial in the head section. In my case using PaperMod I had to add it to the following file layout/partials/extend_head.html:
{{ if or .Params.math .Site.Params.math }}
{{ partial "math.html" . }}
{{ end }}
  1. Use the parameter math: true in the front-matter or site parameters for enabling KaTeX in your posts.