Inline Math with KaTeX

April 19, 2020

For this blog, I am currently using Hugo v0.62.2, and since v0.60 Hugo by default, goldmark is used under the hood to render Markdown to HTML. Moreover, to write math I am now using Katex which is pretty fast compared to other math typesetting libraries!

Today, as I was doing some math on my blog, I realize that inline math was not rendered. At first I thought that this was a conflict between KaTeX and goldmark but actually, I needed to tweak the delimiters KaTeX option. Fortunately, KaTeX options are well documented and so is the auto-render extension (plus, there is an answer on about this). Without further ado, Below is the partial that I am now using that is added to the head of every page that has math:true in the YAML front matter. In the code block below I’ve highlighted how I set up the delimiters option so as to use $$ for math in display mode and $ for inline math.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!-- Katex css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">

<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>

<!-- To automatically render math in text elements, include the auto-render extension: -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI"
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>

For instance $\sum_i^nd_i$ gives $\sum_i^nd_i$ whereas $$\sum_i^nd_i$$ yields the following equation

$$\sum_i^nd_i$$

By the way that \tag can be used to number the equation and so $$\sum_i=1^n \tag{1}$$ gives

$$\sum_i^nd_i \tag{1}$$

but looks like that so far, \tag do not handle automated referencing, this may change in the future, we’ll see!

That’s all folks 🎉! Hope this can be helpful!

KevCaz's Website

Home

Research

Miscelleneous

Inline Math with KaTeX

April 19, 2020