A fairly big reason I started using Quartz in the first place was because of how convenient it was to keep using Obsidian as my Markdown editor. Specifically, my muscle memory with LaTeX in Markdown. Unfortunately, I needed to spend some time setting up Hugo to handle LaTeX, since it isn’t included by default in any themes I wanted to start with.

The solution was to use KaTeX, a lightweight javascript library for parsing and rendering LaTeX. All I needed to do was add the following code block:

{{ if or .Params.math .Site.Params.math }}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.7/dist/katex.min.css" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.7/dist/katex.min.js" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.7/dist/contrib/auto-render.min.js" crossorigin="anonymous"
    onload="renderMathInElement(document.body);"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            renderMathInElement(document.body, {
                delimiters: [
                    {left: "$$", right: "$$", display: true},
                    {left: "$", right: "$", display: false}
                ]
            });
        });
    </script>
{{ end }}

Since I am using PaperMod as my theme, I needed to just add it into partials/extend_head.html. Since we don’t want to have the library load for every single page, we have a variable math which we can set in the frontmatter for each post.

I found the code and steps to do this on Mustafa’s blog.