Some Hugo themes might have LaTeX rendering support built in, but they are usually not well documented.
It may be worth looking through the layouts directory of your theme, to see if there are any
files called math.html
, katex.html
, or math-jax.html
. If there are, you likely have support
for LaTeX rendering already enabled, and so all you would need to do this add a math
variable to
your front matter for any posts on your site.
---
# other various front matter
math: true
---
Now you should be able to write LaTeX in your posts. Try enclosing some LaTeX math in single or double
dollar signs, like so: $$\int_{-\infty}^{\infty} \delta\left( \omega-\omega_0 \right) e^{-j\omega t} \, dt$$
.
This should display something similar to this:
$$\int_{-\infty}^{\infty} \delta\left( \omega-\omega_0 \right) e^{-j\omega t} , dt$$
I can’t see these files / LaTeX doesn’t render
So your theme doesn’t have built in support for LaTeX rendering. Here’s how to add it.
There are two ways to do this, one that involves editing the partials in your theme, and the other that overrides them. I will be showing you how to do this by editing the partials in your theme.
Go to the themes directory, then to layouts and then to partials. Something like themes/THEME_NAME/layouts/partials
.
Inside you should see some files like head.html
and footer.html
.
- First make a new file called
katex.html
. Then navigate to here. Copy the code that contains theDOMContentLoaded
function to yourkatex.html
file. The code should look something like below, however you should always copy the code directly from the KaTeX website to ensure you have the most up to date code.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css" integrity="sha384-Xi8rHCmBmhbuyyhbI88391ZKP2dmfnOl4rT9ZfRI7mLTdk1wblIUnrIq35nqwEvC" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.js" integrity="sha384-X/XCfMm41VSsqRNQgDerQczD69XqmjOOOwYQvr/uuC+j4OPoNhVgjdGFwhvN02Ja" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/contrib/auto-render.min.js" integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR" crossorigin="anonymous"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
renderMathInElement(document.body, {
// customised options
// • auto-render specific keys, e.g.:
delimiters: [
{left: '$$', right: '$$', display: true},
{left: '$', right: '$', display: false},
{left: '\\(', right: '\\)', display: false},
{left: '\\[', right: '\\]', display: true}
],
// • rendering keys, e.g.:
throwOnError : false
});
});
</script>
- Next, go to the
head.html
file. This will probably already include some stuff for your theme. Add in the following bit of code to the end of this file:
{{ if .Page.Params.math }}
{{ partial "katex.html" . }}
{{ end }}
- That’s it! You should be ready to use LaTeX math in your website now, once you set
math: true
in your front matter. You can use the delimiters in thekatex.html
file to wrap math commands in,$$ and \\[
for block math (on its own line), and$ and \\(
for inline math.