Search code examples
javascripthtmlnode.jsmathjax

Cannot achieve the same result with mathjax-node as with MathJax on the browser

I want to render some formulas with mathjax-node, but also the user should be able to individually select each of the elements underlining them with the cursor. For example, if a summation appears, he could select the extreme values, the elements of the internal formula, the iteration variable, and so on. It is possible when the elements are rendered as <span> objects, and it can be done for example with MathJax 2.7.7 directly from a URL.

When using MathJax on the browser, I had a page with this configuration:

<!DOCTYPE html>
<html>
    <head>
        ...
        <script type="text/x-mathjax-config">
            MathJax.Hub.Config({
                extensions: ["tex2jax.js","[Contrib]/forminput/forminput.js"],
                jax: ["input/TeX","output/HTML-CSS"],
                tex2jax: {
                    inlineMath: [ ['$','$'], ["\\(","\\)"] ],
                    displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
                    processEscapes: true,
                    processEnvironments: true,
                },
                TeX: {extensions: ["AMSmath.js","AMSsymbols.js"]},
                displayAlign: 'center',

                "HTML-CSS": {
                    styles: {'.MathJax_Display': {"margin": 0}},
                    linebreaks: { automatic: true }
                }
            });
        </script>
        <script 
            type="text/javascript"
            src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/latest.js?config=TeX-MML-AM_CHTML"
        />

In that case, if I have this formula $\sum_{i=0}^ni>2$, the result is:

enter image description here

But now I am using mathjax-node downloaded from https://github.com/mathjax/MathJax-node/tarball/master. According to the documentation https://www.npmjs.com/package/mathjax-node I have to put:

var mjAPI = require("mathjax-node");
mjAPI.config({
    MathJax: {
        // traditional MathJax configuration
    }
});
mjAPI.start();

(In the configuration part, it no longer recognizes the line: "extensions: ["tex2jax.js","[Contrib]/forminput/forminput.js"]").

The object with the result is obtained with the typeset function:

var yourMath = '\sum_{i=0}^ni>2';

let result = mjAPI.typeset({
    math: yourMath,
    format: "TeX", // or "inline-TeX", "MathML"
    mml:true,      // or svg:true, or html:true
},

And then the part that should be renderized is called with "result.mml", "result.svg" or "result.html".

I have only managed to render as <span> objects with the "html:true" option. But it does not look the same as when I was using MathJax from the web. For example, if put "format:'inline-TeX'", I get:

enter image description here

Something similar was asked here: mathjax-node: different output when formatted on webpage than in node project, and the solution was to add the "css:true" option to the typeset, but I have tried it and it still looks the same. I guess I should still call it as "result.html".

Solution

  • I am answering my own question. If "result" is the returned object, I didn't understand how the "result.css" property should be used. The only thing to do was to include it inside the configuration of the style of the displayed web page. For example, the web page could be:

    <html>
    <head>
        <style>
            result.css
        </style>
    </head>
    <body>
        result.html
    </body>
</html>