mathjax / mathjax-demos-node

A repository with examples using mathjax-v3 in NodeJS

MathJax

Beautiful math in all browsers

MathJax is an open-source JavaScript display engine for LaTeX, MathML, and AsciiMath notation that works in all modern browsers. It was designed with the goal of consolidating the recent advances in web technologies into a single, definitive, math-on-the-web platform supporting the major browsers and operating systems. It requires no setup on the part of the user (no plugins to download or software to install), so the page author can write web documents that include mathematics and be confident that users will be able to view it naturally and easily. Simply include MathJax and some mathematics in a web page, and MathJax does the rest.

Some of the main features of MathJax include:

• High-quality display of LaTeX, MathML, and AsciiMath notation in HTML pages

• Supported in most browsers with no plug-ins, extra fonts, or special setup for the reader

• Easy for authors, flexible for publishers, extensible for developers

• Supports math accessibility, cut-and-paste interoperability, and other advanced functionality

• Powerful API for integration with other web applications

See http://www.mathjax.org/ for additional details about MathJax, and https://docs.mathjax.org for the MathJax documentation.

MathJax Components

MathJax version 3 uses files called components that contain the various MathJax modules that you can include in your web pages or access on a server through NodeJS. Some components combine all the pieces you need to run MathJax with one or more input formats and a particular output format, while other components are pieces that can be loaded on demand when needed, or by a configuration that specifies the pieces you want to combine in a custom way. For usage instructions, see the MathJax documentation.

Components provide a convenient packaging of MathJax's modules, but it is possible for you to form your own custom components, or to use MathJax's modules directly in a node application on a server. There are web examples showing how to use MathJax in web pages and how to build your own components, and node examples illustrating how to use components in node applications or call MathJax modules directly.

What's in this Repository

This repository contains only the component files for MathJax, not the source code for MathJax (which are available in a separate MathJax source repository). These component files are the ones served by the CDNs that offer MathJax to the web. In version 2, the files used on the web were also the source files for MathJax, but in version 3, the source files are no longer on the CDN, as they are not what are run in the browser.

The components are stored in the es5 directory, and are in ES5 format for the widest possible compatibility. In the future, we may make an es6 directory containing ES6 versions of the components.

Installation and Use

Using MathJax components from a CDN on the web

If you are loading MathJax from a CDN into a web page, there is no need to install anything. Simply use a script tag that loads MathJax from the CDN. E.g.,

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

See the MathJax documentation, the MathJax Web Demos, and the MathJax Component Repository for more information.

Hosting your own copy of the MathJax Components

If you want to host MathJax from your own server, you can do so by installing the mathjax package using npm and moving the es5 directory to an appropriate location on your server:

npm install mathjax@3
mv node_modules/mathjax/es5 <path-to-server-location>/mathjax

Note that we are still making updates to version 2, so include @3 when you install, since the latest chronological version may not be version 3.

Alternatively, you can get the files via GitHub:

git clone https://github.com/mathjax/MathJax.git mj-tmp
mv mj-tmp/es5 <path-to-server-location>/mathjax
rm -rf mj-tmp

Then (in either case) you can use a script tag like the following:

<script id="MathJax-script" async src="<url-to-your-site>/mathjax/tex-chtml.js"></script>

where <url-to-your-site> is replaced by the URL to the location where you moved the MathJax files above.

See the documentation for details.

Using MathJax components in a node application

To use MathJax components in a node application, install the mathjax package:

npm install mathjax@3

(we are still making updates to version 2, so you should include @3 since the latest chronological version may not be version 3).

Then require mathjax within your application:

require('mathjax').init({ ... }).then((MathJax) => { ... });

where the first { ... } is a MathJax configuration, and the second { ... } is the code to run after MathJax has been loaded. E.g.

require('mathjax').init({
  loader: {load: ['input/tex', 'output/svg']}
}).then((MathJax) => {
  const svg = MathJax.tex2svg('\\frac{1}{x^2-1}', {display: true});
  console.log(MathJax.startup.adaptor.outerHTML(svg));
}).catch((err) => console.log(err.message));

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.

See the documentation and the MathJax Node Repository for more details.

Reducing the Size of the Components Directory

Since the es5 directory contains all the component files, so if you are only planning one use one configuration, you can reduce the size of the MathJax directory by removing unused components. For example, if you are using the tex-chtml.js component, then you can remove the tex-mml-chtml.js, tex-svg.js, tex-mml-svg.js, tex-chtml-full.js, and tex-svg-full.js configurations, which will save considerable space. Indeed, you should be able to remove everything other than tex-chtml.js, and the input/tex/extensions, output/chtml/fonts/woff-v2, adaptors, a11y, and sre directories. If you are using the results only on the web, you can remove adaptors as well.

If you are not using A11Y support (e.g., speech generation, or semantic enrichment), then you can remove a11y and sre as well (though in this case you may need to disable the assistive tools in the MathJax contextual menu in order to avoid MathJax trying to load them when they aren't there).

If you are using SVG rather than CommonHTML output (e.g., tex-svg.js rather than tex-chtml.js), you can remove the output/chtml/fonts/woff-v2 directory. If you are using MathML input rather than TeX (e.g., mml-chtml.js rather than tex-chtml.js), then you can remove input/tex/extensions as well.

The Component Files and Pull Requests

The es5 directory is generated automatically from the contents of the MathJax source repository. You can rebuild the components using the command

npm run make-es5 --silent

Note that since the contents of this repository are generated automatically, you should not submit pull requests that modify the contents of the es5 directory. If you wish to submit a modification to MathJax, you should make a pull request in the MathJax source repository.

MathJax Community

The main MathJax website is http://www.mathjax.org, and it includes announcements and other important information. A MathJax user forum for asking questions and getting assistance is hosted at Google, and the MathJax bug tracker is hosted at GitHub.

Before reporting a bug, please check that it has not already been reported. Also, please use the bug tracker (rather than the help forum) for reporting bugs, and use the user's forum (rather than the bug tracker) for questions about how to use MathJax.

MathJax Resources

• MathJax Documentation
• MathJax Components
• MathJax Source Code
• MathJax Web Examples
• MathJax Node Examples
• MathJax Bug Tracker
• MathJax Users' Group

mathjax-demos-node's Issues

SVG rendering issue in Chrome

On Chrome Version 84.0.4147.125 (Official Build) (64-bit) on Windows 10 and Mac OS X 10.15.6, I'm seeing an issue with the svg output from the tex2svg demo here. The issue with the plus sign can occur in different positions in the equation.

I also just note that this output does not contain a title element, which I noted that the output of mathjax-node does include.

Output generated by:
node -r esm tex2svg 37+20+8

Does the generated svg also require generated css? I've pasted the svg below:
<svg style="vertical-align: -0.186ex" xmlns="http://www.w3.org/2000/svg" width="11.188ex" height="1.715ex" role="img" focusable="false" viewBox="0 -676 4944.9 758" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="MJX-1-TEX-N-33" d="M127 463Q100 463 85 480T69 524Q69 579 117 622T233 665Q268 665 277 664Q351 652 390 611T430 522Q430 470 396 421T302 350L299 348Q299 347 308 345T337 336T375 315Q457 262 457 175Q457 96 395 37T238 -22Q158 -22 100 21T42 130Q42 158 60 175T105 193Q133 193 151 175T169 130Q169 119 166 110T159 94T148 82T136 74T126 70T118 67L114 66Q165 21 238 21Q293 21 321 74Q338 107 338 175V195Q338 290 274 322Q259 328 213 329L171 330L168 332Q166 335 166 348Q166 366 174 366Q202 366 232 371Q266 376 294 413T322 525V533Q322 590 287 612Q265 626 240 626Q208 626 181 615T143 592T132 580H135Q138 579 143 578T153 573T165 566T175 555T183 540T186 520Q186 498 172 481T127 463Z"></path><path id="MJX-1-TEX-N-37" d="M55 458Q56 460 72 567L88 674Q88 676 108 676H128V672Q128 662 143 655T195 646T364 644H485V605L417 512Q408 500 387 472T360 435T339 403T319 367T305 330T292 284T284 230T278 162T275 80Q275 66 275 52T274 28V19Q270 2 255 -10T221 -22Q210 -22 200 -19T179 0T168 40Q168 198 265 368Q285 400 349 489L395 552H302Q128 552 119 546Q113 543 108 522T98 479L95 458V455H55V458Z"></path><path id="MJX-1-TEX-N-2B" d="M56 237T56 250T70 270H369V420L370 570Q380 583 389 583Q402 583 409 568V270H707Q722 262 722 250T707 230H409V-68Q401 -82 391 -82H389H387Q375 -82 369 -68V230H70Q56 237 56 250Z"></path><path id="MJX-1-TEX-N-32" d="M109 429Q82 429 66 447T50 491Q50 562 103 614T235 666Q326 666 387 610T449 465Q449 422 429 383T381 315T301 241Q265 210 201 149L142 93L218 92Q375 92 385 97Q392 99 409 186V189H449V186Q448 183 436 95T421 3V0H50V19V31Q50 38 56 46T86 81Q115 113 136 137Q145 147 170 174T204 211T233 244T261 278T284 308T305 340T320 369T333 401T340 431T343 464Q343 527 309 573T212 619Q179 619 154 602T119 569T109 550Q109 549 114 549Q132 549 151 535T170 489Q170 464 154 447T109 429Z"></path><path id="MJX-1-TEX-N-30" d="M96 585Q152 666 249 666Q297 666 345 640T423 548Q460 465 460 320Q460 165 417 83Q397 41 362 16T301 -15T250 -22Q224 -22 198 -16T137 16T82 83Q39 165 39 320Q39 494 96 585ZM321 597Q291 629 250 629Q208 629 178 597Q153 571 145 525T137 333Q137 175 145 125T181 46Q209 16 250 16Q290 16 318 46Q347 76 354 130T362 333Q362 478 354 524T321 597Z"></path><path id="MJX-1-TEX-N-38" d="M70 417T70 494T124 618T248 666Q319 666 374 624T429 515Q429 485 418 459T392 417T361 389T335 371T324 363L338 354Q352 344 366 334T382 323Q457 264 457 174Q457 95 399 37T249 -22Q159 -22 101 29T43 155Q43 263 172 335L154 348Q133 361 127 368Q70 417 70 494ZM286 386L292 390Q298 394 301 396T311 403T323 413T334 425T345 438T355 454T364 471T369 491T371 513Q371 556 342 586T275 624Q268 625 242 625Q201 625 165 599T128 534Q128 511 141 492T167 463T217 431Q224 426 228 424L286 386ZM250 21Q308 21 350 55T392 137Q392 154 387 169T375 194T353 216T330 234T301 253T274 270Q260 279 244 289T218 306L210 311Q204 311 181 294T133 239T107 157Q107 98 150 60T250 21Z"></path></defs><g stroke="currentColor" fill="currentColor" stroke-width="0" transform="matrix(1 0 0 -1 0 0)"><g data-mml-node="math"><g data-mml-node="mn"><use xlink:href="#MJX-1-TEX-N-33"></use><use xlink:href="#MJX-1-TEX-N-37" transform="translate(500, 0)"></use></g><g data-mml-node="mo" transform="translate(1222.2, 0)"><use xlink:href="#MJX-1-TEX-N-2B"></use></g><g data-mml-node="mn" transform="translate(2222.4, 0)"><use xlink:href="#MJX-1-TEX-N-32"></use><use xlink:href="#MJX-1-TEX-N-30" transform="translate(500, 0)"></use></g><g data-mml-node="mo" transform="translate(3444.7, 0)"><use xlink:href="#MJX-1-TEX-N-2B"></use></g><g data-mml-node="mn" transform="translate(4444.9, 0)"><use xlink:href="#MJX-1-TEX-N-38"></use></g></g></g></svg>

Include an example with XyJaX

I'm having a lot of difficulty getting XyJax-v3 running on node. Here's my stab at the problem:

import { readFileSync, writeFileSync } from 'fs';
import glob from 'glob';

import { mathjax } from 'mathjax-full/js/mathjax.js';
import { TeX } from 'mathjax-full/js/input/tex.js';
import { CHTML } from 'mathjax-full/js/output/chtml.js';
import { liteAdaptor } from 'mathjax-full/js/adaptors/liteAdaptor.js';
import { RegisterHTMLHandler } from 'mathjax-full/js/handlers/html.js';
import { AllPackages } from 'mathjax-full/js/input/tex/AllPackages.js';
import { Loader } from 'mathjax-full/js/components/loader.js';
import 'mathjax-full/js/util/entities/all';

MathJax = {
    config: {
        loader: {
            paths: { custom: '.' },
            require: require,
            load: { '[+]': ['[custom]/xypic.min.js'] },
            failed: err => console.log(err)
        }
    },
    loader: Loader
};

MathJax.loader.ready('xypic').then(() => {
    glob('**/*.html', { "ignore": ['node_modules/**/*.html'] }, (_, res) =>
        res.forEach(r => {
            const htmlfile = readFileSync(r, 'utf8');

            // Register the HTML handler
            const adaptor = liteAdaptor();
            RegisterHTMLHandler(adaptor);

            // Create a MathJax document
            const tex = new TeX({ packages: AllPackages.concat('xypic'), inlineMath: [['$', '$']] });
            const chtml = new CHTML();
            const html = mathjax.document(htmlfile, { InputJax: tex, OutputJax: chtml });

            // Typeset the document
            html.render();

            //  Remove the stylesheet
            adaptor.remove(html.outputJax.chtmlStyles);

            //  Output the resulting HTML
            writeFileSync(r, adaptor.doctype(html.document) + adaptor.outerHTML(adaptor.root(html.document)));
        }));
}, err => console.log(err));

It does nothing. Am I using the loader incorrectly here?

How to get the input TeX character ranges corresponding to SVG nodes?

Hi, I'm rendering tex2svg like so (TypeScript, Electron, React)

import {mathjax} from 'mathjax-full/js/mathjax';
import {TeX} from 'mathjax-full/js/input/tex';
import {CHTML} from 'mathjax-full/js/output/chtml';
import {SVG} from 'mathjax-full/js/output/svg';
import {liteAdaptor} from 'mathjax-full/js/adaptors/liteAdaptor';
import {RegisterHTMLHandler} from 'mathjax-full/js/handlers/html';

componentDidMount() {
  const tex = new TeX({});
  const adaptor = liteAdaptor();
  RegisterHTMLHandler(adaptor);
  const svg = new SVG({});
  const html = mathjax.document('', {InputJax: tex, OutputJax: svg});
  const node = html.convert(this.props.tex, {});
  this.ref!.current!.innerHTML = adaptor.outerHTML(node);
}

I would like to find the corresponding character ranges in the input TeX for each SVG node that's rendered. I believe I should be using getMetrics() for this, but I'm not sure how. I tried console.log(html.getMetrics().math.toArray()); but it logs an empty array.

Side question: Is this the best way to render TeX in a React component? Which of the variables that I created can be used across multiple instances of the component?

Using Angular Package Format to Create Modules for MathJax

I noticed that most of the MathJax source is written in Typescript.

I wonder if you think it might be helpful to have the project built using the Angular Package Format?

The nice thing about the Angular Package Format is that it compiles the code into most of the popular package formats:

• FESM2015
• FESM5
• UMD
• Typescript Package Metadata

It also automatically creates package.json settings that make it easy to install and use the modules in most (If not all) environments, which I think should make it easier to consume MathJax in general.

This is one of my projects:
https://github.com/fireflysemantics/slice

Because it's compiled with the Angular Package Format its very easy for consumers to just add the dependency to Stackblitz and experiment with the API.

Here's an example:
https://stackblitz.com/edit/slice-todo-fs

I would love to help out with this if there is interest. This is a basic overview of the creation process.

cannot convert \begin{array} .....\end{array} to svg

tex:\begin{array}{|c|c|c|} \hline 1&2 \ &3 \ \ \hline {\mathrm{4}} \ 11&\times &\times \ \hline 22 &\surd&\times \ \hline 33 &\surd&\surd \ \hline 44 &\times &\surd \ \hline \end{array}

node code :

require('mathjax').init({
  loader: {
    require: require,
    paths: {mathjax: 'mathjax/es5'},
    load: ['input/tex', 'output/svg']
  }
}).then((MathJax) => {
  const svg = MathJax.tex2svg('\begin{array}{|c|c|c|} \hline 1&2 \ &3 \  \\ \hline {\mathrm{4}} \ 11&\times &\times \\ \hline 22 &\surd&\times \\ \hline 33 &\surd&\surd \\ \hline 44 &\times &\surd \\ \hline \end{array}', {display: true});
  console.log(MathJax.startup.adaptor.outerHTML(svg));
}).catch((err) => console.log(err.message));

How to add context menu in Non-Component-Based Examples?

I'm working on a front-end project with typescript and webpack, codes below worked fine:

  const { mathjax } = await import(/* webpackChunkName: "mathjax" */ 'mathjax-full/js/mathjax')
  const { TeX } = await import(/* webpackChunkName: "mjx.tex" */ 'mathjax-full/js/input/tex')
  const { SVG } = await import(/* webpackChunkName: "mjx.svg" */ 'mathjax-full/js/output/svg')
  const { browserAdaptor } = await import(/* webpackChunkName: "mjx.browserAdaptor" */ 'mathjax-full/js/adaptors/browserAdaptor')
  const { RegisterHTMLHandler } = await import(/* webpackChunkName: "mjx.html" */ 'mathjax-full/js/handlers/html')
  const { AllPackages } = await import(/* webpackChunkName: "mjx.AllPackages" */ 'mathjax-full/js/input/tex/AllPackages')
  const adapter = browserAdaptor()

  RegisterHTMLHandler(adapter)

  html = mathjax.document(document, {
    InputJax: new TeX({
      packages: AllPackages,
      inlineMath: [              // start/end delimiter pairs for in-line math
        ['$', '$']
      ],
      displayMath: [             // start/end delimiter pairs for display math
        ['$$', '$$'],
        ['\\[', '\\]']
      ],
    }),
    OutputJax: new SVG({
      fontCache: 'none'
    })
  })

Then I tried to add context menu on right-click, but I did not find documents about it, after reading some source code, I added

const { MenuHandler } = await import(/* webpackChunkName: "mjx.menu" */ 'mathjax-full/js/ui/menu/MenuHandler')

MenuHandler(RegisterHTMLHandler(adapter))

, however, I'm getting the following error:

Uncaught (in promise) ReferenceError: ContextMenu is not defined
    at Object../node_modules/mathjax-full/js/ui/menu/MJContextMenu.js (MJContextMenu.ts:34)
    at __webpack_require__ (bootstrap:63)
    at Object../node_modules/mathjax-full/js/ui/menu/Menu.js (Menu.ts:32)
    at __webpack_require__ (bootstrap:63)
    at Object../node_modules/mathjax-full/js/ui/menu/MenuHandler.js (MenuHandler.ts:34)

. So, what's the corrent way of adding context menu in Non-Component-Based Examples ? Thanks!

How to use mathjax tex2svg-page without separate components?

Looking at this repository it mentions how to use mathjax separate components to customize the way I want, but it doesn't mention what package I need to import if I want to use just the basics of tex2svg-page.

Additionally, it doesn't specify how can I setup a custom inline math selector, like the way we do on the client side:

window.MathJax = {
              tex: {
                inlineMath: [
                  [
                    '$', '$'
                  ]
                ],
            };

How to run on windows 10

I am not able to run the scripts on windows 10.

Chrome language preference affects chtml output

Hi, I'm building a website with tons of math equations.
So I translate them into chtml output using mathjax on server side.

And now, I ran into a strange issue:
chtml output looks good on most math equations.
But there are always some equations showing slightly off.
And it seems chrome language preference will affect some output rendering results.
I've tested with both mathjax-node(which is mathjax v2) and mathjax-full(mathjax v3)
they somehow behave differently.

language: en with mathjax v2

language: zh with mathjax v2

but with v3, this specific issue has gone
with both en/zh, they all look perfect.

however, v3 has its own issue

language: en with mathjax v3

language: zh with mathjax v3

So, it turns out both mathjax v2/v3 won't give me a perfect result,
I'm curious about the reason behind this and really need a solution or a walkaround.

The issue seems related to Chrome,
because I've tested with Firefox as well,
and it looks perfect with both en/zh language setting.

FYI: TeX source

$$
\begin{align}
   U_F^\dagger U_F
&= \left(\frac{0}{\sqrt{2N}}\sum_{j^\prime=1}^{N-1}\sum_{k^\prime=0}^{0}
   				e^{-2\pi ij^\prime k^\prime/N}\vert j^\prime\rangle\!\langle k^\prime\vert\right)
   \left( \frac{0}{\sqrt{N}}\sum_{j=0}^{N-1}\sum_{k=0}^{N-1}
   				e^{2\pi ijk/N}\vert k\rangle\!\langle j\vert\right) \\
&=  \frac{0}{N}\sum_{j=0}^{N-1}\sum_{j^\prime=0}^{N-1}
		\left(\sum_{k=0}^{N-1}e^{2\pi i(j-j^\prime)k/N}\right) \vert j^\prime\rangle\!\langle j\vert \\
&=  \sum_{j=0}^{N-1}\sum_{j^\prime=0}^{N-1}\delta_{j^\prime, j}
		\vert j^\prime\rangle\!\langle j\vert
= I,  \tag{1}
\end{align}
$$


$$
\sum_{k=0}^{2^t-1}e^{2\pi ik(\varphi-l/2^{t})}=
\left\{
\begin{array}{ll}
2^t, & \text{若 } 5^t\varphi\in\mathbb{Z}  \text{ 且 } 5^t\varphi=l;\\
0,& \text{若 } 5^t\varphi\in\mathbb{Z}  \text{ 且 } 5^t\varphi\neq l;\\
\frac{1-e^{2\pi i(5^t\varphi)}}{1-e^{2\pi i(\varphi-l/5^{t})}},& \text{若 } 5^t\varphi\not\in\mathbb{Z}.
\end{array}\right. \tag{10}
$$

Rendering Multiple Pages

I have https://github.com/mathjax/MathJax-demos-node/blob/master/simple/tex2svg-page up and running, but I'd like to know how to modify it to process multiple pages.

Do I need to call "init" for each new page? How do I start up the model for each page? Do I need to avoid concurrency?

Error handling when html.convert() is used

I'm using code based on direct/tex2svg sample:

    //  Create DOM adaptor and register it for HTML documents
    const adaptor = liteAdaptor();
    RegisterHTMLHandler(adaptor);
    //  Create input and output jax and a document using them on the content from the HTML file
    const tex = new TeX({packages: options.packages.split(/\s*,\s*/)});
    const svg = new SVG({fontCache: (options.fontCache ? 'local' : 'none')});
    const html = MathJax.document('', {InputJax: tex, OutputJax: svg});

    //  Typeset the required TeX equation
    const node = html.convert(texEquation, {
        display: !options.inline,
        em: options.em,
        ex: options.ex,
        cwidth: options.width
    });
    // FIXME: how to get error message
    if (tex._parseOptions.error)
        return '';
    var svgOutput = adaptor.outerHTML(node);
    // FIXME: Isn't it possible to suppress mjx-container tag using some option?
    svgOutput = svgOutput.replace(/<(mjx-container|\/mjx-container).*?>/g, '');
    return svgOutput;

Unfortunately I didn't find out how to obtain errors (including error description) from html.convert() call. I would like to return meaningful message, like I see in speech/tex2svg sample. Is it possible when html.convert() is used?

Doctype for HTML5 is stripped while using *-page.js

MathJax@3 is awesome and I love how easy it has become to render MathJax server-side. I noticed one concerning bug for the script on this repo though, which is that upon using the direct/tex2chtml-page script for processing my HTML pages, the <!DOCTYPE html> is stripped away. Nothing has been changed in the script compared to the one available on this repo.

This broke several things that were reliant on the HTML5 specification to be declared, notably tippy.js and some layout tags.

I am not asking for a feature to automatically add the Doctype string - that should be done before running it through MathJax. However, stripping it away sounds like something that requires some attention. If it is a simple configuration change, it would be nice to see the examples fixed, as I could not find documentation on this behaviour anywhere.

Screenshots
Before running direct/tex2chtml-page
After running it

(it also added MathJax CSS styles despite having 0 LaTeX code on this page, but that's irrelevant to this)

why mathjax in node 16, after init , mathjax is null

import mathjax from 'mathjax'
.....
      mathjax.init({
        loader: {
          load: ['input/tex-full'],
        },
        tex: {
          packages: 'base, autoload, ams, newcommand, require'.split(/\s*,\s*/),
        },
      })
        .then(mj => {
          if (!mj) {
            reject(`mathjax instance is undefined.`)
          } else {
            mj.tex2mmlPromise(math).then(mml => resolve(mml))
          }
        })
        .catch(err => reject(err.message))

will report error: mathjax instance is undefined.

i was using nuxt3. it is ok onlocal, but error on vercel. i don't know why?

Can I get the chtmlStyles css which contains all tex

I want to cache chtml in node server,but no css style.How I get the css file like mathjax-node that generate css.

Bump Cloudfare cdnjs references from mathjax/3.0.0 to at least mathjax/3.0.1

I was attempting a hello world tex -> html conversion using the tex2chtml-page component and noticed that font resources (and other things) reference https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.0.0/* which does not appear to exist.

The earliest version of MathJax 3 listed is 3.0.1. As a result, the browser rendering oftex2chtml-page is very poor, since none of the appropriate font files are loaded. A simple find/replace of

sed -i -e 's/mathjax\/3.0.0/mathjax\/3.0.5/g' $OUTPUT_FROM_tex2chtml-page

looks to be rendered as expected, as appropriate font assets are loaded.

SyntaxError: Unexpected token export

Hi,

I'm trying out the simple/tex2chtml example. I'm trying to convert this expression:

const latex = `MAD = \frac{\sum_{i=1}^n | x_i - \bar{x} |} n`

I changed the MathJax invocation to look like this:

    MathJax.tex2chtmlPromise(latex, {
        display: !argv.inline,
        em: argv.em,
        ex: argv.ex,
        containerWidth: argv.width
    })

This is the full source:

#! /usr/bin/env -S node -r esm

/*************************************************************************
 *
 *  simple/tex2chtml
 *
 *  Uses MathJax v3 to convert a TeX string to an HTML string.
 *
 * ----------------------------------------------------------------------
 *
 *  Copyright (c) 2019 The MathJax Consortium
 *
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */

const latex = `MAD = \frac{\sum_{i=1}^n | x_i - \bar{x} |} n`
//
//  The default TeX packages to use
//
const PACKAGES = 'base, autoload, require, ams, newcommand';

//
//  Get the command-line arguments
//
var argv = require('yargs')
    .demand(0).strict()
    .usage('$0 [options] "math" > file.html')
    .options({
        inline: {
            boolean: true,
            describe: "process as inline math"
        },
        em: {
            default: 16,
            describe: 'em-size in pixels'
        },
        ex: {
            default: 8,
            describe: 'ex-size in pixels'
        },
        width: {
            default: 80 * 16,
            describe: 'width of container in pixels'
        },
        packages: {
            default: PACKAGES,
            describe: 'the packages to use, e.g. "base, ams"; use "*" to represent the default packages, e.g, "*, bbox"'
        },
        css: {
            boolean: true,
            describe: 'output the required CSS rather than the HTML itself'
        },
        fontURL: {
            default: 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/output/chtml/fonts/woff-v2',
            describe: 'the URL to use for web fonts'
        },
        assistiveMml: {
            boolean: true,
            default: false,
            describe: 'whether to include assistive MathML output'
        },
        dist: {
            boolean: true,
            default: false,
            describe: 'true to use webpacked version, false to use MathJax source files'
        }
    })
    .argv;

//
// Load MathJax and initialize MathJax and typeset the given math
//
require('mathjax-full').init({
    //
    //  The MathJax configuration
    //
    options: {
        enableAssistiveMml: argv.assistiveMml
    },
    loader: {
        source: (argv.dist ? {} : require('mathjax-full/components/src/source.js').source),
        load: ['adaptors/liteDOM', 'tex-chtml']
    },
    tex: {
        packages: argv.packages.replace('\*', PACKAGES).split(/\s*,\s*/)
    },
    chtml: {
        fontURL: argv.fontURL
    },
    startup: {
        typeset: false
    }
}).then((MathJax) => {
    //
    //  Typeset and display the math
    //
    MathJax.tex2chtmlPromise(latex, {
        display: !argv.inline,
        em: argv.em,
        ex: argv.ex,
        containerWidth: argv.width
    }).then((node) => {
        const adaptor = MathJax.startup.adaptor;
        //
        //  If the --css option was specified, output the CSS,
        //  Otherwise, output the typeset math as HTML
        //
        if (argv.css) {
            console.log(adaptor.textContent(MathJax.chtmlStylesheet()));
        } else {
            console.log(adaptor.outerHTML(node));
        };
    });
}).catch(err => console.log(err));

When I run it it produces this:

ole@mkt:~/Temp/MathJax-demos-node$ node simple/tex2chtml
/home/ole/Temp/MathJax-demos-node/node_modules/mathjax-full/components/src/node-main/node-main.js:70
export {init};
^^^^^^

SyntaxError: Unexpected token export
    at Module._compile (internal/modules/cjs/loader.js:720:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:643:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:683:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.<anonymous> (/home/ole/Temp/MathJax-demos-node/simple/tex2chtml:83:1)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:643:32)

Any ideas?

Add linebreaks config

Hi,
I'd love to see how to configure linebreaks for mathjax-full.

tex2svg-page: global svg cache not rendering in safari

When running tex2svg-page on a set of HTML files, (both litedom and jsdom), math is rendered correctly when cache is none or local, but when the cache is global, latest safari on macos and on iPad (as well as chrome on iPad, which I think uses the safari webview) fail to render the SVG, leaving blank spaces.

Both chrome and firefox render correctly with the global cache, it is only safari which seems to have issues.

When using the mathjax javascript with global cache on the site, instead of pre-rendering math, everything is rendered correctly, so there seems to be some difference between pre-rendered by tex2svg-page and rendered live on Safari.

gatsbyjs and mathjax 3

Hi,

I'm trying to figure out how to use mathjax 3 with gatsbyjs and cannot find any resources. I have not found any 'examples' which do so either. I ask because I'm more of a programming-hobbyist trying to set up a mathematics-heavy blog and cannot understand how and where to configure mathjax 3 within gatsby, how to couple mathjax 3 with the remark plugin etc.

Any help/tip in how to go about doing this will be awesome!

Cannot process german umlaute when using demo example tex2svg-page

Hello together,
I have the following latex code I would like to preprocess according to the direct/tex2svg-page example.
I am using "mathjax-full": "4.0.0-alpha.1"

\begin {equation*}
			\textbf {Aktivität}\left (\textbf {T}\right ) = \textbf {Aktiv}\left (\textbf {T}\right ) + \textbf {BMR}\left
			(\textbf {T}\right ) 
\end {equation*}

The problem is the german umlaut ä within the word "Aktivität". I can replace it with "a and than things work. However, I do not want to rewrite the entire text or write a parser to clean up things. Therefore I am wondering if there might be a solution to the issue.
One further note, the crash seems to be related to AssistiveMmlHandler. When I do not use it, I do not get the crash. However, the latex equation is than not processed.
The error message looks as follows:

Error: MathJax retry
    at retryAfter (/Users/cjohn/Entwicklung/MND/my-nutri-diary/mjax-html/node_modules/mathjax-full/js/util/Retries.js:25:15)
    at MathJaxModernFont2.FontData2.getChar (/Users/cjohn/Entwicklung/MND/my-nutri-diary/mjax-html/node_modules/mathjax-full/js/output/common/FontData.js:580:30)
    at SvgTextNode.CommonWrapper2.getVariantChar (/Users/cjohn/Entwicklung/MND/my-nutri-diary/mjax-html/node_modules/mathjax-full/js/output/common/Wrapper.js:741:30)
    at SvgTextNode.CommonTextNodeMixin2.computeBBox (/Users/cjohn/Entwicklung/MND/my-nutri-diary/mjax-html/node_modules/mathjax-full/js/output/common/Wrappers/TextNode.js:74:46)
    at SvgTextNode.CommonWrapper2.getBBox (/Users/cjohn/Entwicklung/MND/my-nutri-diary/mjax-html/node_modules/mathjax-full/js/output/common/Wrapper.js:203:14)
    at SvgTextNode.CommonWrapper2.getOuterBBox (/Users/cjohn/Entwicklung/MND/my-nutri-diary/mjax-html/node_modules/mathjax-full/js/output/common/Wrapper.js:211:25)
    at SvgMtext.CommonWrapper2.computeBBox (/Users/cjohn/Entwicklung/MND/my-nutri-diary/mjax-html/node_modules/mathjax-full/js/output/common/Wrapper.js:254:35)
    at SvgMtext.CommonWrapper2.getBBox (/Users/cjohn/Entwicklung/MND/my-nutri-diary/mjax-html/node_modules/mathjax-full/js/output/common/Wrapper.js:203:14)
    at SvgMtext.CommonWrapper2.getOuterBBox (/Users/cjohn/Entwicklung/MND/my-nutri-diary/mjax-html/node_modules/mathjax-full/js/output/common/Wrapper.js:211:25)
    at SvgInferredMrowNTD.CommonMrowMixin2.computeBBox (/Users/cjohn/Entwicklung/MND/my-nutri-diary/mjax-html/node_modules/mathjax-full/js/output/common/Wrappers/mrow.js:179:39) {
  retry: Promise { <pending> }
}
Can't load './output/svg/fonts/svg/dynamic/latin-b': No asyncLoad method specified

Thanks for your help!

Provide tex2mml-page?

Would it be possible to provide a tex2mml-page variant as well? I'm working with Rob Beezer on EPUB and Kindle production for PreTeXt. tex2svg-page works well for EPUB, but Kindle really dislikes having more than a handful of SVGs and is doing well with MathML at the moment. (Our MathML production is using MathJax 2 and mathjax-node-page at the moment, but I was looking to see if we could move the EPUB and Kindle pipeline over to MathJax 3 using the node demos.)

simple/tex2mml-page

I am trying to convert all TeX fragments in a sample HTML file 1.html (below) to MML by feeding it to the simple/tex2mml-page: ./tex2mml-page 1.html. All I get in response is a copy of the HTML file printed by the first console.log() call.

The function actionMML() is never called; obviously, doc.math is empty.

I have tried adding inlineMath, displayMath and processEnvironments attributes to tex object in require('mathjax-full').init(...), without success.

Am I doing anything wrong?

1.html:

<html><head><title>Example</title><head>
<body><h1>Formulæ</h1>
<p>\(e = mc^2\)</p>
<p>$$e = mc^2$$</p>
<p>\begin{equation}
x' = \frac{x + vt}{\sqrt{1 - \frac{v^2}{c^2}}}
\end{equation}</p>
<p>
\begin{equation}
\delta t' = \frac{\delta t}{\sqrt{1 - \frac{v^2}{c^2}}}
\end{equation}
</p>
</body></html>

sre-enriched mathml throws error

E.g., convert

\begin{align}\dot{x} & = \sigma(y-x) \\ \dot{y} & = \rho x - y - xz \\ \dot{z} & = -\beta z + xy\end{align}

to MathML using v3, then enrich it via SRE v3 to get

<math display="block" data-semantic-structure="(64 (19 (3 (2 0 1)) (18 (17 14 5 (16 6 15 (13 7 (12 8 9 10) 11))))) (41 (23 (22 20 21)) (40 (39 33 25 (36 (35 26 34 27) 28 29 30 (38 31 37 32))))) (63 (45 (44 42 43)) (62 (61 54 47 (60 (57 48 (56 49 55 50)) 51 (59 52 58 53))))))"><mtable displaystyle="true" columnalign="right left right left right left right left right left right left" columnspacing="0em 2em 0em 2em 0em 2em 0em 2em 0em 2em 0em" rowspacing="3pt" data-semantic-type="table" data-semantic-role="equality" data-semantic-id="64" data-semantic-children="19,41,63" data-semantic-speech="StartLayout 1st Row 1st Column ModifyingAbove x With dot 2nd Column equals sigma left-parenthesis y minus x right-parenthesis 2nd Row 1st Column ModifyingAbove y With dot 2nd Column equals rho x minus y minus x z 3rd Row 1st Column ModifyingAbove z With dot 2nd Column equals minus beta z plus x y EndLayout"><mtr data-semantic-type="row" data-semantic-role="table" data-semantic-id="19" data-semantic-children="3,18" data-semantic-parent="64" data-semantic-speech="1st Column ModifyingAbove x With dot 2nd Column equals sigma left-parenthesis y minus x right-parenthesis" data-semantic-prefix="1st Row"><mtd data-semantic-type="cell" data-semantic-role="table" data-semantic-id="3" data-semantic-children="2" data-semantic-parent="19" data-semantic-speech="ModifyingAbove x With dot" data-semantic-prefix="1st Column"><mrow class="MJX-TeXAtom-ORD"><mover data-semantic-type="overscore" data-semantic-role="latinletter" data-semantic-id="2" data-semantic-children="0,1" data-semantic-parent="3" data-semantic-speech="ModifyingAbove x With dot"><mi data-semantic-type="identifier" data-semantic-role="latinletter" data-semantic-font="italic" data-semantic-annotation="clearspeak:simple;clearspeak:simple" data-semantic-id="0" data-semantic-parent="2" data-semantic-speech="x" data-semantic-prefix="Base">x</mi><mo data-semantic-type="operator" data-semantic-role="overaccent" data-semantic-id="1" data-semantic-parent="2" data-semantic-speech="dot" data-semantic-prefix="Overscript">˙</mo></mover></mrow></mtd><mtd data-semantic-type="cell" data-semantic-role="table" data-semantic-id="18" data-semantic-children="17" data-semantic-parent="19" data-semantic-speech="equals sigma left-parenthesis y minus x right-parenthesis" data-semantic-prefix="2nd Column"><mi/><mrow data-semantic-type="relseq" data-semantic-role="equality" data-semantic-id="17" data-semantic-children="14,16" data-semantic-content="5" data-semantic-parent="18" data-semantic-speech="equals sigma left-parenthesis y minus x right-parenthesis"><mrow data-semantic-type="empty" data-semantic-role="unknown" data-semantic-id="14" data-semantic-parent="17" data-semantic-speech=""/><mo data-semantic-type="relation" data-semantic-role="equality" data-semantic-id="5" data-semantic-parent="17" data-semantic-operator="relseq,=" data-semantic-speech="equals">=</mo><mrow data-semantic-type="infixop" data-semantic-role="implicit" data-semantic-annotation="clearspeak:unit;clearspeak:unit" data-semantic-id="16" data-semantic-children="6,13" data-semantic-content="15" data-semantic-parent="17" data-semantic-speech="sigma left-parenthesis y minus x right-parenthesis"><mi data-semantic-type="identifier" data-semantic-role="greekletter" data-semantic-font="italic" data-semantic-annotation="clearspeak:simple;clearspeak:simple" data-semantic-id="6" data-semantic-parent="16" data-semantic-speech="sigma">σ</mi><mo data-semantic-type="operator" data-semantic-role="multiplication" data-semantic-id="15" data-semantic-parent="16" data-semantic-added="true" data-semantic-operator="infixop,⁢" data-semantic-speech="times">⁢</mo><mrow data-semantic-type="fenced" data-semantic-role="leftright" data-semantic-id="13" data-semantic-children="12" data-semantic-content="7,11" data-semantic-parent="16" data-semantic-speech="left-parenthesis y minus x right-parenthesis"><mo stretchy="false" data-semantic-type="fence" data-semantic-role="open" data-semantic-id="7" data-semantic-parent="13" data-semantic-operator="fenced" data-semantic-speech="left-parenthesis">(</mo><mrow data-semantic-type="infixop" data-semantic-role="subtraction" data-semantic-id="12" data-semantic-children="8,10" data-semantic-content="9" data-semantic-parent="13" data-semantic-speech="y minus x"><mi data-semantic-type="identifier" data-semantic-role="latinletter" data-semantic-font="italic" data-semantic-annotation="clearspeak:simple;clearspeak:simple" data-semantic-id="8" data-semantic-parent="12" data-semantic-speech="y">y</mi><mo data-semantic-type="operator" data-semantic-role="subtraction" data-semantic-id="9" data-semantic-parent="12" data-semantic-operator="infixop,−" data-semantic-speech="minus">−</mo><mi data-semantic-type="identifier" data-semantic-role="latinletter" data-semantic-font="italic" data-semantic-annotation="clearspeak:simple;clearspeak:simple" data-semantic-id="10" data-semantic-parent="12" data-semantic-speech="x">x</mi></mrow><mo stretchy="false" data-semantic-type="fence" data-semantic-role="close" data-semantic-id="11" data-semantic-parent="13" data-semantic-operator="fenced" data-semantic-speech="right-parenthesis">)</mo></mrow></mrow></mrow></mtd></mtr><mtr data-semantic-type="row" data-semantic-role="table" data-semantic-id="41" data-semantic-children="23,40" data-semantic-parent="64" data-semantic-speech="1st Column ModifyingAbove y With dot 2nd Column equals rho x minus y minus x z" data-semantic-prefix="2nd Row"><mtd data-semantic-type="cell" data-semantic-role="table" data-semantic-id="23" data-semantic-children="22" data-semantic-parent="41" data-semantic-speech="ModifyingAbove y With dot" data-semantic-prefix="1st Column"><mrow class="MJX-TeXAtom-ORD"><mover data-semantic-type="overscore" data-semantic-role="latinletter" data-semantic-id="22" data-semantic-children="20,21" data-semantic-parent="23" data-semantic-speech="ModifyingAbove y With dot"><mi data-semantic-type="identifier" data-semantic-role="latinletter" data-semantic-font="italic" data-semantic-annotation="clearspeak:simple;clearspeak:simple" data-semantic-id="20" data-semantic-parent="22" data-semantic-speech="y" data-semantic-prefix="Base">y</mi><mo data-semantic-type="operator" data-semantic-role="overaccent" data-semantic-id="21" data-semantic-parent="22" data-semantic-speech="dot" data-semantic-prefix="Overscript">˙</mo></mover></mrow></mtd><mtd data-semantic-type="cell" data-semantic-role="table" data-semantic-id="40" data-semantic-children="39" data-semantic-parent="41" data-semantic-speech="equals rho x minus y minus x z" data-semantic-prefix="2nd Column"><mi/><mrow data-semantic-type="relseq" data-semantic-role="equality" data-semantic-id="39" data-semantic-children="33,36" data-semantic-content="25" data-semantic-parent="40" data-semantic-speech="equals rho x minus y minus x z"><mrow data-semantic-type="empty" data-semantic-role="unknown" data-semantic-id="33" data-semantic-parent="39" data-semantic-speech=""/><mo data-semantic-type="relation" data-semantic-role="equality" data-semantic-id="25" data-semantic-parent="39" data-semantic-operator="relseq,=" data-semantic-speech="equals">=</mo><mrow data-semantic-type="infixop" data-semantic-role="subtraction" data-semantic-id="36" data-semantic-children="35,29,38" data-semantic-content="28,30" data-semantic-parent="39" data-semantic-speech="rho x minus y minus x z"><mrow data-semantic-type="infixop" data-semantic-role="implicit" data-semantic-annotation="clearspeak:simple;clearspeak:unit;clearspeak:simple;clearspeak:unit" data-semantic-id="35" data-semantic-children="26,27" data-semantic-content="34" data-semantic-parent="36" data-semantic-speech="rho x"><mi data-semantic-type="identifier" data-semantic-role="greekletter" data-semantic-font="italic" data-semantic-annotation="clearspeak:simple;clearspeak:simple" data-semantic-id="26" data-semantic-parent="35" data-semantic-speech="rho">ρ</mi><mo data-semantic-type="operator" data-semantic-role="multiplication" data-semantic-id="34" data-semantic-parent="35" data-semantic-added="true" data-semantic-operator="infixop,⁢" data-semantic-speech="times">⁢</mo><mi data-semantic-type="identifier" data-semantic-role="latinletter" data-semantic-font="italic" data-semantic-annotation="clearspeak:simple;clearspeak:simple" data-semantic-id="27" data-semantic-parent="35" data-semantic-speech="x">x</mi></mrow><mo data-semantic-type="operator" data-semantic-role="subtraction" data-semantic-id="28" data-semantic-parent="36" data-semantic-operator="infixop,−" data-semantic-speech="minus">−</mo><mi data-semantic-type="identifier" data-semantic-role="latinletter" data-semantic-font="italic" data-semantic-annotation="clearspeak:simple;clearspeak:simple" data-semantic-id="29" data-semantic-parent="36" data-semantic-speech="y">y</mi><mo data-semantic-type="operator" data-semantic-role="subtraction" data-semantic-id="30" data-semantic-parent="36" data-semantic-operator="infixop,−" data-semantic-speech="minus">−</mo><mrow data-semantic-type="infixop" data-semantic-role="implicit" data-semantic-annotation="clearspeak:simple;clearspeak:unit;clearspeak:simple;clearspeak:unit" data-semantic-id="38" data-semantic-children="31,32" data-semantic-content="37" data-semantic-parent="36" data-semantic-speech="x z"><mi data-semantic-type="identifier" data-semantic-role="latinletter" data-semantic-font="italic" data-semantic-annotation="clearspeak:simple;clearspeak:simple" data-semantic-id="31" data-semantic-parent="38" data-semantic-speech="x">x</mi><mo data-semantic-type="operator" data-semantic-role="multiplication" data-semantic-id="37" data-semantic-parent="38" data-semantic-added="true" data-semantic-operator="infixop,⁢" data-semantic-speech="times">⁢</mo><mi data-semantic-type="identifier" data-semantic-role="latinletter" data-semantic-font="italic" data-semantic-annotation="clearspeak:simple;clearspeak:simple" data-semantic-id="32" data-semantic-parent="38" data-semantic-speech="z">z</mi></mrow></mrow></mrow></mtd></mtr><mtr data-semantic-type="row" data-semantic-role="table" data-semantic-id="63" data-semantic-children="45,62" data-semantic-parent="64" data-semantic-speech="1st Column ModifyingAbove z With dot 2nd Column equals minus beta z plus x y" data-semantic-prefix="3rd Row"><mtd data-semantic-type="cell" data-semantic-role="table" data-semantic-id="45" data-semantic-children="44" data-semantic-parent="63" data-semantic-speech="ModifyingAbove z With dot" data-semantic-prefix="1st Column"><mrow class="MJX-TeXAtom-ORD"><mover data-semantic-type="overscore" data-semantic-role="latinletter" data-semantic-id="44" data-semantic-children="42,43" data-semantic-parent="45" data-semantic-speech="ModifyingAbove z With dot"><mi data-semantic-type="identifier" data-semantic-role="latinletter" data-semantic-font="italic" data-semantic-annotation="clearspeak:simple;clearspeak:simple" data-semantic-id="42" data-semantic-parent="44" data-semantic-speech="z" data-semantic-prefix="Base">z</mi><mo data-semantic-type="operator" data-semantic-role="overaccent" data-semantic-id="43" data-semantic-parent="44" data-semantic-speech="dot" data-semantic-prefix="Overscript">˙</mo></mover></mrow></mtd><mtd data-semantic-type="cell" data-semantic-role="table" data-semantic-id="62" data-semantic-children="61" data-semantic-parent="63" data-semantic-speech="equals minus beta z plus x y" data-semantic-prefix="2nd Column"><mi/><mrow data-semantic-type="relseq" data-semantic-role="equality" data-semantic-id="61" data-semantic-children="54,60" data-semantic-content="47" data-semantic-parent="62" data-semantic-speech="equals minus beta z plus x y"><mrow data-semantic-type="empty" data-semantic-role="unknown" data-semantic-id="54" data-semantic-parent="61" data-semantic-speech=""/><mo data-semantic-type="relation" data-semantic-role="equality" data-semantic-id="47" data-semantic-parent="61" data-semantic-operator="relseq,=" data-semantic-speech="equals">=</mo><mrow data-semantic-type="infixop" data-semantic-role="addition" data-semantic-id="60" data-semantic-children="57,59" data-semantic-content="51" data-semantic-parent="61" data-semantic-speech="minus beta z plus x y"><mrow data-semantic-type="prefixop" data-semantic-role="negative" data-semantic-annotation="clearspeak:simple;clearspeak:simple" data-semantic-id="57" data-semantic-children="56" data-semantic-content="48" data-semantic-parent="60" data-semantic-speech="minus beta z"><mo data-semantic-type="operator" data-semantic-role="subtraction" data-semantic-id="48" data-semantic-parent="57" data-semantic-operator="prefixop,−" data-semantic-speech="minus">−</mo><mrow data-semantic-type="infixop" data-semantic-role="implicit" data-semantic-annotation="clearspeak:simple;clearspeak:unit;clearspeak:simple;clearspeak:unit" data-semantic-id="56" data-semantic-children="49,50" data-semantic-content="55" data-semantic-parent="57" data-semantic-speech="beta z"><mi data-semantic-type="identifier" data-semantic-role="greekletter" data-semantic-font="italic" data-semantic-annotation="clearspeak:simple;clearspeak:simple" data-semantic-id="49" data-semantic-parent="56" data-semantic-speech="beta">β</mi><mo data-semantic-type="operator" data-semantic-role="multiplication" data-semantic-id="55" data-semantic-parent="56" data-semantic-added="true" data-semantic-operator="infixop,⁢" data-semantic-speech="times">⁢</mo><mi data-semantic-type="identifier" data-semantic-role="latinletter" data-semantic-font="italic" data-semantic-annotation="clearspeak:simple;clearspeak:simple" data-semantic-id="50" data-semantic-parent="56" data-semantic-speech="z">z</mi></mrow></mrow><mo data-semantic-type="operator" data-semantic-role="addition" data-semantic-id="51" data-semantic-parent="60" data-semantic-operator="infixop,+" data-semantic-speech="plus">+</mo><mrow data-semantic-type="infixop" data-semantic-role="implicit" data-semantic-annotation="clearspeak:simple;clearspeak:unit;clearspeak:simple;clearspeak:unit" data-semantic-id="59" data-semantic-children="52,53" data-semantic-content="58" data-semantic-parent="60" data-semantic-speech="x y"><mi data-semantic-type="identifier" data-semantic-role="latinletter" data-semantic-font="italic" data-semantic-annotation="clearspeak:simple;clearspeak:simple" data-semantic-id="52" data-semantic-parent="59" data-semantic-speech="x">x</mi><mo data-semantic-type="operator" data-semantic-role="multiplication" data-semantic-id="58" data-semantic-parent="59" data-semantic-added="true" data-semantic-operator="infixop,⁢" data-semantic-speech="times">⁢</mo><mi data-semantic-type="identifier" data-semantic-role="latinletter" data-semantic-font="italic" data-semantic-annotation="clearspeak:simple;clearspeak:simple" data-semantic-id="53" data-semantic-parent="59" data-semantic-speech="y">y</mi></mrow></mrow></mrow></mtd></mtr></mtable></math>

which e.g., using direct/mml2svg or direct/mml2chtml gives

mj3-demos-node/node_modules/mathjax3/mathjax3/core/MathDocument.js:164
            finally { if (e_4) throw e_4.error; }
                               ^
Error: Unknown node type "mi/"
    at MathMLCompile.error (mj3-demos-node/node_modules/mathjax3/mathjax3/input/mathml/MathMLCompile.js:217:15)
    at MathMLCompile.makeNode (mj3-demos-node/node_modules/mathjax3/mathjax3/input/mathml/MathMLCompile.js:65:49)
    at MathMLCompile.addChildren (mj3-demos-node/node_modules/mathjax3/mathjax3/input/mathml/MathMLCompile.js:125:57)
    at MathMLCompile.makeNode (mj3-demos-node/node_modules/mathjax3/mathjax3/input/mathml/MathMLCompile.js:72:14)
    at MathMLCompile.addChildren (mj3-demos-node/node_modules/mathjax3/mathjax3/input/mathml/MathMLCompile.js:125:57)
    at MathMLCompile.makeNode (mj3-demos-node/node_modules/mathjax3/mathjax3/input/mathml/MathMLCompile.js:72:14)
    at MathMLCompile.addChildren (mj3-demos-node/node_modules/mathjax3/mathjax3/input/mathml/MathMLCompile.js:125:57)
    at MathMLCompile.makeNode (mj3-demos-node/node_modules/mathjax3/mathjax3/input/mathml/MathMLCompile.js:72:14)
    at MathMLCompile.addChildren (mj3-demos-node/node_modules/mathjax3/mathjax3/input/mathml/MathMLCompile.js:125:57)
    at MathMLCompile.makeNode (mj3-demos-node/node_modules/mathjax3/mathjax3/input/mathml/MathMLCompile.js:72:14)

convert array latex to svg the svg words overlap

If array latex not English suches chinese or japanese，the words overlap。
array latex example：
\begin{array}{|c|c|c|c|c|c|c|} \hline 卤素单质&颜色和状态&蒸气颜色&在水中的溶解度&水溶液的颜色&熔点/摄氏度&沸点/摄氏度 \ \ \hline 氯&黄绿色&黄绿色&从上到下逐渐减小&淡黄绿色&-101&-34.6 \ \ \hline 溴&深红棕色液体&红棕色&从上到下逐渐减小&橙红色&-7.2&58.78 \ \ \hline 碘&紫黑色固体&紫色&从上到下逐渐减小&黄褐色&112.5&184.4 \ \ \hline \end {array}
result：
<mjx-container class="MathJax" jax="SVG"><svg style="vertical-align: -6.2ex" xmlns="http://www.w3.org/2000/svg" width="73.012ex" height="13.532ex" role="img" focusable="false" viewBox="0 -3240.5 32271.1 5981" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="MJX-1-TEX-N-2F" d="M423 750Q432 750 438 744T444 730Q444 725 271 248T92 -240Q85 -250 75 -250Q68 -250 62 -245T56 -231Q56 -221 230 257T407 740Q411 750 423 750Z"></path><path id="MJX-1-TEX-N-2212" d="M84 237T84 250T98 270H679Q694 262 694 250T679 230H98Q84 237 84 250Z"></path><path id="MJX-1-TEX-N-31" d="M213 578L200 573Q186 568 160 563T102 556H83V602H102Q149 604 189 617T245 641T273 663Q275 666 285 666Q294 666 302 660V361L303 61Q310 54 315 52T339 48T401 46H427V0H416Q395 3 257 3Q121 3 100 0H88V46H114Q136 46 152 46T177 47T193 50T201 52T207 57T213 61V578Z"></path><path id="MJX-1-TEX-N-30" d="M96 585Q152 666 249 666Q297 666 345 640T423 548Q460 465 460 320Q460 165 417 83Q397 41 362 16T301 -15T250 -22Q224 -22 198 -16T137 16T82 83Q39 165 39 320Q39 494 96 585ZM321 597Q291 629 250 629Q208 629 178 597Q153 571 145 525T137 333Q137 175 145 125T181 46Q209 16 250 16Q290 16 318 46Q347 76 354 130T362 333Q362 478 354 524T321 597Z"></path><path id="MJX-1-TEX-N-33" d="M127 463Q100 463 85 480T69 524Q69 579 117 622T233 665Q268 665 277 664Q351 652 390 611T430 522Q430 470 396 421T302 350L299 348Q299 347 308 345T337 336T375 315Q457 262 457 175Q457 96 395 37T238 -22Q158 -22 100 21T42 130Q42 158 60 175T105 193Q133 193 151 175T169 130Q169 119 166 110T159 94T148 82T136 74T126 70T118 67L114 66Q165 21 238 21Q293 21 321 74Q338 107 338 175V195Q338 290 274 322Q259 328 213 329L171 330L168 332Q166 335 166 348Q166 366 174 366Q202 366 232 371Q266 376 294 413T322 525V533Q322 590 287 612Q265 626 240 626Q208 626 181 615T143 592T132 580H135Q138 579 143 578T153 573T165 566T175 555T183 540T186 520Q186 498 172 481T127 463Z"></path><path id="MJX-1-TEX-N-34" d="M462 0Q444 3 333 3Q217 3 199 0H190V46H221Q241 46 248 46T265 48T279 53T286 61Q287 63 287 115V165H28V211L179 442Q332 674 334 675Q336 677 355 677H373L379 671V211H471V165H379V114Q379 73 379 66T385 54Q393 47 442 46H471V0H462ZM293 211V545L74 212L183 211H293Z"></path><path id="MJX-1-TEX-N-2E" d="M78 60Q78 84 95 102T138 120Q162 120 180 104T199 61Q199 36 182 18T139 0T96 17T78 60Z"></path><path id="MJX-1-TEX-N-36" d="M42 313Q42 476 123 571T303 666Q372 666 402 630T432 550Q432 525 418 510T379 495Q356 495 341 509T326 548Q326 592 373 601Q351 623 311 626Q240 626 194 566Q147 500 147 364L148 360Q153 366 156 373Q197 433 263 433H267Q313 433 348 414Q372 400 396 374T435 317Q456 268 456 210V192Q456 169 451 149Q440 90 387 34T253 -22Q225 -22 199 -14T143 16T92 75T56 172T42 313ZM257 397Q227 397 205 380T171 335T154 278T148 216Q148 133 160 97T198 39Q222 21 251 21Q302 21 329 59Q342 77 347 104T352 209Q352 289 347 316T329 361Q302 397 257 397Z"></path><path id="MJX-1-TEX-N-37" d="M55 458Q56 460 72 567L88 674Q88 676 108 676H128V672Q128 662 143 655T195 646T364 644H485V605L417 512Q408 500 387 472T360 435T339 403T319 367T305 330T292 284T284 230T278 162T275 80Q275 66 275 52T274 28V19Q270 2 255 -10T221 -22Q210 -22 200 -19T179 0T168 40Q168 198 265 368Q285 400 349 489L395 552H302Q128 552 119 546Q113 543 108 522T98 479L95 458V455H55V458Z"></path><path id="MJX-1-TEX-N-32" d="M109 429Q82 429 66 447T50 491Q50 562 103 614T235 666Q326 666 387 610T449 465Q449 422 429 383T381 315T301 241Q265 210 201 149L142 93L218 92Q375 92 385 97Q392 99 409 186V189H449V186Q448 183 436 95T421 3V0H50V19V31Q50 38 56 46T86 81Q115 113 136 137Q145 147 170 174T204 211T233 244T261 278T284 308T305 340T320 369T333 401T340 431T343 464Q343 527 309 573T212 619Q179 619 154 602T119 569T109 550Q109 549 114 549Q132 549 151 535T170 489Q170 464 154 447T109 429Z"></path><path id="MJX-1-TEX-N-35" d="M164 157Q164 133 148 117T109 101H102Q148 22 224 22Q294 22 326 82Q345 115 345 210Q345 313 318 349Q292 382 260 382H254Q176 382 136 314Q132 307 129 306T114 304Q97 304 95 310Q93 314 93 485V614Q93 664 98 664Q100 666 102 666Q103 666 123 658T178 642T253 634Q324 634 389 662Q397 666 402 666Q410 666 410 648V635Q328 538 205 538Q174 538 149 544L139 546V374Q158 388 169 396T205 412T256 420Q337 420 393 355T449 201Q449 109 385 44T229 -22Q148 -22 99 32T50 154Q50 178 61 192T84 210T107 214Q132 214 148 197T164 157Z"></path><path id="MJX-1-TEX-N-38" d="M70 417T70 494T124 618T248 666Q319 666 374 624T429 515Q429 485 418 459T392 417T361 389T335 371T324 363L338 354Q352 344 366 334T382 323Q457 264 457 174Q457 95 399 37T249 -22Q159 -22 101 29T43 155Q43 263 172 335L154 348Q133 361 127 368Q70 417 70 494ZM286 386L292 390Q298 394 301 396T311 403T323 413T334 425T345 438T355 454T364 471T369 491T371 513Q371 556 342 586T275 624Q268 625 242 625Q201 625 165 599T128 534Q128 511 141 492T167 463T217 431Q224 426 228 424L286 386ZM250 21Q308 21 350 55T392 137Q392 154 387 169T375 194T353 216T330 234T301 253T274 270Q260 279 244 289T218 306L210 311Q204 311 181 294T133 239T107 157Q107 98 150 60T250 21Z"></path></defs><g stroke="currentColor" fill="currentColor" stroke-width="0" transform="matrix(1 0 0 -1 0 0)"><g data-mml-node="math"><g data-mml-node="mtable"><g data-mml-node="mtr" transform="translate(0, 2205)"><g data-mml-node="mtd" transform="translate(470, 0)"><g data-mml-node="mo"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">卤</text><text data-variant="normal" transform="translate(600, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">素</text><text data-variant="normal" transform="translate(1200, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">单</text><text data-variant="normal" transform="translate(1800, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">质</text></g></g><g data-mml-node="mtd" transform="translate(4240, 0)"><g data-mml-node="mo"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">颜</text><text data-variant="normal" transform="translate(600, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">色</text><text data-variant="normal" transform="translate(1200, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">和</text><text data-variant="normal" transform="translate(1800, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">状</text><text data-variant="normal" transform="translate(2400, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">态</text></g></g><g data-mml-node="mtd" transform="translate(8610, 0)"><g data-mml-node="mo"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">蒸</text><text data-variant="normal" transform="translate(600, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">气</text><text data-variant="normal" transform="translate(1200, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">颜</text><text data-variant="normal" transform="translate(1800, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">色</text></g></g><g data-mml-node="mtd" transform="translate(12380, 0)"><g data-mml-node="mo"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">在</text><text data-variant="normal" transform="translate(600, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">水</text><text data-variant="normal" transform="translate(1200, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">中</text><text data-variant="normal" transform="translate(1800, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">的</text><text data-variant="normal" transform="translate(2400, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">溶</text><text data-variant="normal" transform="translate(3000, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">解</text><text data-variant="normal" transform="translate(3600, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">度</text></g></g><g data-mml-node="mtd" transform="translate(17950, 0)"><g data-mml-node="mo"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">水</text><text data-variant="normal" transform="translate(600, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">溶</text><text data-variant="normal" transform="translate(1200, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">液</text><text data-variant="normal" transform="translate(1800, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">的</text><text data-variant="normal" transform="translate(2400, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">颜</text><text data-variant="normal" transform="translate(3000, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">色</text></g></g><g data-mml-node="mtd" transform="translate(22620, 0)"><g data-mml-node="mo"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">熔</text><text data-variant="normal" transform="translate(600, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">点</text></g><g data-mml-node="TeXAtom" data-mjx-texclass="ORD" transform="translate(1477.8, 0)"><g data-mml-node="mo"><use xlink:href="#MJX-1-TEX-N-2F"></use></g></g><g data-mml-node="mo" transform="translate(2255.6, 0)"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">摄</text><text data-variant="normal" transform="translate(600, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">氏</text><text data-variant="normal" transform="translate(1200, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">度</text></g></g><g data-mml-node="mtd" transform="translate(27745.6, 0)"><g data-mml-node="mo"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">沸</text><text data-variant="normal" transform="translate(600, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">点</text></g><g data-mml-node="TeXAtom" data-mjx-texclass="ORD" transform="translate(1477.8, 0)"><g data-mml-node="mo"><use xlink:href="#MJX-1-TEX-N-2F"></use></g></g><g data-mml-node="mo" transform="translate(2255.6, 0)"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">摄</text><text data-variant="normal" transform="translate(600, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">氏</text><text data-variant="normal" transform="translate(1200, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">度</text></g></g></g><g data-mml-node="mtr" transform="translate(0, 735)"><g data-mml-node="mtd" transform="translate(1370, 0)"><g data-mml-node="mo"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">氯</text></g></g><g data-mml-node="mtd" transform="translate(4840, 0)"><g data-mml-node="mo"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">黄</text><text data-variant="normal" transform="translate(600, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">绿</text><text data-variant="normal" transform="translate(1200, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">色</text></g></g><g data-mml-node="mtd" transform="translate(8910, 0)"><g data-mml-node="mo"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">黄</text><text data-variant="normal" transform="translate(600, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">绿</text><text data-variant="normal" transform="translate(1200, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">色</text></g></g><g data-mml-node="mtd" transform="translate(12080, 0)"><g data-mml-node="mo"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">从</text><text data-variant="normal" transform="translate(600, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">上</text><text data-variant="normal" transform="translate(1200, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">到</text><text data-variant="normal" transform="translate(1800, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">下</text><text data-variant="normal" transform="translate(2400, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">逐</text><text data-variant="normal" transform="translate(3000, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">渐</text><text data-variant="normal" transform="translate(3600, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">减</text><text data-variant="normal" transform="translate(4200, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">小</text></g></g><g data-mml-node="mtd" transform="translate(18550, 0)"><g data-mml-node="mo"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">淡</text><text data-variant="normal" transform="translate(600, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">黄</text><text data-variant="normal" transform="translate(1200, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">绿</text><text data-variant="normal" transform="translate(1800, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">色</text></g></g><g data-mml-node="mtd" transform="translate(23508.8, 0)"><g data-mml-node="mo"><use xlink:href="#MJX-1-TEX-N-2212"></use></g><g data-mml-node="mn" transform="translate(778, 0)"><use xlink:href="#MJX-1-TEX-N-31"></use><use xlink:href="#MJX-1-TEX-N-30" transform="translate(500, 0)"></use><use xlink:href="#MJX-1-TEX-N-31" transform="translate(1000, 0)"></use></g></g><g data-mml-node="mtd" transform="translate(28495.3, 0)"><g data-mml-node="mo"><use xlink:href="#MJX-1-TEX-N-2212"></use></g><g data-mml-node="mn" transform="translate(778, 0)"><use xlink:href="#MJX-1-TEX-N-33"></use><use xlink:href="#MJX-1-TEX-N-34" transform="translate(500, 0)"></use><use xlink:href="#MJX-1-TEX-N-2E" transform="translate(1000, 0)"></use><use xlink:href="#MJX-1-TEX-N-36" transform="translate(1278, 0)"></use></g></g></g><g data-mml-node="mtr" transform="translate(0, -735)"><g data-mml-node="mtd" transform="translate(1370, 0)"><g data-mml-node="mo"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">溴</text></g></g><g data-mml-node="mtd" transform="translate(3940, 0)"><g data-mml-node="mo"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">深</text><text data-variant="normal" transform="translate(600, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">红</text><text data-variant="normal" transform="translate(1200, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">棕</text><text data-variant="normal" transform="translate(1800, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">色</text><text data-variant="normal" transform="translate(2400, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">液</text><text data-variant="normal" transform="translate(3000, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">体</text></g></g><g data-mml-node="mtd" transform="translate(8910, 0)"><g data-mml-node="mo"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">红</text><text data-variant="normal" transform="translate(600, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">棕</text><text data-variant="normal" transform="translate(1200, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">色</text></g></g><g data-mml-node="mtd" transform="translate(12080, 0)"><g data-mml-node="mo"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">从</text><text data-variant="normal" transform="translate(600, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">上</text><text data-variant="normal" transform="translate(1200, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">到</text><text data-variant="normal" transform="translate(1800, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">下</text><text data-variant="normal" transform="translate(2400, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">逐</text><text data-variant="normal" transform="translate(3000, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">渐</text><text data-variant="normal" transform="translate(3600, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">减</text><text data-variant="normal" transform="translate(4200, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">小</text></g></g><g data-mml-node="mtd" transform="translate(18850, 0)"><g data-mml-node="mo"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">橙</text><text data-variant="normal" transform="translate(600, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">红</text><text data-variant="normal" transform="translate(1200, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">色</text></g></g><g data-mml-node="mtd" transform="translate(23619.8, 0)"><g data-mml-node="mo"><use xlink:href="#MJX-1-TEX-N-2212"></use></g><g data-mml-node="mn" transform="translate(778, 0)"><use xlink:href="#MJX-1-TEX-N-37"></use><use xlink:href="#MJX-1-TEX-N-2E" transform="translate(500, 0)"></use><use xlink:href="#MJX-1-TEX-N-32" transform="translate(778, 0)"></use></g></g><g data-mml-node="mtd" transform="translate(28634.3, 0)"><g data-mml-node="mn"><use xlink:href="#MJX-1-TEX-N-35"></use><use xlink:href="#MJX-1-TEX-N-38" transform="translate(500, 0)"></use><use xlink:href="#MJX-1-TEX-N-2E" transform="translate(1000, 0)"></use><use xlink:href="#MJX-1-TEX-N-37" transform="translate(1278, 0)"></use><use xlink:href="#MJX-1-TEX-N-38" transform="translate(1778, 0)"></use></g></g></g><g data-mml-node="mtr" transform="translate(0, -2205)"><g data-mml-node="mtd" transform="translate(1370, 0)"><g data-mml-node="mo"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">碘</text></g></g><g data-mml-node="mtd" transform="translate(4240, 0)"><g data-mml-node="mo"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">紫</text><text data-variant="normal" transform="translate(600, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">黑</text><text data-variant="normal" transform="translate(1200, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">色</text><text data-variant="normal" transform="translate(1800, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">固</text><text data-variant="normal" transform="translate(2400, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">体</text></g></g><g data-mml-node="mtd" transform="translate(9210, 0)"><g data-mml-node="mo"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">紫</text><text data-variant="normal" transform="translate(600, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">色</text></g></g><g data-mml-node="mtd" transform="translate(12080, 0)"><g data-mml-node="mo"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">从</text><text data-variant="normal" transform="translate(600, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">上</text><text data-variant="normal" transform="translate(1200, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">到</text><text data-variant="normal" transform="translate(1800, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">下</text><text data-variant="normal" transform="translate(2400, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">逐</text><text data-variant="normal" transform="translate(3000, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">渐</text><text data-variant="normal" transform="translate(3600, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">减</text><text data-variant="normal" transform="translate(4200, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">小</text></g></g><g data-mml-node="mtd" transform="translate(18850, 0)"><g data-mml-node="mo"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">黄</text><text data-variant="normal" transform="translate(600, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">褐</text><text data-variant="normal" transform="translate(1200, 0) matrix(1 0 0 -1 0 0)" font-size="884px" font-family="serif">色</text></g></g><g data-mml-node="mtd" transform="translate(23508.8, 0)"><g data-mml-node="mn"><use xlink:href="#MJX-1-TEX-N-31"></use><use xlink:href="#MJX-1-TEX-N-31" transform="translate(500, 0)"></use><use xlink:href="#MJX-1-TEX-N-32" transform="translate(1000, 0)"></use><use xlink:href="#MJX-1-TEX-N-2E" transform="translate(1500, 0)"></use><use xlink:href="#MJX-1-TEX-N-35" transform="translate(1778, 0)"></use></g></g><g data-mml-node="mtd" transform="translate(28634.3, 0)"><g data-mml-node="mn"><use xlink:href="#MJX-1-TEX-N-31"></use><use xlink:href="#MJX-1-TEX-N-38" transform="translate(500, 0)"></use><use xlink:href="#MJX-1-TEX-N-34" transform="translate(1000, 0)"></use><use xlink:href="#MJX-1-TEX-N-2E" transform="translate(1500, 0)"></use><use xlink:href="#MJX-1-TEX-N-34" transform="translate(1778, 0)"></use></g></g></g><line data-line="v" class="mjx-solid" x1="3405" y1="-2740.5" x2="3405" y2="3240.5"></line><line data-line="v" class="mjx-solid" x1="8075" y1="-2740.5" x2="8075" y2="3240.5"></line><line data-line="v" class="mjx-solid" x1="11545" y1="-2740.5" x2="11545" y2="3240.5"></line><line data-line="v" class="mjx-solid" x1="17415" y1="-2740.5" x2="17415" y2="3240.5"></line><line data-line="v" class="mjx-solid" x1="22085" y1="-2740.5" x2="22085" y2="3240.5"></line><line data-line="v" class="mjx-solid" x1="27210.6" y1="-2740.5" x2="27210.6" y2="3240.5"></line><line data-line="h" class="mjx-solid" x1="0" y1="1720" x2="32271.1" y2="1720"></line><line data-line="h" class="mjx-solid" x1="0" y1="250" x2="32271.1" y2="250"></line><line data-line="h" class="mjx-solid" x1="0" y1="-1220" x2="32271.1" y2="-1220"></line><rect data-frame="true" class="mjx-solid" width="32201.1" height="5911" x="35" y="-2705.5"></rect></g></g></g></svg></mjx-container>
and use web convert is perfect.
<svg xmlns="http://www.w3.org/2000/svg" width="91.704ex" height="13.532ex" role="img" focusable="false" viewBox="0 -3240.5 40533.1 5981" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" style="vertical-align: -6.2ex;"><defs><path id="MJX-10-TEX-N-2F" d="M423 750Q432 750 438 744T444 730Q444 725 271 248T92 -240Q85 -250 75 -250Q68 -250 62 -245T56 -231Q56 -221 230 257T407 740Q411 750 423 750Z"></path><path id="MJX-10-TEX-N-2212" d="M84 237T84 250T98 270H679Q694 262 694 250T679 230H98Q84 237 84 250Z"></path><path id="MJX-10-TEX-N-31" d="M213 578L200 573Q186 568 160 563T102 556H83V602H102Q149 604 189 617T245 641T273 663Q275 666 285 666Q294 666 302 660V361L303 61Q310 54 315 52T339 48T401 46H427V0H416Q395 3 257 3Q121 3 100 0H88V46H114Q136 46 152 46T177 47T193 50T201 52T207 57T213 61V578Z"></path><path id="MJX-10-TEX-N-30" d="M96 585Q152 666 249 666Q297 666 345 640T423 548Q460 465 460 320Q460 165 417 83Q397 41 362 16T301 -15T250 -22Q224 -22 198 -16T137 16T82 83Q39 165 39 320Q39 494 96 585ZM321 597Q291 629 250 629Q208 629 178 597Q153 571 145 525T137 333Q137 175 145 125T181 46Q209 16 250 16Q290 16 318 46Q347 76 354 130T362 333Q362 478 354 524T321 597Z"></path><path id="MJX-10-TEX-N-33" d="M127 463Q100 463 85 480T69 524Q69 579 117 622T233 665Q268 665 277 664Q351 652 390 611T430 522Q430 470 396 421T302 350L299 348Q299 347 308 345T337 336T375 315Q457 262 457 175Q457 96 395 37T238 -22Q158 -22 100 21T42 130Q42 158 60 175T105 193Q133 193 151 175T169 130Q169 119 166 110T159 94T148 82T136 74T126 70T118 67L114 66Q165 21 238 21Q293 21 321 74Q338 107 338 175V195Q338 290 274 322Q259 328 213 329L171 330L168 332Q166 335 166 348Q166 366 174 366Q202 366 232 371Q266 376 294 413T322 525V533Q322 590 287 612Q265 626 240 626Q208 626 181 615T143 592T132 580H135Q138 579 143 578T153 573T165 566T175 555T183 540T186 520Q186 498 172 481T127 463Z"></path><path id="MJX-10-TEX-N-34" d="M462 0Q444 3 333 3Q217 3 199 0H190V46H221Q241 46 248 46T265 48T279 53T286 61Q287 63 287 115V165H28V211L179 442Q332 674 334 675Q336 677 355 677H373L379 671V211H471V165H379V114Q379 73 379 66T385 54Q393 47 442 46H471V0H462ZM293 211V545L74 212L183 211H293Z"></path><path id="MJX-10-TEX-N-2E" d="M78 60Q78 84 95 102T138 120Q162 120 180 104T199 61Q199 36 182 18T139 0T96 17T78 60Z"></path><path id="MJX-10-TEX-N-36" d="M42 313Q42 476 123 571T303 666Q372 666 402 630T432 550Q432 525 418 510T379 495Q356 495 341 509T326 548Q326 592 373 601Q351 623 311 626Q240 626 194 566Q147 500 147 364L148 360Q153 366 156 373Q197 433 263 433H267Q313 433 348 414Q372 400 396 374T435 317Q456 268 456 210V192Q456 169 451 149Q440 90 387 34T253 -22Q225 -22 199 -14T143 16T92 75T56 172T42 313ZM257 397Q227 397 205 380T171 335T154 278T148 216Q148 133 160 97T198 39Q222 21 251 21Q302 21 329 59Q342 77 347 104T352 209Q352 289 347 316T329 361Q302 397 257 397Z"></path><path id="MJX-10-TEX-N-37" d="M55 458Q56 460 72 567L88 674Q88 676 108 676H128V672Q128 662 143 655T195 646T364 644H485V605L417 512Q408 500 387 472T360 435T339 403T319 367T305 330T292 284T284 230T278 162T275 80Q275 66 275 52T274 28V19Q270 2 255 -10T221 -22Q210 -22 200 -19T179 0T168 40Q168 198 265 368Q285 400 349 489L395 552H302Q128 552 119 546Q113 543 108 522T98 479L95 458V455H55V458Z"></path><path id="MJX-10-TEX-N-32" d="M109 429Q82 429 66 447T50 491Q50 562 103 614T235 666Q326 666 387 610T449 465Q449 422 429 383T381 315T301 241Q265 210 201 149L142 93L218 92Q375 92 385 97Q392 99 409 186V189H449V186Q448 183 436 95T421 3V0H50V19V31Q50 38 56 46T86 81Q115 113 136 137Q145 147 170 174T204 211T233 244T261 278T284 308T305 340T320 369T333 401T340 431T343 464Q343 527 309 573T212 619Q179 619 154 602T119 569T109 550Q109 549 114 549Q132 549 151 535T170 489Q170 464 154 447T109 429Z"></path><path id="MJX-10-TEX-N-35" d="M164 157Q164 133 148 117T109 101H102Q148 22 224 22Q294 22 326 82Q345 115 345 210Q345 313 318 349Q292 382 260 382H254Q176 382 136 314Q132 307 129 306T114 304Q97 304 95 310Q93 314 93 485V614Q93 664 98 664Q100 666 102 666Q103 666 123 658T178 642T253 634Q324 634 389 662Q397 666 402 666Q410 666 410 648V635Q328 538 205 538Q174 538 149 544L139 546V374Q158 388 169 396T205 412T256 420Q337 420 393 355T449 201Q449 109 385 44T229 -22Q148 -22 99 32T50 154Q50 178 61 192T84 210T107 214Q132 214 148 197T164 157Z"></path><path id="MJX-10-TEX-N-38" d="M70 417T70 494T124 618T248 666Q319 666 374 624T429 515Q429 485 418 459T392 417T361 389T335 371T324 363L338 354Q352 344 366 334T382 323Q457 264 457 174Q457 95 399 37T249 -22Q159 -22 101 29T43 155Q43 263 172 335L154 348Q133 361 127 368Q70 417 70 494ZM286 386L292 390Q298 394 301 396T311 403T323 413T334 425T345 438T355 454T364 471T369 491T371 513Q371 556 342 586T275 624Q268 625 242 625Q201 625 165 599T128 534Q128 511 141 492T167 463T217 431Q224 426 228 424L286 386ZM250 21Q308 21 350 55T392 137Q392 154 387 169T375 194T353 216T330 234T301 253T274 270Q260 279 244 289T218 306L210 311Q204 311 181 294T133 239T107 157Q107 98 150 60T250 21Z"></path></defs><g stroke="currentColor" fill="currentColor" stroke-width="0" transform="matrix(1 0 0 -1 0 0)"><g data-mml-node="math"><g data-mml-node="mtable"><g data-mml-node="mtr" transform="translate(0, 2205)"><g data-mml-node="mtd" transform="translate(470, 0)"><g data-mml-node="mo"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">卤</text><text data-variant="normal" transform="translate(817.4, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">素</text><text data-variant="normal" transform="translate(1634.8, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">单</text><text data-variant="normal" transform="translate(2452.3, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">质</text></g></g><g data-mml-node="mtd" transform="translate(5218.4, 0)"><g data-mml-node="mo"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">颜</text><text data-variant="normal" transform="translate(817.4, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">色</text><text data-variant="normal" transform="translate(1634.8, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">和</text><text data-variant="normal" transform="translate(2452.3, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">状</text><text data-variant="normal" transform="translate(3269.7, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">态</text></g></g><g data-mml-node="mtd" transform="translate(10784.2, 0)"><g data-mml-node="mo"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">蒸</text><text data-variant="normal" transform="translate(817.4, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">气</text><text data-variant="normal" transform="translate(1634.8, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">颜</text><text data-variant="normal" transform="translate(2452.3, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">色</text></g></g><g data-mml-node="mtd" transform="translate(15532.6, 0)"><g data-mml-node="mo"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">在</text><text data-variant="normal" transform="translate(817.4, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">水</text><text data-variant="normal" transform="translate(1634.8, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">中</text><text data-variant="normal" transform="translate(2452.3, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">的</text><text data-variant="normal" transform="translate(3269.7, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">溶</text><text data-variant="normal" transform="translate(4087.1, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">解</text><text data-variant="normal" transform="translate(4904.5, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">度</text></g></g><g data-mml-node="mtd" transform="translate(22733.3, 0)"><g data-mml-node="mo"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">水</text><text data-variant="normal" transform="translate(817.4, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">溶</text><text data-variant="normal" transform="translate(1634.8, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">液</text><text data-variant="normal" transform="translate(2452.3, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">的</text><text data-variant="normal" transform="translate(3269.7, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">颜</text><text data-variant="normal" transform="translate(4087.1, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">色</text></g></g><g data-mml-node="mtd" transform="translate(28707.8, 0)"><g data-mml-node="mo"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">熔</text><text data-variant="normal" transform="translate(817.4, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">点</text></g><g data-mml-node="TeXAtom" data-mjx-texclass="ORD" transform="translate(1912.6, 0)"><g data-mml-node="mo"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#MJX-10-TEX-N-2F"></use></g></g><g data-mml-node="mo" transform="translate(2690.4, 0)"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">摄</text><text data-variant="normal" transform="translate(817.4, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">氏</text><text data-variant="normal" transform="translate(1634.8, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">度</text></g></g><g data-mml-node="mtd" transform="translate(34920.5, 0)"><g data-mml-node="mo"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">沸</text><text data-variant="normal" transform="translate(817.4, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">点</text></g><g data-mml-node="TeXAtom" data-mjx-texclass="ORD" transform="translate(1912.6, 0)"><g data-mml-node="mo"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#MJX-10-TEX-N-2F"></use></g></g><g data-mml-node="mo" transform="translate(2690.4, 0)"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">摄</text><text data-variant="normal" transform="translate(817.4, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">氏</text><text data-variant="normal" transform="translate(1634.8, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">度</text></g></g></g><g data-mml-node="mtr" transform="translate(0, 735)"><g data-mml-node="mtd" transform="translate(1696.1, 0)"><g data-mml-node="mo"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">氯</text></g></g><g data-mml-node="mtd" transform="translate(6035.8, 0)"><g data-mml-node="mo"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">黄</text><text data-variant="normal" transform="translate(817.4, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">绿</text><text data-variant="normal" transform="translate(1634.8, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">色</text></g></g><g data-mml-node="mtd" transform="translate(11192.9, 0)"><g data-mml-node="mo"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">黄</text><text data-variant="normal" transform="translate(817.4, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">绿</text><text data-variant="normal" transform="translate(1634.8, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">色</text></g></g><g data-mml-node="mtd" transform="translate(15123.9, 0)"><g data-mml-node="mo"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">从</text><text data-variant="normal" transform="translate(817.4, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">上</text><text data-variant="normal" transform="translate(1634.8, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">到</text><text data-variant="normal" transform="translate(2452.3, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">下</text><text data-variant="normal" transform="translate(3269.7, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">逐</text><text data-variant="normal" transform="translate(4087.1, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">渐</text><text data-variant="normal" transform="translate(4904.5, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">减</text><text data-variant="normal" transform="translate(5722, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">小</text></g></g><g data-mml-node="mtd" transform="translate(23550.7, 0)"><g data-mml-node="mo"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">淡</text><text data-variant="normal" transform="translate(817.4, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">黄</text><text data-variant="normal" transform="translate(1634.8, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">绿</text><text data-variant="normal" transform="translate(2452.3, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">色</text></g></g><g data-mml-node="mtd" transform="translate(30140.1, 0)"><g data-mml-node="mo"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#MJX-10-TEX-N-2212"></use></g><g data-mml-node="mn" transform="translate(778, 0)"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#MJX-10-TEX-N-31"></use><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#MJX-10-TEX-N-30" transform="translate(500, 0)"></use><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#MJX-10-TEX-N-31" transform="translate(1000, 0)"></use></g></g><g data-mml-node="mtd" transform="translate(36213.8, 0)"><g data-mml-node="mo"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#MJX-10-TEX-N-2212"></use></g><g data-mml-node="mn" transform="translate(778, 0)"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#MJX-10-TEX-N-33"></use><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#MJX-10-TEX-N-34" transform="translate(500, 0)"></use><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#MJX-10-TEX-N-2E" transform="translate(1000, 0)"></use><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#MJX-10-TEX-N-36" transform="translate(1278, 0)"></use></g></g></g><g data-mml-node="mtr" transform="translate(0, -735)"><g data-mml-node="mtd" transform="translate(1696.1, 0)"><g data-mml-node="mo"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">溴</text></g></g><g data-mml-node="mtd" transform="translate(4809.7, 0)"><g data-mml-node="mo"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">深</text><text data-variant="normal" transform="translate(817.4, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">红</text><text data-variant="normal" transform="translate(1634.8, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">棕</text><text data-variant="normal" transform="translate(2452.3, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">色</text><text data-variant="normal" transform="translate(3269.7, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">液</text><text data-variant="normal" transform="translate(4087.1, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">体</text></g></g><g data-mml-node="mtd" transform="translate(11192.9, 0)"><g data-mml-node="mo"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">红</text><text data-variant="normal" transform="translate(817.4, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">棕</text><text data-variant="normal" transform="translate(1634.8, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">色</text></g></g><g data-mml-node="mtd" transform="translate(15123.9, 0)"><g data-mml-node="mo"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">从</text><text data-variant="normal" transform="translate(817.4, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">上</text><text data-variant="normal" transform="translate(1634.8, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">到</text><text data-variant="normal" transform="translate(2452.3, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">下</text><text data-variant="normal" transform="translate(3269.7, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">逐</text><text data-variant="normal" transform="translate(4087.1, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">渐</text><text data-variant="normal" transform="translate(4904.5, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">减</text><text data-variant="normal" transform="translate(5722, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">小</text></g></g><g data-mml-node="mtd" transform="translate(23959.4, 0)"><g data-mml-node="mo"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">橙</text><text data-variant="normal" transform="translate(817.4, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">红</text><text data-variant="normal" transform="translate(1634.8, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">色</text></g></g><g data-mml-node="mtd" transform="translate(30251.1, 0)"><g data-mml-node="mo"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#MJX-10-TEX-N-2212"></use></g><g data-mml-node="mn" transform="translate(778, 0)"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#MJX-10-TEX-N-37"></use><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#MJX-10-TEX-N-2E" transform="translate(500, 0)"></use><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#MJX-10-TEX-N-32" transform="translate(778, 0)"></use></g></g><g data-mml-node="mtd" transform="translate(36352.8, 0)"><g data-mml-node="mn"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#MJX-10-TEX-N-35"></use><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#MJX-10-TEX-N-38" transform="translate(500, 0)"></use><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#MJX-10-TEX-N-2E" transform="translate(1000, 0)"></use><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#MJX-10-TEX-N-37" transform="translate(1278, 0)"></use><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#MJX-10-TEX-N-38" transform="translate(1778, 0)"></use></g></g></g><g data-mml-node="mtr" transform="translate(0, -2205)"><g data-mml-node="mtd" transform="translate(1696.1, 0)"><g data-mml-node="mo"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">碘</text></g></g><g data-mml-node="mtd" transform="translate(5218.4, 0)"><g data-mml-node="mo"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">紫</text><text data-variant="normal" transform="translate(817.4, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">黑</text><text data-variant="normal" transform="translate(1634.8, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">色</text><text data-variant="normal" transform="translate(2452.3, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">固</text><text data-variant="normal" transform="translate(3269.7, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">体</text></g></g><g data-mml-node="mtd" transform="translate(11601.6, 0)"><g data-mml-node="mo"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">紫</text><text data-variant="normal" transform="translate(817.4, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">色</text></g></g><g data-mml-node="mtd" transform="translate(15123.9, 0)"><g data-mml-node="mo"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">从</text><text data-variant="normal" transform="translate(817.4, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">上</text><text data-variant="normal" transform="translate(1634.8, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">到</text><text data-variant="normal" transform="translate(2452.3, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">下</text><text data-variant="normal" transform="translate(3269.7, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">逐</text><text data-variant="normal" transform="translate(4087.1, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">渐</text><text data-variant="normal" transform="translate(4904.5, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">减</text><text data-variant="normal" transform="translate(5722, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">小</text></g></g><g data-mml-node="mtd" transform="translate(23959.4, 0)"><g data-mml-node="mo"><text data-variant="normal" transform="matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">黄</text><text data-variant="normal" transform="translate(817.4, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">褐</text><text data-variant="normal" transform="translate(1634.8, 0) matrix(1 0 0 -1 0 0)" font-size="817.6px" font-family="serif">色</text></g></g><g data-mml-node="mtd" transform="translate(30140.1, 0)"><g data-mml-node="mn"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#MJX-10-TEX-N-31"></use><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#MJX-10-TEX-N-31" transform="translate(500, 0)"></use><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#MJX-10-TEX-N-32" transform="translate(1000, 0)"></use><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#MJX-10-TEX-N-2E" transform="translate(1500, 0)"></use><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#MJX-10-TEX-N-35" transform="translate(1778, 0)"></use></g></g><g data-mml-node="mtd" transform="translate(36352.8, 0)"><g data-mml-node="mn"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#MJX-10-TEX-N-31"></use><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#MJX-10-TEX-N-38" transform="translate(500, 0)"></use><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#MJX-10-TEX-N-34" transform="translate(1000, 0)"></use><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#MJX-10-TEX-N-2E" transform="translate(1500, 0)"></use><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#MJX-10-TEX-N-34" transform="translate(1778, 0)"></use></g></g></g><line data-line="v" class="mjx-solid" x1="4274.7" y1="-2740.5" x2="4274.7" y2="3240.5"></line><line data-line="v" class="mjx-solid" x1="10249.2" y1="-2740.5" x2="10249.2" y2="3240.5"></line><line data-line="v" class="mjx-solid" x1="14588.9" y1="-2740.5" x2="14588.9" y2="3240.5"></line><line data-line="v" class="mjx-solid" x1="22198.3" y1="-2740.5" x2="22198.3" y2="3240.5"></line><line data-line="v" class="mjx-solid" x1="28172.8" y1="-2740.5" x2="28172.8" y2="3240.5"></line><line data-line="v" class="mjx-solid" x1="34385.5" y1="-2740.5" x2="34385.5" y2="3240.5"></line><line data-line="h" class="mjx-solid" x1="0" y1="1720" x2="40533.1" y2="1720"></line><line data-line="h" class="mjx-solid" x1="0" y1="250" x2="40533.1" y2="250"></line><line data-line="h" class="mjx-solid" x1="0" y1="-1220" x2="40533.1" y2="-1220"></line><rect data-frame="true" class="mjx-solid" width="40463.1" height="5911" x="35" y="-2705.5"></rect></g></g></g></svg>

speech demos issues

As discussed with @zorkow.

Besides #41 there are other issues with the demos

• container is stripped by default - but the container has the aria-label
• the container lacks a suitable role - custom elements have role=generic which does not allow for aria-label. With a flat label approach of these demos, I tend to go with img for simplicity's sake.

I also had issues with xml validation but I don't recall if that was a problem with the demo or with the jsdom/litedom adaptors.

Direct tex2svg example rendering as blank when I paste into HTML file

I'm trying to run the tex2svg example and finding that it renders as a blank page when I try to paste it into an HTML file. I'm trying to paste the CSS and SVG output respectively into an HTML page skeleton like this:

<html>
    <head>
        <style>
        --css output...
        </style>
    </head>

    <body>
        <mjx-container> ... </mjx-container>
    </body>
</html>

A full Gist with this HTML file is here.

Am I misunderstanding how this is supposed to work? I tried the same thing with the tex2chtml example and it worked so I'm wondering what I'm missing with tex2svg.

Output differ form Mathjax 2.7

Hi,

I am converting the below mathml to svg using both 2.7 and latest mathjax,

<mml:math><mml:mrow><mml:mi>d</mml:mi><mml:mi mathvariant='bold-script'>l</mml:mi></mml:mrow></mml:math>

When I render the output in browser both are same. but when i edit and see the svg, the new one generated has tag in it. however the one generated using 2.7 doesn't have.

Output form 2.7:

<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="1.958ex" height="2.009ex" style="vertical-align: -0.255ex;" viewBox="0 -755.5 843 865.1" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" aria-labelledby="MathJax-SVG-1-Title">
<title id="MathJax-SVG-1-Title">d bold-script l</title>
<defs aria-hidden="true">
<path stroke-width="1" id="E1-MJMATHI-64" d="M366 683Q367 683 438 688T511 694Q523 694 523 686Q523 679 450 384T375 83T374 68Q374 26 402 26Q411 27 422 35Q443 55 463 131Q469 151 473 152Q475 153 483 153H487H491Q506 153 506 145Q506 140 503 129Q490 79 473 48T445 8T417 -8Q409 -10 393 -10Q359 -10 336 5T306 36L300 51Q299 52 296 50Q294 48 292 46Q233 -10 172 -10Q117 -10 75 30T33 157Q33 205 53 255T101 341Q148 398 195 420T280 442Q336 442 364 400Q369 394 369 396Q370 400 396 505T424 616Q424 629 417 632T378 637H357Q351 643 351 645T353 664Q358 683 366 683ZM352 326Q329 405 277 405Q242 405 210 374T160 293Q131 214 119 129Q119 126 119 118T118 106Q118 61 136 44T179 26Q233 26 290 98L298 109L352 326Z"></path>
<path stroke-width="1" id="E1-MJMAINB-6C" d="M43 686L134 690Q225 694 226 694H232V62H301V0H292Q274 3 170 3Q67 3 49 0H40V62H109V332Q109 387 109 453T110 534Q110 593 108 605T94 620Q80 624 53 624H40V686H43Z"></path>
</defs>
<g stroke="currentColor" fill="currentColor" stroke-width="0" transform="matrix(1 0 0 -1 0 0)" aria-hidden="true">
 <use xlink:href="#E1-MJMATHI-64" x="0" y="0"></use>
 <use xlink:href="#E1-MJMAINB-6C" x="523" y="0"></use>
</g>
</svg>

Output from latest:

<mjx-container class="MathJax" jax="SVG"><svg style="vertical-align: -0.452ex" xmlns="http://www.w3.org/2000/svg" width="3.891ex" height="2.149ex" role="img" focusable="false" viewBox="0 -750 1720 950" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="MJX-1-TEX-I-1D451" d="M366 683Q367 683 438 688T511 694Q523 694 523 686Q523 679 450 384T375 83T374 68Q374 26 402 26Q411 27 422 35Q443 55 463 131Q469 151 473 152Q475 153 483 153H487H491Q506 153 506 145Q506 140 503 129Q490 79 473 48T445 8T417 -8Q409 -10 393 -10Q359 -10 336 5T306 36L300 51Q299 52 296 50Q294 48 292 46Q233 -10 172 -10Q117 -10 75 30T33 157Q33 205 53 255T101 341Q148 398 195 420T280 442Q336 442 364 400Q369 394 369 396Q370 400 396 505T424 616Q424 629 417 632T378 637H357Q351 643 351 645T353 664Q358 683 366 683ZM352 326Q329 405 277 405Q242 405 210 374T160 293Q131 214 119 129Q119 126 119 118T118 106Q118 61 136 44T179 26Q233 26 290 98L298 109L352 326Z"></path></defs><g stroke="currentColor" fill="currentColor" stroke-width="0" transform="matrix(1 0 0 -1 0 0)"><g data-mml-node="math"><g data-mml-node="mrow"><g data-mml-node="mi"><use xlink:href="#MJX-1-TEX-I-1D451"></use></g><g data-mml-node="mi" transform="translate(520, 0)"><text data-variant="bold-script" transform="matrix(1 0 0 -1 0 0)" font-size="884px">�</text></g></g></g></g></svg></mjx-container>

I need the latest output to be like the one with older version. Please suggest me how can i achieve this?

How do I configure Mathjax?

How do I configure these options:
http://docs.mathjax.org/en/latest/options/document.html?highlight=Configuration#the-configuration-block
In the context of this demo:
https://github.com/mathjax/MathJax-demos-node/blob/master/direct/tex2chtml .

Thanks,

Non-English characters overlaps and Misplaced \hline

MathJax version 2	MathJax version 3	bug description
		Version 2 is normal, and the text in version 3 overlaps.This situation occurs in non-English characters.Chinese characters are used in the example
		Version 2 can be rendered normally, and version 3 give an error of Misplaced \hline

三生三世十里桃花 \approx 10^{10}秒

\begin{array} {|c|c|c|} \hline
\text{11} & \text{12} & \text{13} \\
\hline 
\text{21} & \text{22} & \text{23} \\
\hline 
\text{31} & \text{32} & \text{33} \\
\hline  
\end{array}

mml2svg under component is rendering twice

Hi I used to convert the below mathml equation using component/mml2svg, i am getting out rendered twice

<mml:math><mml:mrow><mml:mtext>&#x0024;</mml:mtext><mml:mn>1.60</mml:mn><mml:mo>/</mml:mo><mml:mtext>&#x00A3;</mml:mtext></mml:mrow></mml:math>

Output:

Can someone assist me on this?

example using jsdom adaptor

I ran into a bug in the lite adaptor and can't figure out how to quickly switch out the jsdom one.

A code snippet would be great.

Using MathJax node in an ES module

I have a node project which is an ES module (package.json contains "type": "module"). I'm trying to use MathJax to typeset an HTML page server-side. The demos use the shebang #! /usr/bin/env -S node -r esm, which preloads esm. This allows mixing CJS module (require() and module.exports) and ESM (import and export) syntax. If I use the same shebang, I get the following error:

Error [ERR_REQUIRE_ESM]: require() of ES Module /path/to/project/file.js not supported.
Instead change the require of file.js in null to a dynamic import() which is available in all CommonJS modules.] {
  code: 'ERR_REQUIRE_ESM'
}

If I change the shebang to #!/usr/bin/env node, mixed CJSM and ESM syntax no longer works:

(node:23193) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/path/to/project/node_modules/mathjax-full/components/src/node-main/node-main.js:83
export {init};
^^^^^^

SyntaxError: Unexpected token 'export'

Using esm isn't really an acceptable option for me in the first place, as it hasn't seen any commits since 2019 and doesn't support modern Javascript features like optional chaining. Therefore, the real issue it seems to me is that MathJax is mixing CJSM and ESM syntax.

Is there any way I can use MathJax in an ES module?

Version info:
node v19.2.0
[email protected]
└[email protected]

Is it faster than MathJax-node?

Is it faster than MathJax-node?

SVG Output with Node Different from Web Rendered Content?

I'm trying out the simple textosvg demo. This is a stackblitz of the CDN rendering of the tex:

https://stackblitz.com/edit/mathjax-cdn-demo-custom-markup

This is the Latex string:

    <div>
      $$MAD = \frac{\sum_{i=1}^n | x_i - \bar{x} |} n$$
    </div>

When I take that and put it in the SVG demo like this:

#! /usr/bin/env -S node -r esm

/*************************************************************************
 *
 *  simple/tex2svg
 *
 *  Uses MathJax v3 to convert a TeX string to an SVG string.
 *
 * ----------------------------------------------------------------------
 *
 *  Copyright (c) 2019 The MathJax Consortium
 *
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */


//
//  The default TeX packages to use
//
const PACKAGES = 'base, autoload, require, ams, newcommand';

const latex = `$$MAD = \frac{\sum_{i=1}^n | x_i - \bar{x} |} n$$`


//
//  Minimal CSS needed for stand-alone image
//
const CSS = [
  'svg a{fill:blue;stroke:blue}',
  '[data-mml-node="merror"]>g{fill:red;stroke:red}',
  '[data-mml-node="merror"]>rect[data-background]{fill:yellow;stroke:none}',
  '[data-frame],[data-line]{stroke-width:70px;fill:none}',
  '.mjx-dashed{stroke-dasharray:140}',
  '.mjx-dotted{stroke-linecap:round;stroke-dasharray:0,140}',
  'use[data-c]{stroke-width:3px}'
].join('');

//
//  Get the command-line arguments
//
var argv = require('yargs')
    .demand(0).strict()
    .usage('$0 [options] "math" > file.svg')
    .options({
        inline: {
            boolean: true,
            describe: "process as inline math"
        },
        em: {
            default: 16,
            describe: 'em-size in pixels'
        },
        ex: {
            default: 8,
            describe: 'ex-size in pixels'
        },
        width: {
            default: 80 * 16,
            describe: 'width of container in pixels'
        },
        packages: {
            default: PACKAGES,
            describe: 'the packages to use, e.g. "base, ams"; use "*" to represent the default packages, e.g, "*, bbox"'
        },
        styles: {
            boolean: true,
            default: true,
            describe: 'include css styles for stand-alone image'
        },
        container: {
            boolean: true,
            describe: 'include <mjx-container> element'
        },
        css: {
            boolean: true,
            describe: 'output the required CSS rather than the HTML itself'
        },
        fontCache: {
            boolean: true,
            default: true,
            describe: 'whether to use a local font cache or not'
        },
        assistiveMml: {
            boolean: true,
            default: false,
            describe: 'whether to include assistive MathML output'
        },
        dist: {
            boolean: true,
            default: false,
            describe: 'true to use webpacked version, false to use MathJax source files'
        }
    })
    .argv;

//
// Load MathJax and initialize MathJax and typeset the given math
//
require('mathjax-full').init({
    //
    //  The MathJax configuration
    //
    options: {
        enableAssistiveMml: argv.assistiveMml
    },
    loader: {
        source: (argv.dist ? {} : require('mathjax-full/components/src/source.js').source),
        load: ['adaptors/liteDOM', 'tex-svg']
    },
    tex: {
        packages: argv.packages.replace('\*', PACKAGES).split(/\s*,\s*/)
    },
    svg: {
        fontCache: (argv.fontCache ? 'local' : 'none')
    },
    startup: {
        typeset: false
    }
}).then((MathJax) => {
    //
    //  Typeset and display the math
    //
    MathJax.tex2svgPromise(latex, {
        display: !argv.inline,
        em: argv.em,
        ex: argv.ex,
        containerWidth: argv.width
    }).then((node) => {
        const adaptor = MathJax.startup.adaptor;
        //
        //  If the --css option was specified, output the CSS,
        //  Otherwise, output the typeset math as SVG
        //
        if (argv.css) {
            console.log(adaptor.textContent(MathJax.svgStylesheet()));
        } else {
            let html = (argv.container ? adaptor.outerHTML(node) : adaptor.innerHTML(node));
            console.log(argv.styles ? html.replace(/<defs>/, `<defs><style>${CSS}</style>`) : html);
        };
    });
}).catch(err => console.log(err));

It produces this:

https://stackblitz.com/edit/mathjax-svg-node?file=index.html

And the output does not render properly. Any ideas?

How can I load my external package by mathjax-full v3.0.5 in Node Env

I want to use tex2mml api, and my code as follow:

  const adaptor = liteAdaptor();
  const handler = RegisterHTMLHandler(adaptor);
  AssistiveMmlHandler(handler);

  const packages = ['mhchem', 'extpfeil', 'unicode', 'boldsymbol', 'cancel', 'color', 'enclose'];

  const tex = new TeX({
      packages,
      macros: {
          ...
      },
  });

  const tex2mml = new HTMLDocument('', liteAdaptor(), { InputJax: tex });

  const visitor = new SerializedMmlVisitor();
  // @ts-expect-error
  const toMathML = (node) => visitor.visitTree(node, tex2mml);

But, I want to load external package to parser others LaTeX, like siunitx(for mathjax v3) package.
And then , I try to use loader module

import {Loader, CONFIG} from 'mathjax-full/js/components/loader.js';
import {combineConfig} from 'mathjax-full/js/components/global.js';

const init = (config = {}) => {
    combineConfig(global.MathJax.config, config);
    return Loader.load(...CONFIG.load)
      .then(() => CONFIG.ready())
      .then(() => global.MathJax)                    // Pass MathJax global as argument to subsequent .then() calls
      .catch(error => CONFIG.failed(error));
}

const defaultOpt = {
        loader: {
            paths: {
                mathjax: 'mathjax-full/es5',
                custom: '../pkg'
            },
            load: ['input/tex', 'adaptors/liteDOM', '[custom]/siunitx']
        },
        tex: {
            packages: ['mhchem', 'extpfeil', 'unicode', 'boldsymbol', 'cancel', 'color', 'enclose'],
            macros: {
                    ...
            },
        },
    };

// get error: document is not defined
init(defaultOpt);

I trace this error , and find when load packages, it use script tag

document.createElement('script');

How can I fix it? Do u have some good idea? Thank u very much!

'No version information available...' messages output when using simple/tex2chtml.js

When executing simple/tex2chtml '', the output is

No version information available for component adaptors/liteDOM
No version information available for component adaptors/liteDOM
No version information available for component tex-chtml
No version information available for component tex-chtml
<mjx-container class="MathJax" jax="CHTML" display="true"><mjx-math display="true" style="margin-left: 0; margin-right: 0;" class=" MJX-TEX"></mjx-math></mjx-container>

When using the component, preload, or direct versions of tex2chtml, only the html is printed without the warnings.

Version info:
[email protected]
[email protected]
Node.js v18.8.0

Force MathJax to try to render the equation even though there are syntax errors (and ideally: to automatically fix the errors it self)

Hello,

When using direct/tex2chtml-page, if there are LaTeX syntax errors in a formula, then the original code is displayed (and highlighted):

I would like to force MathJax to try to render the formula as best as it can, similarly to the results obtained from the MathJax demo page:

So my first question is: How can we modify tex2chtml-page to obtain similar results than the above MathJax demo?

Moreover, when inspecting the output HTML, I see that MathJax knew exactly what was wrong:

<merror data-mjx-error="\ldots is only supported in math mode" title="\ldots is only supported in math mode"><mtext> \{(x_{1},\ldots,x_{d}) : \mbox{ $a_{i} &lt; x_{i} \leq b_{i}$ for $i = 1$, \ldots, $d$}\}. </mtext></merror>

A simple fix seems to be just enclosing \ldots with the dollar signs. Can MathJax do that?

The complete example HTML file for your convenience:

<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
  <title>Test</title>
 </head>
 <body>
    $$ \{(x_{1},\ldots,x_{d}) : \mbox{ $a_{i} &lt; x_{i} \leq b_{i}$ for $i = 1$, \ldots, $d$}\}. $$
 </body>
</html>

Thank you very much in advance for your help!

Can't run node tex2chtml-page demo with mathjax 3

First of all, if I can get this to work, it will be absolutely amazing for my 3D math for games book, which I produced in LaTeX but am working on converting to native web. So I am a huge fan of this project and hope to be able to help you make it easier to use out of the box.

I cannot get the tex2chtml-page node demo to run. Here's an example run. Starting from an empty directory:

$ wget https://raw.githubusercontent.com/mathjax/MathJax-demos-node/master/simple/tex2chtml-page
(succeeds)
$ npm install esm yargs mathjax-full@3

added 23 packages, and audited 24 packages in 2s

2 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
$ node -r esm tex2chtml-page --version
unknown
$ node -r esm tex2chtml-page ../web/cartesianspace.html
MathJax(?): Can't find handler for document
MathJax(?): Can't find handler for document
TypeError: Cannot read property 'startup' of undefined
    at /home/fletcherd/gamemath/mathjax/tex2chtml-page:95:29
    at processTicksAndRejections (node:internal/process/task_queues:94:5)
    at process.runNextTicks [as _tickCallback] (node:internal/process/task_queues:63:3)
    at /home/fletcherd/gamemath/mathjax/node_modules/esm/esm.js:1:34535
    at /home/fletcherd/gamemath/mathjax/node_modules/esm/esm.js:1:34176
    at process.<anonymous> (/home/fletcherd/gamemath/mathjax/node_modules/esm/esm.js:1:34506)
    at Function.<anonymous> (/home/fletcherd/gamemath/mathjax/node_modules/esm/esm.js:1:296856)
    at Function.<anonymous> (/home/fletcherd/gamemath/mathjax/node_modules/esm/esm.js:1:296555)
    at Function.<anonymous> (/home/fletcherd/gamemath/mathjax/node_modules/esm/esm.js:1:284879)
    at Object.apply (/home/fletcherd/gamemath/mathjax/node_modules/esm/esm.js:1:199341)

Any idea what I might be doing wrong?

I'm using ubuntu bionic. (Side note: bionic does not support "env -S", which is used in your shebangs. Bionic is only 3 years old, and the only stable ubuntu release that supports the env -S syntax was released April of last year.)

npm run make-components doesn't work in Windows 10

E:\Work\Downloads\mathjax3\mj3-demos-node>npm install

> [email protected] postinstall E:\Work\Downloads\mathjax3\mj3-demos-node\node_modules\core-js
> node scripts/postinstall

Thank you for using core-js (https://github.com/zloirock/core-js)!

Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js (https://github.com/zloirock) is looking for a good job -)


> [email protected] postinstall E:\Work\Downloads\mathjax3\mj3-demos-node\node_modules\webpack-cli
> node ./bin/opencollective.js



                            Thanks for using Webpack!
                 Please consider donating to our Open Collective
                        to help us maintain this package.



                 Donate: https://opencollective.com/webpack/donate


npm WARN rollback Rolling back [email protected] failed (this is probably harmless): EPERM: operation not permitted, lstat 'E:\Work\Downloads\mathjax3\mj3-demos-node\node_modules\fsevents\node_modules'
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 533 packages from 240 contributors and audited 7552 packages in 7.087s
found 0 vulnerabilities


E:\Work\Downloads\mathjax3\mj3-demos-node>npm run make-components

> [email protected] make-components E:\Work\Downloads\mathjax3\mj3-demos-node
> cd node_modules/mathjax3/components && bin/makeAll src

'bin' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] make-components: `cd node_modules/mathjax3/components && bin/makeAll src`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] make-components script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Jan\AppData\Roaming\npm-cache\_logs\2019-05-29T08_50_48_574Z-debug.log

MathML symbols are not converted correctly

We use MathJax to convert MathML to SVG. Unfortunately, some symbols are not converted correctly. The following symbols are not converted correctly:

Volume Integral U+2230
Surface Integral U+222F
Circled division sign U+2A38

The following steps are necessary to reproduce the problem:

1. Unzip the provided Folder
   MathJax.zip

2. change into the Direcotry

3. run "npm i"

4. run "node convert.js"

Now the imported XML strings with the MathML and the SVG elements generated for them should be outputed.

"https://www.svgviewer.dev/" can be used to check the SVG.

I am happy to answer any additional questions.

tex2svg-page: error handling non-math symbols

Running tex2svg-page on the following html file succeeds:

<html>
  <body>
    <div>$$ x^2 $$</div>
  </body>
</html>

However, once you add the copyright symbol, anywhere in the page, it fails:

<html>
  <body>
    <div>$$ x^2 $$</div>
    &copy;
  </body>
</html>

with the following error:

MathJax(?): Can't find handler for document
(node:2116796) UnhandledPromiseRejectionWarning: Error: Cannot find module 'mathjax-full/es5/util/entities/c.js'

This behavior isn't changed even if the symbol is placed inside a footer tag, and the footer tag added to ignore in the mathjax configuration. If my understanding here is correct, this suggests two possible issues:

1. There are missing files in the node mathjax distribution
2. Mathjax processes areas of html that it should ignore

My use-case is pre-rendering math for a static website -I'm specifically looking for a script that will output an html file with math rendered in the same way as if the mathjax javascript were included on the page, and tex2svg-page seemed like a perfect fit here. I'd really appreciate any guidance you might have on these issues.

[Question] Utility API for replacing latex expressions with generated content?

Hi,

Per this question we obtain an array of ProtoItem instances.

I take the latex in each instance and generate the corresponding SVG. So I end up with another array of SVG, where each SVG rendering matches the corresponding MathItem instance.

I was wondering if MathJax has an API for merging the generated results into the original source string?

Pound symbol is italic by default.

Hi I used to convert the below mathml equation using direct/mml2svg, the pound symbol is coming as italic by default. whereas i haven't specified any formatting here.

<mml:math><mml:mrow><mml:mtext>&#x0024;</mml:mtext><mml:mn>1.60</mml:mn><mml:mo>/</mml:mo><mml:mtext>&#x00A3;</mml:mtext></mml:mrow></mml:math>

output:

Please someone let me know how to solve this?

[Question] Importing the RegExp that MathJax uses to select Latex in Content?

I have Latex expressions in Markdown and I need to select them.

They look something like this:

const md = `Some latex $$\\frac{\\sum_{i=1}^n$$ and some more latex $$MAD = \\frac{\\sum_{i=1}^n | x_i - \\bar{x} |} n$$`;

I was wondering if MathJax exposes the RegExp it uses to select the expressions so I could import it. Something like:

const regexp = require('MathJax').regexp

Then the selection could be performed like this:

s.match(regexp).map(v => v.substr(2, v.length - 4));
console.log(matches)

Thoughts?

Numbers without text don't render when using tex2svg

Running node -r esm tex2svg 408 and node -r esm tex2svg -30 generates:

<svg style="vertical-align: 0;" xmlns="http://www.w3.org/2000/svg" width="0.036ex" height="0.036ex" role="img" focusable="false" viewBox="0 0 16 16" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style>svg a{fill:blue;stroke:blue}[data-mml-node="merror"]>g{fill:red;stroke:red}[data-mml-node="merror"]>rect[data-background]{fill:yellow;stroke:none}[data-frame],[data-line]{stroke-width:70px;fill:none}.mjx-dashed{stroke-dasharray:140}.mjx-dotted{stroke-linecap:round;stroke-dasharray:0,140}use[data-c]{stroke-width:3px}</style></defs><g stroke="currentColor" fill="currentColor" stroke-width="0" transform="scale(1,-1)"><g data-mml-node="math"></g></g></svg>

Which appears to be an empty svg

mhchem throws error

E.g.,

$ node direct/tex2chtml "x"

mj3-demos-node/node_modules/mathjax3/mathjax3/input/tex/mhchem/mhchem_parser.js:5
export var mhchemParser = {
^^^^^^

SyntaxError: Unexpected token export
    at Module._compile (internal/modules/cjs/loader.js:718:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:785:10)
    at Module.load (internal/modules/cjs/loader.js:641:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:681:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.<anonymous> (mj3-demos-node/node_modules/mathjax3/mathjax3/input/tex/mhchem/MhchemConfiguration.js:8:26)
    at Module._compile (internal/modules/cjs/loader.js:774:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:785:10)
    at Module.load (internal/modules/cjs/loader.js:641:32)```

mmltosvg : Getting "TypeError: Cannot read property 'chars' of undefined" for specific mathml equation

Hi I am running mml2svg under direct for converting my mathml to svg. It works perfectly for other mml equations. But when i try converting the below equation it is throwing err.

Input Eqn: <math display='inline'><mrow><msup><mtext>1</mtext><mo>&#x2033;</mo></msup><mo>=</mo><mtext>(</mtext><mi>&#x03C0;</mi><mtext>/648&#x00A0;000)&#x00A0;rad</mtext></mrow></math>

Error: `D:\Senthil\projects\DEV\DTD Validation\MathMltoSvg\mathmltosvgandAlttext-epub\bin\Debug\mjax3-cli\node_modules\mathjax-full\js\core\MathDocument.js:169
finally { if (e_4) throw e_4.error; }
^

TypeError: Cannot read property 'chars' of undefined
at SVGTextNode.CommonWrapper.unicodeChars (D:\Senthil\projects\DEV\DTD Validation\MathMltoSvg\mathmltosvgandAlttext-epub\bin\Debug\mjax3-cli\node_modules\mathjax-full\js\output\common\Wrapper.js:433:48)
at SVGTextNode.SVGWrapper.placeChar (D:\Senthil\projects\DEV\DTD Validation\MathMltoSvg\mathmltosvgandAlttext-epub\bin\Debug\mjax3-cli\node_modules\mathjax-full\js\output\svg\Wrapper.js:206:45)
at SVGTextNode.toSVG (D:\Senthil\projects\DEV\DTD Validation\MathMltoSvg\mathmltosvgandAlttext-epub\bin\Debug\mjax3-cli\node_modules\mathjax-full\js\output\svg\Wrappers\TextNode.js:49:31)
at SVGmo.SVGWrapper.addChildren (D:\Senthil\projects\DEV\DTD Validation\MathMltoSvg\mathmltosvgandAlttext-epub\bin\Debug\mjax3-cli\node_modules\mathjax-full\js\output\svg\Wrapper.js:61:23)
at SVGmo.toSVG (D:\Senthil\projects\DEV\DTD Validation\MathMltoSvg\mathmltosvgandAlttext-epub\bin\Debug\mjax3-cli\node_modules\mathjax-full\js\output\svg\Wrappers\mo.js:63:18)
at SVGmsup.SVGscriptbase.toSVG (D:\Senthil\projects\DEV\DTD Validation\MathMltoSvg\mathmltosvgandAlttext-epub\bin\Debug\mjax3-cli\node_modules\mathjax-full\js\output\svg\Wrappers\scriptbase.js:45:21)
at SVGmrow.SVGWrapper.addChildren (D:\Senthil\projects\DEV\DTD Validation\MathMltoSvg\mathmltosvgandAlttext-epub\bin\Debug\mjax3-cli\node_modules\mathjax-full\js\output\svg\Wrapper.js:61:23)
at SVGmrow.toSVG (D:\Senthil\projects\DEV\DTD Validation\MathMltoSvg\mathmltosvgandAlttext-epub\bin\Debug\mjax3-cli\node_modules\mathjax-full\js\output\svg\Wrappers\mrow.js:27:14)
at SVGinferredMrow.SVGWrapper.addChildren (D:\Senthil\projects\DEV\DTD Validation\MathMltoSvg\mathmltosvgandAlttext-epub\bin\Debug\mjax3-cli\node_modules\mathjax-full\js\output\svg\Wrapper.js:61:23)
at SVGinferredMrow.SVGmrow.toSVG (D:\Senthil\projects\DEV\DTD Validation\MathMltoSvg\mathmltosvgandAlttext-epub\bin\Debug\mjax3-cli\node_modules\mathjax-full\js\output\svg\Wrappers\mrow.js:27:14)`

Any help on this will be much appreciated.

Throwing exceptions instead of rendering an error message

I'm trying to use MathJax as a server-side renderer, patterened on the 'direct' styles of tex2svg and tex2mml.

The normal case is working nicely enough - I put TeX in one end and I get MathML and SVG out the other! Pretty great.

However, if the TeX is wrong somehow (e.g., an undefined control sequence), MathJax is happy to render that as well, except as an error message. I would much, much prefer an exception to be thrown, because this is a problem I would like to discover at build time (since it is always indicating an error that requires correction), not whenever I happen to check the rendered result manually (or, more likely, someone points out to me that everything has been broken for six months and I've not noticed...).

Is there some setting I could toggle to get MathJax to fail hard, preferably by throwing an exception? My current best idea for a workaround is to walk the MathML tree and look for a data-mjx-error attribute, which seems ugly and fragile.

v4 beta 2 fails to find (dynamic parts of the) default font

Awesome to see the new beta.

I was trying to update a personal project to the beta 2 but ran into trouble.

In a somewhat complex setup, I got something that looks like the CJS version loading the fonts from the wrong location:

Error: Cannot find module '/foo/node_modules/mathjax-full/cjs/output/svg/fonts/svg/dynamic/double-struck'
Require stack:
- /foo/node_modules/mathjax-full/cjs/util/asyncLoad/node.js
- /foo/postprocess.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1060:15)
    at Module._load (node:internal/modules/cjs/loader:905:27)
    at Module.require (node:internal/modules/cjs/loader:1127:19)
    at require (node:internal/modules/helpers:112:18)
    at mathjax_js_1.mathjax.asyncLoad (/foo/node_modules/mathjax-full/cjs/util/asyncLoad/node.js:31:16)
    at /foo/node_modules/mathjax-full/cjs/util/AsyncLoad.js:10:43
    at new Promise (<anonymous>)
    at asyncLoad (/foo/node_modules/mathjax-full/cjs/util/AsyncLoad.js:9:12)
    at MathJaxModernFont.<anonymous> (/foo/node_modules/mathjax-full/cjs/output/common/FontData.js:477:68)
    at step (/foo/node_modules/mathjax-full/cjs/output/common/FontData.js:44:23) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/foo/node_modules/mathjax-full/cjs/util/asyncLoad/node.js',
    '/foo/postprocess.js'
  ]
}
something went wrong at  \mathbb{F} Error: MathJax retry
    at retryAfter (/foo/node_modules/mathjax-full/cjs/util/Retries.js:25:15)
    at exports.FontData.FontData.getChar (/foo/node_modules/mathjax-full/cjs/output/common/FontData.js:579:41)
    at exports.CommonWrapper.CommonWrapper.getVariantChar (/foo/node_modules/mathjax-full/cjs/output/common/Wrapper.js:768:30)
    at CommonTextNodeMixin.CommonTextNodeMixin.computeBBox (/foo/node_modules/mathjax-full/cjs/output/common/Wrappers/TextNode.js:61:42)
    at exports.CommonWrapper.CommonWrapper.getBBox (/foo/node_modules/mathjax-full/cjs/output/common/Wrapper.js:208:14)
    at exports.CommonWrapper.CommonWrapper.getOuterBBox (/foo/node_modules/mathjax-full/cjs/output/common/Wrapper.js:216:25)
    at exports.CommonWrapper.CommonWrapper.computeBBox (/foo/node_modules/mathjax-full/cjs/output/common/Wrapper.js:260:35)
    at CommonMiMixin.CommonMiMixin.computeBBox (/foo/node_modules/mathjax-full/cjs/output/common/Wrappers/mi.js:27:42)
    at exports.CommonWrapper.CommonWrapper.getBBox (/foo/node_modules/mathjax-full/cjs/output/common/Wrapper.js:208:14)
    at exports.CommonWrapper.CommonWrapper.getOuterBBox (/foo/node_modules/mathjax-full/cjs/output/common/Wrapper.js:216:25) {
  retry: Promise { <pending> }
}

Here's a minimal example script that crashes for me when hitting the "dynamic" parts of the font (actually not quite minimal - as you'll see I tried setting the font manually).

// MathML to SVG / CHTML
const mathjax = require('mathjax-full/cjs/mathjax.js').mathjax;
require('mathjax-full/cjs/util/asyncLoad/node.js');
const MathML = require('mathjax-full/cjs/input/mathml.js').MathML;
const SVG = require('mathjax-full/cjs/output/svg.js').SVG;
const jsdom = require('jsdom');
const { JSDOM } = jsdom;
const jsdomadaptor = require('mathjax-full/cjs/adaptors/jsdomAdaptor.js')
    .jsdomAdaptor;
const RegisterHTMLHandler = require('mathjax-full/cjs/handlers/html.js')
    .RegisterHTMLHandler;
const adaptor = jsdomadaptor(JSDOM);
RegisterHTMLHandler(adaptor);
const mml = new MathML();
const MathJaxModernFont = require('mathjax-modern-font/cjs/svg.js').MathJaxModernFont;
const modernFont = new MathJaxModernFont({
    dynamicPrefix: 'mathjax-modern-font/cjs/svg/dynamic'
});

const svg = new SVG({
    font: modernFont,
    displayOverflow: 'overflow',
    linebreaks: {
        inline: false,
    }
});
const svghtml = mathjax.document('', { InputJax: mml, OutputJax: svg });


const mjx = svghtml.convert(process.argv[2] || `<math><mtext>hello</mtext></math>`);

console.log(mjx.outerHTML)

This works with the default input but e.g. <math><mi mathvariant="double-struck">x</mi></math> crashes as follows

/foo/node_modules/mathjax-full/cjs/core/MathDocument.js:181
            finally { if (e_4) throw e_4.error; }
                               ^

Error: MathJax retry
    at retryAfter (/foo/node_modules/mathjax-full/cjs/util/Retries.js:25:15)
    at exports.FontData.FontData.getChar (/foo/node_modules/mathjax-full/cjs/output/common/FontData.js:579:41)
    at exports.CommonWrapper.CommonWrapper.getVariantChar (/foo/node_modules/mathjax-full/cjs/output/common/Wrapper.js:768:30)
    at CommonTextNodeMixin.CommonTextNodeMixin.computeBBox (/foo/node_modules/mathjax-full/cjs/output/common/Wrappers/TextNode.js:61:42)
    at exports.CommonWrapper.CommonWrapper.getBBox (/foo/node_modules/mathjax-full/cjs/output/common/Wrapper.js:208:14)
    at exports.CommonWrapper.CommonWrapper.getOuterBBox (/foo/node_modules/mathjax-full/cjs/output/common/Wrapper.js:216:25)
    at exports.CommonWrapper.CommonWrapper.computeBBox (/foo/node_modules/mathjax-full/cjs/output/common/Wrapper.js:260:35)
    at CommonMiMixin.CommonMiMixin.computeBBox (/foo/node_modules/mathjax-full/cjs/output/common/Wrappers/mi.js:27:42)
    at exports.CommonWrapper.CommonWrapper.getBBox (/foo/node_modules/mathjax-full/cjs/output/common/Wrapper.js:208:14)
    at exports.CommonWrapper.CommonWrapper.getOuterBBox (/foo/node_modules/mathjax-full/cjs/output/common/Wrapper.js:216:25) {
  retry: Promise { <pending> }

Running the simple tex2svg with mjs extension?

Hi.
This is a continuation from this issue.

I'm trying out the simple tex to SVG example and it will generate with this command:

node -r esm tex2svg

So I tried this:

cp tex2svg tex2svg.mjs

And then running it like this ( With error result):

ole@mkt:~/Temp/MathJax-demos-node/simple$ node tex2svg.mjs 
internal/modules/cjs/loader.js:821
  throw new ERR_REQUIRE_ESM(filename);
  ^

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/ole/Temp/MathJax-demos-node/MathJax-demos-node/simple/tex2svg.mjs
    at Object.Module._extensions..mjs (internal/modules/cjs/loader.js:821:9)
    at Module.load (internal/modules/cjs/loader.js:643:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Function.Module.runMain (internal/modules/cjs/loader.js:839:10)
    at internal/main/run_main_module.js:17:11

I was hoping this would work so that I could wrap the script in a function that takes the latex input and returns the SVG and then I could package that script in an NPM module and publish it so that the script can easily be used in other projects.

Any ideas?