Latex not working in newer version of Hugo

support
1

Hi,

It looks like my latex is not working anymore somehow.
I have an old post here.

Two of the equations are not working on the latest Hugo. I have to use older version Hugo to workaround the problem.

I checked my previous history here. AGraphicsGuyNotes/index.html at 66b16683c5dfaa380f56541cb2c5c52fda9590ba · JiayinCao/AGraphicsGuyNotes · GitHub
It does look like the latex was functional before. It looks like to me that maybe the newer version of hugo doesn’t work on this particular latex anymore.

2

Below are two math equations in latex, I’m afraid that it won’t work anymore.

$ \begin{array} {lcl} L(p,w_i) &=& \dfrac{1}{N}\Sigma_{i=1}^N(\underbrace{f_r(x_2\rightarrow x_1 \rightarrow x_0)G(x_1\longleftrightarrow x_2)f_r(x_3\rightarrow x_2 \rightarrow x_1)}_{sample\, radiance\, evaluation\, in\, stage2} \\\\\\ &=& \prod_{i=3}^{k-1}(\underbrace{\dfrac{f_r(x_{i+1}\rightarrow x_i\rightarrow x_{i-1})G(x_i\longleftrightarrow x_{i-1})}{p_a(x_{i-1})}}_{stored\,in\,vertex\, during\, light\, path\, tracing\, in\, stage1})\dfrac{G(x_k\longleftrightarrow x_{k-1})L_e(x_k\rightarrow x_{k-1})}{p_a(x_{k-1})p_a(x_k)}) \end{array} $

$ \begin{array} {lcl} L(p,w_i) &=& \dfrac{1}{N}\Sigma_{i=1}^N(\underbrace{f_r(x_2\rightarrow x_1 \rightarrow x_0)G(x_1\longleftrightarrow x_2)f_r(x_3\rightarrow x_2 \rightarrow x_1)}_{sample\, radiance\, evaluation\, in\, stage2} \\\\\\ & & \prod_{i=3}^{k-1}(\underbrace{\dfrac{f_r(x_{i+1}\rightarrow x_i\rightarrow x_{i-1})cos\theta_{i\rightarrow i-1}}{p_w(x_i\rightarrow x_{i-1})}}_{stored\,in\,vertex\, during\, light\, path\, tracing\, in\, stage1})\dfrac{cos\theta_{k\rightarrow k-1}L_e(x_k\rightarrow x_{k-1})}{p_w(x_k \rightarrow x_{k-1})p_a(x_k)}) \end{array} $

Both of these works well here,

3

Does this look right?

image
image822×399 32.4 KB

4

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

image
image1815×1455 493 KB

This indeed works on v0.88.

5

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.

6

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:
https://discourse.gohugo.io/t//40998/4

Make sure to test the alternative:
https://discourse.gohugo.io/t//40998/#alternative-3

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
7

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.

Thanks

8

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 (github.com/yuin/goldmark) 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:
https://discourse.gohugo.io/t/40998/#alternative-3

9

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

10

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?

11

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.

12

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.

13

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
14

Hi,

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

image
image1657×1752 270 KB

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?

Thanks

15

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 https://github.com/jmooring/hugo-testing hugo-forum-topic-40998
cd hugo-forum-topic-40998
hugo server

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

16

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.

image
image2348×1818 391 KB

Thanks a lot for helping.

17

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;
}
18

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.

image
image2272×1286 288 KB

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

19

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

20

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.

Thanks