Javascript-less math in the browser (using MathML)

With javascript, the typical way to encode mathematical formulas in webpages is with a library like KaTeX. KaTeX is a server-side rendering library for LaTeX expressions and is highly performant, but it relies heaily on a linked javascript file which goes against the philosphy of this website.

With my existing knowledge rendered useless, I turned my attention to the Mozilla developer docs (a great source for reading web documentation) and discovered MathML, short for Mathematical Markup Language.

MathML isn't new, but it only received full support in Chromium-based browsers (i.e. became reliable for most web users) in 2023. It uses an XML-based language in place of LaTeX in order to make rendering native in the browser. In practice, it is likely easiest to write formulas using LaTeX and use an online or terminal-based converter to translate it into MathML.

For instance, in standard LaTeX you can write the quadratic formula as the following: 

\[
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
\]

The equivalent in MathML is the following: 

<p><math display="block" xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>x</mi><mo>=</mo><mfrac><mrow><mi>−</mi><mi>b</mi><mo>±</mo><msqrt><mrow><msup><mi>b</mi><mn>2</mn></msup><mo>−</mo><mn>4</mn><mi>a</mi><mi>c</mi></mrow></msqrt></mrow><mrow><mn>2</mn><mi>a</mi></mrow></mfrac></mrow><annotation encoding="application/x-tex">x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}</annotation></semantics></math></p>

This is clearly too unwieldly to work with directly; however, it does work nicely in HTML:

x=−b±b2−4ac2ax = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

You can easily make the conversion from LaTeX snippet to MathML (as I did for this example) using Pandoc online. Simply:

  1. Navigate to Pandoc
  2. Update or paste LaTeX snippet
  3. Set "from" to "latex", "to" to "html5", and replace "Plain math" with "MathML"
  4. Click convert

These instructions are almost verbatum copied from USC's Using Pandoc to Convert LaTeX to HTML and MathML page.

Last updated March 20, 2026

Addendum

I am now using Emacs with org-publish to write javascript-less mathematics blocks in the browser. By default, org-publish will display LaTeX written in org files using MathJax; however, we can (setq org-html-with-latex 'dvisvgm) (or per file use #+OPTIONS: tex:dvisvgm) to instead render and export the image.

Here is the same example of the quadratic formula, but using this method (you can notice that the rendering is different, stylistically):

\[ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} \]

This has the following benefits:

  • LaTeX is rendered in Emacs while working.
  • Math formatting stays in LaTeX (no manual conversion process).

However, the images are naturally less dynamic. This is partially alleviated by using 'dvisvgm, since it forces images to render as svg files.

Last updated March 24, 2026