Ever questioned yourself how easy it is to integrate LaTeX rendering to your blog? With the help of KaTeX it is easy to host everything needed yourself and render most LaTeX directly in the browser.
First of all it is important to test, if everything works as expected.
$$\alpha \Omega \checkmark \dots \Box$$
If this looks right, it works (with only adding $$ something $$!
But how much work is this to integrate in an Hugo blog? Not much, maybe 5 minutes of work max. The idea for me came from the example of my hugo theme, which explain it really fast. I did a slightly different setup, which combines the change mentioned in an issue on github and the possibility of KaTeX to host everything needed yourself.
So what is to do?
First, download the latest KaTeX
release from GitHub as a zip and
unpack it in your static folder inside Hugo.
After that, I copied from my theme
PaperMod the file
themes/hugo-PaperMod/layouts/partials/header.html to
layouts/partial/header.html and added in the middle
{{- if or .Params.math .Site.Params.math }}
<link rel="stylesheet" href="/katex/katex.min.css">
<script defer src="/katex/katex.min.js"></script>
<script defer src="/katex/contrib/auto-render.min.js" onload="renderMathInElement(document.body);"></script>
{{- end }}
As a last step I added math: true to the header of my blog entry and
everything works as you see it here.
So, as you can see, it is not very hard to add LaTeX rendering via KaTeX and host everything needed yourself and as always, if you have questions, just reach out!