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");


You can then write in your Markdown MatJax Tex syntax[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:

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="" 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>

  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. ↩︎