Latex not working in newer version of Hugo

Does this look right?

Yes, this is what it is supposed to look like.

Did you build it with v0.105?

This is what it looks like with v0.105 on my Arm Mac

This indeed works on v0.88.

My workaround for now is to simply use older version of Hugo on Windows to build the website.

It would be nice to come up with a fix in future update.

With a virgin installation of Hugo v0.88.0, your equations will not render. I am not sure why it was working for you. It shouldn’t have, unless your theme/modules are doing something else in the background.

As to why it is not working:

Make sure to test the alternative:

I’ve added your equations to that repository and it works fine.

The important files in that example:

  • layouts/_default/baseof.html
  • layouts/partials/katex.html
  • layouts/shortcodes/katex.html
  • layouts/_default/_markup/render-codeblock-katex.html

Thanks for the first link, according to your answer, I added \ before every _. And instead of $, I swap it with $$, it looks like it works on the latest hugo.

So should I use _ every time next time when I want _?
I don’t mind doing this as long as this is the correct way to do it.


Correction: I was able to get this to work with v0.88.0 and v0.88.1. Fails with v0.89.0 and later.

When we went from v0.88.1 to v.89.0, we bumped the markdown renderer ( from v1.4.0 to 1.4.2.

Although you may not like to hear it, this worked in v0.88.1 due to a bug in Goldmark. Goldmark adheres to the Commonmark specification. Commonmark provides a demonstration site that adheres to the specification.

When I use their demonstration site with your markup, the output from the current version of Goldmark is an exact match.

When I compare that to the output from v1.4.0 of Goldmark, it is not an exact match. The Goldmark author corrected that somewhere between v1.4.0 and 1.4.2. So your site broke when they fixed the bug.

Going forward, I would use either a shortcode or markdown render hook as described here:

Modifying your equations is error prone. I would use the short code or render hook as demonstrated in the example repo.

I just took a look at the repo and copy the short code in my own private repo.
It worked like a charm. Huge thanks for your help.

So in summary, if I would like to have bug-free latex code in my blog, I should use ketex & syntax to make sure it wraps my latex code, which essentially uses your shortcode.

Is it the right way of using it?

The right way to use the short code is to use unmodified latex syntax – just paste the latex between the opening and closing shortcode tags.

Nice solution.

Just my two cents, I’m not sure how possible it is. Maybe my opinion is very much biased because of the type of blogs I posted, looping this latex short code support in by default in Hugo’s system would be quite nice.
It does take me a bit of time to merge this short code in my repo. I didn’t even know such a short code existed before you point it out even if I literally wrote latex in every post of mine.

I understand, but this should be handled by theme authors if they want to provide that capability. Most sites do not need this, and there’s some baggage (shortcode and/or render hook, JS and CSS loaders, etc.).

1 Like


It comes to my atttention that this would expose some other problems

{{< katex >}}
$ \overrightarrow{p_i}(\bar{y}) = \begin{cases} p_a(\bar{y})&:i=0 \\\\\\ \overrightarrow{p_{\sigma , i}}(\bar{y})\overrightarrow{g_i}(\bar{y})&:otherwise \end{cases} \ \ \ \ (1)$
{{< \katex >}}

{{< katex >}}
$ \overrightarrow{p_{\sigma , i}}(\bar{y}) =\begin{cases} {p_{\sigma}}(p_0\rightarrow p_1)&:i=1 \\\\\\ {p_{\sigma}}(p_{i-2}\rightarrow p_{i-1} \rightarrow p_{i})&:i\ge 2 \end{cases} \ \ \ \ (2)$
{{< \katex >}}

If we add it at the end of the example 1 in the code block example, we would see this happening

There are two problems here

  • Each of the katex code block won’t occupy a whole line
  • The ## right after it doesn’t work anymore.

What would be the decent solution to solve this?


First, and this is not a Hugo thing, if your equation starts and ends with:

  • $$ the surrounding span element has a class attribute with value katex-display. The CSS for that class is:

    .katex-display {
       display: block;   <-- THIS IS THE IMPORTANT BIT
       margin: 1em 0;
       text-align: center;

    The CSS makes it a block element.

  • $ the surrounding span element has a class attribute with value katex. The CSS for that class is:

    .katex {
       text-rendering: auto;
       font: normal 1.21em KaTeX_Main,Times New Roman,serif;
       line-height: 1.2;
       text-indent: 0;

    Without display: block this in an inline element.

Second, in the shortcode or code block render hook, we can wrap the blocks with a div element, and then style the div to add vertical margins, vertical padding, background color, control overflow, etc.

I’ve updated the example we’ve been working with:

git clone --single-branch -b hugo-forum-topic-40998 hugo-forum-topic-40998
cd hugo-forum-topic-40998
hugo server

The CSS for the wrapping div is in layouts/_default/baseof.html.

Thanks for the quick reply.

Is there a way to adjust the katex-display for my own site?
I commonly prefer to have text alinged left, rather than center.

I used the codeblock solution for my first two equations, they are center aligned unlike before. I would like to keep them on the left if possible.

Thanks a lot for helping.

The KaTex script creates this CSS rule:

.katex-display > .katex {
    display: block;
    text-align: center;   <-- THIS IS THE IMPORTANT BIT
    white-space: nowrap;

Override it with:

.katex-display > .katex {
  text-align: left !important;

Thanks again, this works like a charm.
( I apologyze if those questions are a bit silly as this is not my domain. )

This is a bit out of the topic of this discussion.
If I may ask, I’d like to know if there is any possibility to make the equation number aligned on right, while leaving the equation on the left.

It would be looking a lot better than my current solution.

Please provide the markdown for an equation with an equation number.

Here is an example

$$ \overrightarrow{p_i}(\bar{y}) = \begin{cases} p_a(\bar{y})&:i=0 \\ \overrightarrow{p_{\sigma , i}}(\bar{y})\overrightarrow{g_i}(\bar{y})&:otherwise \end{cases} \ \ \ \ (1)$$

Ideally, I should have (1) to be right aligned with the rest of the equation left aligned. I did a lame thing here by adding \ \ \ \ .
It would be great if there is a proper solution available for such a use case.


Use \tag{foo}

{{< katex >}}
$$ \tag{1} \overrightarrow{p_i}(\bar{y}) = \begin{cases} p_a(\bar{y})&:i=0 \\ \overrightarrow{p_{\sigma , i}}(\bar{y})\overrightarrow{g_i}(\bar{y})&:otherwise \end{cases}$$
{{< /katex >}}

Please submit further questions of this nature to:


Fantastic, thanks a lot.
(Yup, I’ll post similar questions on other threads if needed.)