how to render math shortcodes inside other shorctodes

[olivierpikeroen]

The problem

Let's say one'd like to write LaTeX math in a callout shortcode. Not markdown math but LaTeX math. For example:

$\begin{cases}
  x \\
  y
\end{cases}$

Then one should put the LaTeX code inside a math shortcode, according to https://docs.hugoblox.com/reference/markdown/#math :

{{< callout note >}}
{{< math >}}
$\begin{cases}
  x \\
  y
\end{cases}$
{{< /math >}}
{{< /callout >}}

But the rendering looks like this:

Whereas the same code outside the callout shortcode renders as expected:

This is because of the markdownify pipe inside the callout shortcode:

<div class="alert alert-{{ .Get 0 }}">
  <div>
    {{ .Inner | markdownify | emojify  }}
  </div>
</div>

Indeed, if we remove it:

<div class="alert alert-{{ .Get 0 }}">
  <div>
    {{ .Inner | emojify  }}
  </div>
</div>

we get the expected rendering:

...but it leads to another problem, which is the text will not be rendered as markdown !
For example, if now we have:

{{< callout note >}}
$x$, $y$ are **variables**
{{< math >}}
$\begin{cases}
  x \\
  y
\end{cases}$
{{< /math >}}
{{< /callout >}}

it renders:

where the word "variables" is not rendered as bold.

The solution

I came up with a workaround, which I share for those who would need it some day.
Inside the callout shortcode, replace with this (I use .Page.RenderString instead of markdownify but both work):

<div class="alert alert-{{ .Get 0 }}">
  <div>
        {{ $content := .Inner }}
	{{ $regex := `(?s)\$.*?\$` }}
	{{ $mathContent := findRE $regex $content }}
	{{ $mathPlaceholder := "MATH_PLACEHOLDER" }}
	{{ $content = replaceRE $regex $mathPlaceholder $content | .Page.RenderString }}
	{{ range $m := $mathContent}}
            {{ $content = replace $content $mathPlaceholder $m 1 }}
        {{ end }}
	{{ $content | safeHTML }}
  </div>
</div>

Now the rendering is exactly as expected, both markdown text and LaTeX math:

Can we optimize ?

Even though Hugo is very fast, I'd still like to know if we could optimize the range loop.
Because for example let's say one has 10 LaTeX occurrences (all those between $$, even if not inside math shortcode), then the replace function will parse the whole callout text from the beginning 10 times.

Is there a way to parse and replace all at once ?

[gcushen]

The overarching issue is that Hugo does not support LaTeX math. Hence, we have all these workarounds such as the math shortcode (you can also use without the math shortcode, but the equation will need to be escaped with slashes so it doesn't get parsed as Markdown).

Once the Hugo team merges one of the many PRs to add math support to Hugo, then math can be used in the standardized way without all these workarounds.

So the best course of action for now is to help the Hugo team to review and merge one of the PRs and then everyone can use math without any issues or having to use any workarounds.