Is there a way to load output/svg and output/chtml in sametime?

[17x]

I need to use output/svg and output/chtml in my project.
But i tried in several way:

• load their src through script directly.
• load startup and write MathJax start config.
• npm installed MathJax-full to rebuild a custom version.

All these ways don't working for me.
It's always show me a 'MathJax.tex2chtml is not a function'.

[dpvc]

MathJax uses a MathDocument object to manage its typesetting, both in the page, and for string conversion as in tex2chtml(). The MathDocument can have multiple input formats, but only one output format, and the startup component creates only a single MathDocument, and creates the input-to-output functions based on that.

It is possible to have more than one MathDocument, however, and both can target the same browser document. So you can create your own MathDocument with a second output format. Here is an example that uses tex-chtml.js to provide tex2chtml(); it also loads output/svg and then creates tex2svg() and the other functions by hand. I think this should do what you need.

MathJax = {
  loader: {load: ['output/svg']},
  startup: {
    ready() {
      //
      //  Get the MathJax modules that we need.
      //
      const {mathjax} = MathJax._.mathjax;
      const {SVG} = MathJax._.output.svg_ts;
      //
      // Do the normal setup
      //
      MathJax.startup.defaultReady();
      //
      //  Create an SVG output jax and a new MathDocument that uses it.
      //
      const svgOutput = new SVG(MathJax.config.svg);
      const svgDocument = mathjax.document(document, {
        ...MathJax.config.options,
        InputJax: MathJax.startup.input,
        OutputJax: svgOutput
      });
      //
      //  Define the SVG-based conversion methods
      //
      MathJax.tex2svg = (math, options = {}) => {
        options.format = svgDocument.inputJax[0].name;
        return svgDocument.convert(math, options);
      };
      MathJax.tex2svgPromise = (math, options = {}) => {
        options.format = svgDocument.inputJax[0].name;
        return mathjax.handleRetriesFor(() => svgDocument.convert(math, options));
      };
      MathJax.svgStylesheet = () => svgOutput.styleSheet(svgDocument);
    }
  }
}

With this configuration, you will get both MathJax.tex2chtml() and MathJax.tex2svg(), and their promise-based alternatives.

[akhmerov]

This is very helpful, thanks! A quick follow-up question: how to make an analogous typesetPromise that would take DOM nodes as input? I realize this is somewhat basic, but unfortunately I couldn't figure it out.

[akhmerov]

Got it! Nothing like a source dive!

I added at the end of the ready() function the following:

        MathJax.typesetSVGPromise = (elements) => {
            svgDocument.options.elements = elements;
            svgDocument.reset();
            return mathjax.handleRetriesFor(() => {
                svgDocument.render();
            });
        };

[dpvc]

@akhmerov, thank for the example code. One thing to keep in mind if you are using both MathJax.startup.document and svgDocument is that they keep separate lists of math items and separate menus, and so on, so there is some potential for confusion, there. E.g., menu changes make to an expression typeset in SVG will not be reflected in the menu for those typeset in HTML, and if you turn on the expression explorer for SVG output, for example, it will not be on for HTML output.

Also, there are element ID values that may clash, since the two MathDocument instances will not know about the element created by each other. So there are potential problems with trying to use both documents at once.

[akhmerov]

The use case here was integrating with Plotly, which grabs the SVG immediately after it's rendered, and deletes the DOM node. Therefore the limitations you mention don't have an adverse effect in practice.

[dpvc]

OK, but then I would have thought that MathJax.tex2svgPromise() would have been what you wanted, since you are not leaving the SVG in the document. But I'm happy you have it working as you would like.

[akhmerov]

tex2svgPromise didn't fulfill my needs because I was merely interfacing plotly, which already does the unnecessary DOM manipulation. Still, since they are updating the MathJax wrapper right now, this is very timely feedback.