I can't get katex to work on my site...

[slashformotion]

I saw this https://jpanther.github.io/congo/samples/math-typesetting/

Isn't the part in the red rectangle supposed to be in the theme template ?

[jpanther]

Katex isn't currently one of the built-in features of the theme. The page you're looking at is one of the default Hugo content samples and Katex is being included on that page as an example.

If this is something you'd find useful I can look at including it in the theme.

[slashformotion]

I found a workaround:

/layouts/partials/extend-head.html

{{ if or .Params.math .Site.Params.math }}
{{ partial "math.html" . }}
{{ end }}

/layouts/partials/math.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css"
    integrity="sha384-cRxb1HsKSl8bTfU9fBcGsjktUfQa6w+fwvkYnU8XjFH4Qg8To1+/9OXv5iRzrKX4" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js"
    integrity="sha384-ov99pRO2tAc0JuxTVzf63RHHeQTJ0CIawbDZFiFTzB07aqFZwEu2pz4uzqL+5OPG"
    crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/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 },
            ],
            // • rendering keys, e.g.:
            throwOnError: false
        });
    });
</script>

[jpanther]

I went ahead and bundled Katex into the theme. As of v1.5.0 there's a new katex shortcode that will add the necessary components for you. See the shortcode docs for more details.