One of several LaTeX equations is not rendered by KaTeX

support
1

Hello all,
Been playing with Hugo/papermod theme to display matrix equations and I hit a wall recently

image
image1454×877 79.6 KB

The second equation (the one I’m interested in) does not render for some reason that idk.
The code is available at GitHub - MLExplora/Hugo_site
Does anybody have an idea ?
Thanks for your help

2

There is a very long story behind this:
https://github.com/gohugoio/hugo/issues/10894

Problem

Your second example contains four pairs of matching underscores, two on each line. When the markdown renderer encounters these, it wraps the content between the underscores within an em element, which breaks the LaTeX. Technically the markdown renderer is doing what it should… text between underscores, under certain conditions, should be emphasized.

The problem is that the markdown renderer does not recognize LaTeX delimiters. There is work underway to optionally enable such recognition, passing the content between and including the delimiters through without processing it as markdown.

But, even if that feature were available today, your second example would still fail because you are rendering the LaTeX client-side using KaTeX v0.12.0 (released in 2020), which has a known bug related to backslashes. That KaTeX bug was resolved in v0.13.6.

Solution

Step 1

I noticed that you modified themes/papermod/layouts/partials/extend_head.html. If you ever update the theme you may inadvertently overwrite that file. So let’s move it to a layouts/partials directory in the root of your project:

mkdir -p layouts/partials
mv themes/papermod/layouts/partials/extend_head.html layouts/partials/

Step 2

Update to the latest KaTeX version using the example from katex.org:

layouts/partials/extend_head.html 
{{- /* Head custom content area start */ -}}
{{- /*     Insert any custom code (web-analytics, resources, etc.) - it will appear in the <head></head> section of every page. */ -}}
{{ if or .Params.math .Site.Params.math }}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js" integrity="sha384-XjKyOOlGwcjNTAIQHIpgOno0Hl1YQqzUOEleOLALmuqehneUG+vnGctmUb0ZY0l8" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        renderMathInElement(document.body, {
          // customised options
          // • auto-render specific keys, e.g.:
          delimiters: [
              {left: '$$', right: '$$', display: true},
              {left: '$', right: '$', display: false},
              {left: '\\(', right: '\\)', display: false},
              {left: '\\[', right: '\\]', display: true}
          ],
          // • rendering keys, e.g.:
          throwOnError : false
        });
    });
</script>

{{ end }}
{{- /*     Can be overwritten by partial with the same name in the global layouts. */ -}}
{{- /* Head custom content area end */ -}}

Step 3

Until the LaTeX passthrough feature is available in Hugo, you can wrap your equations with the theme’s rawhtml shortcode:

But this is not rendered properly !

{{< rawhtml >}}
Y = 
$\begin{bmatrix}
    \alpha_{1,1}\mathbf{x}_1 +...+ \alpha_{1,M}\mathbf{x}_M \\\
    \vdots  \\\
    \alpha_{N,1}\mathbf{x}_1 +...+ \alpha_{N,M}\mathbf{x}_M 
\end{bmatrix}$  
{{< /rawhtml >}}
3

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.