Adding LaTeX Support

If this is rendering then LaTeX is working:

\[ x^2 + y^2 = z^2 \]

:]

How’d We Get Here? #

I want to start publishing some notes here but in preparation I would like to be able to write equations with LaTeX. As of writing this website doesn’t do that so I’m going change it now.

Heads Up: Typo (the Hugo theme I am using as of writing) supposedly supports math off the bat (see point 4) but I couldn’t get it to work and also I want to use MathJax instead of KaTeX anyway.

As you can see from the footer this website is built using a tool called Hugo. Hugo has some pretty good docs so the second thing that I did after blindly flailing around for a few minutes in javascript land was go read them, and I immediately found the information I needed.

You can read all the details in hugo’s documentation here, but these are the steps that I took:

  1. Modifying hugo.toml to include the goldmark extension:
# enabling math
[markup.goldmark]
  [markup.goldmark.extensions]
    [markup.goldmark.extensions.passthrough]
      enable = true
  [markup.goldmark.extensions.passthrough.delimiters]
    block = [['\[', '\]'], ['$$', '$$']]
    inline = [['\(', '\)']]
  1. Adding math = true to the front matter of this page:
+++
date = '2026-01-08T19:22:36-08:00'
title = 'Adding LaTeX Support'
math = true
+++

Now the equation is rendering using KaTeX.

  1. Replace Typo’s existing partials/math.html so that it loads MathJax instead of KaTeX
<!-- partials/math.html -->
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-mml-chtml.js"></script>

<script>
  MathJax = {
    tex: {
      displayMath: [['\\[', '\\]'], ['$$', '$$']],  // block
      inlineMath: [['\\(', '\\)']]                  // inline
    },
    loader:{
      load: ['ui/safe']
    },
  };
</script>

And that’s it. Now math renders nicely.

\[ \Upsilon \iota \rho \rho \epsilon \epsilon \text{!!!} \]