Use goldmark-mathjax extension

I’d like to use the goldmark-mathjax extension on my site, but I’m not sure where to start on installing it — I presumably have to install the extension and somehow tell hugo how to find it, but I have no idea where to start. Could anyone give me a hint?

Thanks!
Hadley

2 Likes

See https://github.com/gohugoio/hugo/issues/6694#issuecomment-579926253.

The goldmark-mathjax only wraps the math in html tags. With mathjax@3 these tags aren’t necessary. You would still have to load MathJax javascript and render in the browser.

That comment does not jive with my experience. When I insert a display math, e.g.

$$
\begin{vmatrix}a & b\\
c & d
\end{vmatrix}
$$

It no longer displays correctly (once processed by MathJax) because the markdown -> html translation has inserted additional tags.

i.e. awwong’s claim is incorrect: as well as wrapping the result in html tags (unimportant) it also ensures that the contents of the display math block are not treated as markdown (very important). More precisely, plain goldmark transforms the above into:

$$
\begin{vmatrix}a &amp; b\<br>
c &amp; d
\end{vmatrix}
$$

The main problem is that \\ has turned into \, so there is no longer a second line in the matrix.

I understand. Thank you for the clarification. This approach works for me…

1) Markdown

{{< mathjax >}}
$$
\begin{vmatrix}a & b\\
c & d
\end{vmatrix}
$$
{{< /mathjax >}}

2) layouts/shortcodes/mathjax.html:

{{ .Inner }}

3) Inserted into <head> of page:

<script>
  MathJax = {
    tex: {
      inlineMath: [['$', '$'], ['\\(', '\\)']]
    },
    svg: {
      fontCache: 'global'
    }
  };
</script>
<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js">

4) Result

image

3 Likes

Yes, I’m aware of workarounds, but I’d like to be able to use goldmark-mathjax in order to avoid them, thus my question about how to install it.

1 Like

A shortcode is certainly not a workaround.

To use the goldmark-mathjax extension you would need to fork Hugo, modify its source and compile the binary on your own.

This is no easy task.

However if you still prefer to follow this route, there has been at least one rejected Pull Request -with that particular extension- at the main Hugo repo, that you can use as a blueprint .

@alexandros thanks, that is the information I was looking for — there’s no easy way to use a goldmark extension from hugo.

I’ve asked @bep over on GitHub if he might consider re-opening the issue there for discussion, FYI @hadley:

Thanks for carrying this one forward @jph00. Your hugo fork looks like a step forward in that it is good to have a proof-of-concept. In practice I imagine it is going to be tough to get non-standard hugo builds on all the machines used for our group blog; How have you found that process?

We’re only just starting on this, so I don’t have any experience to report. Our plan, if Hugo doesn’t add the extension directly, is to auto-download the patched version automatically as part of the nbdev make process. We’re currently using GitHub Actions to automatically build (and upx-compress, and release) the patched version every day.

Will that approach have the issues with _? Or any other issues of MarkDown parsing of LaTeX code?

Update

It does. It seems setting a short code with {{ .Inner }} is basically a way to escape MarkDown parsing. right?
Is the a way to use short code to define the MathJaX span as uses by the GoldMark MathJaX extension?

I don’t like the .Inner construction and use it on this way

+++
tags        = [ "MathJax"]
title       = "MathJax"
+++

{{<tex>}}

## Maxwell's formulas

|Name|Formel|
|----|:----:|
|Gaußsches Gesetz|${\vec {\nabla }}\cdot {\vec {E}}={\frac {\rho }{\varepsilon _{0}}}$|
|Gaußsches Gesetz für Magnetfelder|${\vec {\nabla }}\cdot {\vec {B}}=0$|
|Faraday's Induktionsgesetz|${\vec {\nabla }}\times {\vec {E}}=-{\frac {\partial {\vec {B}}}{\partial t}}$|
|Ampère's Durchflutungsgesetz|${\vec {\nabla }}\times {\vec {B}}=\mu _{0}{\vec {j}}+\mu 

_{0}\varepsilon _{0}{\frac {\partial {\vec {E}}}{\partial t}}$|

with  $\mu _{0}\varepsilon _{0}={\frac {1}{c^{2}}}$ .

works for me.

The shortcode activates MathJax, thats all.
complete sample at https://github.com/gj52/HugoSample

2 Likes

This thread is mentioning this case which is using the ampersand sign &. Your suggestion cannot process it well, I think.

with my solution I can get the result

$ \begin{vmatrix}a & b \\\\ c & d \end{vmatrix}$

The inline is ok but the multiline failed.

vim content/post/2020-04-02_mathjax/index.md
$ \begin{vmatrix}a & b \\\\ c & d \end{vmatrix}$

$$
\begin{vmatrix}a & b\\
c & d
\end{vmatrix}
$$

Screen Shot 2020-12-12 at 19.51.16

I found a new workaround. It works well for me as the same as when I use the math shortcode which includes {{ .Inner }}.

But, this will break other elements, is not practical. We need the goldmark-mathjax extension to solve this problem.

Template:

{{ $content := $.Content | replaceRE "\\<br>" "\\" }}
{{ $content | safeHTML }}

Markdown:

{{< math >}}
\begin{vmatrix}a & b\\
c & d
\end{vmatrix}
{{< /math >}}

$$
\begin{vmatrix}a & b\\
c & d
\end{vmatrix}
$$

Screen Shot 2020-12-12 at 20.32.04

1 Like

Do NOT end a line with \
one space after should do the trick

That is a syntax of TeX, not Markdown, so we need the goldmark-mathjax extension.

1 Like

nope, this is embedded in markdown

@ju52 Did you read the first of this thread?

OK, I will describe the problem here again. The problem of this thread is a conflict between the Markdown spec and the MathJax spec.

When we write the next TeX document in a Markdown file.

$$
\begin{vmatrix}a & b\\
c & d
\end{vmatrix}
$$

Hugo processes the input with the goldmark (CommonMark) and we will get the following HTML output.

<p>$$
\begin{vmatrix}a &amp; b \<br>
c &amp; d
\end{vmatrix}
$$</p>

Since MathJax cannot process the <br> tag, the math rendering is broken.