MathJax on the server with Markdown

Eric Meyer^[1] 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 syntax^[2]

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

to get the SVG:

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>