Katex and Mermaid examples in live demo don't work because of /**/ comments

[hugomg]

I had some trouble getting Katex and Mermaid to work. I could not get the examples from the live demo site to work. Both of them told to add /**/ in the shortcode definition.

https://hugo-book-demo.netlify.app/docs/shortcodes/katex/ https://hugo-book-demo.netlify.app/docs/shortcodes/mermaid/

{{</* katex [display] [class="text-center"] */>}}
f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
{{</* /katex */>}}

However, when I looked at the source for the files I noticed that the text inside the Latex code block is different from the actual katex invocation. The real katex only says {{< katex display >}}, without the /**/ and the text-center. This one did work for me.

{{< katex display >}}
f(x) = \int_{-\infty}^\infty\hat f(\xi),e^{2 \pi i \xi x},d\xi
{{< /katex >}}

What's going on with the `//`? Should those be removed from the documentation examples?**

---

ps.: Here is a screenshot of what I see in the live demo website:

[alex-shpak]

Hi! It is kinda intentional, left side is a code block, and right side is the result, but I agree it doesn't look good. So left side is wrapped in comment block in order to not get rendered by katex.

So below is how you use it

{{< katex display >}}
f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
{{< /katex >}}

[alex-shpak]

Related issue, https://github.com/gohugoio/hugo/issues/10058

[hugomg]

If this is the only possible workaround to have it render as a code block, perhaps we should add some text next to it, instructing to remove the /**/ ?

[alex-shpak]

I fixed examples pages with some raw html trickery, see https://github.com/alex-shpak/hugo-book/commit/a111041867b14fcb0490d3495186b5205e7e2364 https://hugo-book-demo.netlify.app/docs/shortcodes/katex/

[hugomg]

Awesome!