MathJax node does not work with HTML

[nhpf]

After trying to use MathJax-node for server-side rendering dynamic HTML strings containing TeX code, it seems that it fails to output proper CHTML.

Below, a minimal reproduction of the issue:

  function processHTML(inputTex) {

    const MJ = await require('mathjax').init({
      tex: {
        inlineMath: [['$', '$']],
        displayMath: [['$$', '$$']]
      },
      loader: {
        load: ['adaptors/liteDOM', 'input/tex', 'output/chtml']
      },
    })

    const rendered = MJ.tex2chtml(inputTex, { em: 12, ex: 6, display: false })
    return MJ.startup.adaptor.outerHTML(rendered)
  }

processHTML('<p>$\\frac{1}{x^2-\pi}$ this is a test</p><br>')

The resulting web page with the output above looks like:

While the expected output would be:

I'm using "mathjax": "^3.2.2" (taken from package.json).

[pkra]

For v3, you'll need to look at the examples in https://github.com/mathjax/MathJax-demos-node/

[nhpf]

For v3, you'll need to look at the examples in https://github.com/mathjax/MathJax-demos-node/

The only relevant difference I found between the script above and the related example was the use of mathjax-full instead of the MathJax module obtained with npm i mathjax@3.

In the readme.md linked above, it indeed states that:

Note: this technique is for node-based application only, not for browser applications. This method sets up an alternative DOM implementation, which you don't need in the browser, and tells MathJax to use node's require() command to load external modules. This setup will not work properly in the browser, even if you webpack it or bundle it in other ways.

Does that mean we should use npm i mathjax-node for it to work on browsers, or are both implementations of mathjax-node the same, meaning neither are supposed to work on browsers?

[dpvc]

The MathJax.tex2chtml() function takes a TeX string as its first argument, not a serialized HTML string, so it is processing the HTML tags and other text as mathematics, not HTML. That is why your output includes italics, the dollar signs, and the tag names. See the documentation for more details.

Does that mean we should use npm i mathjax-node for it to work on browsers, or are both implementations of mathjax-node the same, meaning neither are supposed to work on browsers?

The section of the readme you site refers to the use of require('mathjax').init({...}), not to MathJax v3 in general. This technique is a quick way to get MathJax running in node, but it is set up to handle loading of extensions and other MathJax files using node's require() function, and to use the LiteDOM internally, while in-browser use requires a different method for loading extensions, and should use the browser DOM rather than the LiteDOM.

MathJax can be included into node programs in several different ways, and these are illustrated in the different directories in the MathJax-demos-node repository (e.g., component and direct), and these can be used to pre-process math on the server.

This repository for mathjax-node is a v2-only hack that makes it possible to run MathJax v2 in a node application. MathJax v3 was designed to be able to be used directly in node (with the proper configuration), so there is no need for mathjax-node if you are using v3.

[nhpf]

Thank you very much, @dpvc! That was very informative. I will use this example and try to adapt it for an HTML string instead of a file.