How to render math equations properly with KaTeX

support
4

Yes. You can determine what’s happening by viewing the browser source.

Example 1

markdown

$$\underbrace{a}_{b} - \underbrace{c}_{d}$$

rendered

<p>$$\underbrace{a}<em>{b} - \underbrace{c}</em>{d}$$</p>

See the em element? That’s due to the pair of underscores in the markdown.

fix (escape first underscore)

$$\underbrace{a}\_{b} - \underbrace{c}_{d}$$

Example 2

markdown

$$
\begin{pmatrix}
  a & b \\
      c & d
      \end{pmatrix}
$$

rendered

  <p>$$
\begin{pmatrix}
a &amp; b \
c &amp; d
\end{pmatrix}
$$</p>

At the end of the third line the two backslashes were reduced to a single backslash, because in markdown a backslash escapes the following character.

fix (escape the escape character)

$$
\begin{pmatrix}
  a & b \\\
      c & d
      \end{pmatrix}
$$

Alternative

To prevent Hugo from rendering to HTML before KaTex renders the math, use a shortcode or code block render hook. Here’s a small test site that demonstrates both:

git clone --single-branch -b hugo-forum-topic-40998 https://github.com/jmooring/hugo-testing hugo-forum-topic-40998
cd hugo-forum-topic-40998
hugo server
3 Likes