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:
- Modifying
hugo.tomlto include the goldmark extension:
# enabling math
[markup.goldmark]
[markup.goldmark.extensions]
[markup.goldmark.extensions.passthrough]
enable = true
[markup.goldmark.extensions.passthrough.delimiters]
block = [['\[', '\]'], ['$$', '$$']]
inline = [['\(', '\)']]
- Adding
math = trueto 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.
- Replace Typo’s existing
partials/math.htmlso 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{!!!} \]