Support MathJax 3.0

[lgeiger]

MathJax 3.0 was released last month with many improvements.

When I load it from https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js to render math, the inline math is ignored. It would be great if pymdown-extensions would support MathJax 3.0 since it is quite a bit faster in rendering the Math.

[facelessuser]

Thanks for the heads up. I'll have to figure out what is different ☹️. As soon as I do, I'll see if I can easily abstract the usage of MathJax 3, or add an option to enable it in the short term (or maybe a legacy switch for the old way).

[facelessuser]

@lgeiger So, there appears to be nothing I need to do to support MathJax 3.0. It is all on you, the user's, side.

So looking through the docs there are a couple of things to note:

1. Not everything is implemented yet, but maybe that doesn't directly affect you.
2. The configuration is very different, partly because not everything is implemented yet, but also because...different.
3. MathJax 2 allowed a format for embedding math in script tags like so <script type="math/tex; mode=display></script> etc. this was Arithmatex's default...well this doesn't get parsed anymore by default...because different.

I'm not sure why some of the things they were using before got abandoned, but luckily they posted some info on how to work around things. So, to the docs!

1. Handy config converter: https://mathjax.github.io/MathJax-demos-web/convert-configuration/convert-configuration.html

2. This part of the docs covers how to get script math/tex to get recognized: http://docs.mathjax.org/en/v3.0-latest/upgrading/v2.html#changes-in-the-mathjax-api

This got things working again for me:

<script>
window.MathJax = {
  tex: {
    tagSide: "right",
    tagIndent: ".8em",
    multlineWidth: "85%",
    tags: "ams"
  },
  options: {
    ignoreHtmlClass: 'tex2jax_ignore',
    processHtmlClass: 'tex2jax_process',
    renderActions: {
      find: [10, function (doc) {
        for (const node of document.querySelectorAll('script[type^="math/tex"]')) {
          const display = !!node.type.match(/; *mode=display/);
          const math = new doc.options.MathItem(node.textContent, doc.inputJax[0], display);
          const text = document.createTextNode('');
          node.parentNode.replaceChild(text, node);
          math.start = {node: text, delim: '', n: 0};
          math.end = {node: text, delim: '', n: 0};
          doc.math.push(math);
        }
      }, '']
    }
  }
};
</script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script>

[facelessuser]

So, yeah, docs maybe could mention this. I imagine there will be slow trickle of people coming over to 3.0. It is not complete yet, but there are some benefits potentially. People will have to suffer through figuring how to get it configured like they like it as there is quite a difference in setup.

[facelessuser]

Sorry, the earlier config was my personal settings converted. I believe this is the bare minimum required:

<script>
window.MathJax = {
  options: {
    ignoreHtmlClass: 'tex2jax_ignore',
    processHtmlClass: 'tex2jax_process',
    renderActions: {
      find: [10, function (doc) {
        for (const node of document.querySelectorAll('script[type^="math/tex"]')) {
          const display = !!node.type.match(/; *mode=display/);
          const math = new doc.options.MathItem(node.textContent, doc.inputJax[0], display);
          const text = document.createTextNode('');
          node.parentNode.replaceChild(text, node);
          math.start = {node: text, delim: '', n: 0};
          math.end = {node: text, delim: '', n: 0};
          doc.math.push(math);
        }
      }, '']
    }
  }
};
</script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script>

[facelessuser]

Okay, last update. Apparently the previews that are present (plain text versions) also don't get removed if they are enabled, so in that case, this would work:

<script>
window.MathJax = {
  options: {
    ignoreHtmlClass: 'tex2jax_ignore',
    processHtmlClass: 'tex2jax_process',
    renderActions: {
      find: [10, function (doc) {
        for (const node of document.querySelectorAll('script[type^="math/tex"]')) {
          const display = !!node.type.match(/; *mode=display/);
          const math = new doc.options.MathItem(node.textContent, doc.inputJax[0], display);
          const text = document.createTextNode('');
          const sibling = node.previousElementSibling;
          node.parentNode.replaceChild(text, node);
          math.start = {node: text, delim: '', n: 0};
          math.end = {node: text, delim: '', n: 0};
          doc.math.push(math);
          if (sibling && sibling.matches('.MathJax_Preview')) {
            sibling.parentNode.removeChild(sibling);
          }
        }
      }, '']
    }
  }
};
</script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script>

[facelessuser]

Feel free to check out the linked pull for more examples.

[lgeiger]

Thanks for the documentation. Indeed the problem was on the user side. MathJax 2 accepted \( ... \) for inline math were as MathJax 3 now strickly requires \\( ... \\).

Thanks for your help!

[facelessuser]

I'm not sure what you are specifically referring to here. Are you using the generic form of Arithmatex output (that doesn't wrap content in script tags)?

Normally, you can just use \(...\), and Arithmatex will ensure it gets through to the HTML source. That should work. If you are in Markdown and doing \\(...\\) I imagine Arithmatex is skipping it. Markdown will convert \\ to \. Then maybe MathJax is just parsing the plain text? Then you are bypassing Arithmatex which ensures that Markdown won't accidentally interpret your Math as Markdown source and convert.

Maybe you are just getting lucky? In my tests, you need to include the JavaScript I showed above for And specify the math normally. No extra escaping.

[facelessuser]

Yeah, I just tested again. No extra escaping is needed. Arithmatex takes care of everything IF you have your JavaScript config configured correctly.