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.
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.
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.).
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:
display: block; <-- THIS IS THE IMPORTANT BIT
margin: 1em 0;
The CSS makes it a block element.
$ the surrounding span element has a class attribute with value katex. The CSS for that class is:
font: normal 1.21em KaTeX_Main,Times New Roman,serif;
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
The CSS for the wrapping div is in layouts/_default/baseof.html.
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.