MathJax on the server with Markdown

Eric Meyer1 made me aware of MathJax. On their site you find the claim:

A JavaScript display engine for mathematics that works in all browsers. No more setup for readers. It just works.

While Eric didn't like that his usage of MathJax required JavaScript on the browser, he was impressed by the powerful syntax. I found – depending on your build setup – it's possible to run MathJax on the node server without the need of client-side JavaScript. E.g.: I'm using the Static Site Generator 11ty to build this site on the server. I write Markdown and use markdown-it to compile everything into HTML. Like so often, there is a markdown-it plugin that would integrate MathJax into the markdown processing and render the result on the server as SVG – no client Javascript 😃. The plugin is named markdown-it-mathjax3 and it's made by Taniguchi Masaya. Install it through:

npm i markdown-it-mathjax3

and use it in your markdown-it setup like:

var md = require("markdown-it")(),
  mathjax3 = require("markdown-it-mathjax3")

md.use(mathjax3)

You can then write in your Markdown MatJax Tex syntax2

$$\sqrt{3x-1}+(1+x)^2$$

to get the SVG:

3x−1+(1+x)2

That output as you see it is not accessible. markdown-it-mathjax3 can consume the MathJax configuration object but my takes of configuring accessibility support were not successful so far.

Note on accessibility: Taniguchi was so kind to activate accessibility by default, starting with version 4.3.2 of markdown-it-mathjax3. There is no need to pass in a MathJax configuration object to activate the function. Assistive MML will be rendered in addition to the SVG output. For the above example that will look like:

<mjx-assistive-mml
  unselectable="on"
  display="block"
  style="top: 0px; left: 0px; clip: rect(1px, 1px, 1px, 1px); -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: absolute; padding: 1px 0px 0px 0px; border: 0px; display: block; overflow: hidden; width: 100%;"
>
  <math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
    <msqrt><mn>3</mn><mi>x</mi><mo>−</mo><mn>1</mn></msqrt
    ><mo>+</mo><mo stretchy="false">(</mo><mn>1</mn><mo>+</mo><mi>x</mi
    ><msup><mo stretchy="false">)</mo><mn>2</mn></msup>
  </math>
</mjx-assistive-mml>

  1. See Recreating "The Effects of Nuclear Weapons" for the Web. ↩︎

  2. On PhysicsOverflow is a MathJax basic tutorial and quick reference that can serve as a quickstarter. ↩︎