MathML vs KaTeX vs MathJax: Which Should You Use for Math in HTML?

You have equations to put on a web page and the choice usually comes down to MathML vs KaTeX vs MathJax. For a page with a handful of equations, you should write MathML. Chrome, Edge, Safari and Firefox all draw it on their own, so the page loads no script and no stylesheet for its math.

KaTeX is the better pick when your math is already written in LaTeX and there is a lot of it. MathJax should be kept for documents that need numbered equations the text can refer to, or its built-in tools for screen reader users. And if you like typing LaTeX but want the page to carry plain MathML, Temml and Pandoc convert it before the page is served.

HTML Tools for Mathematics Compared

There are five tools to know and these fall into two groups. MathML, KaTeX and MathJax put the equation on the screen. Temml and Pandoc are converters, which turn LaTeX into MathML on your machine before any reader arrives.

Tool	What the Browser Loads	What You Write	Best Fit
MathML	Nothing	MathML tags, or LaTeX that you convert first	A few equations per page, static sites and WordPress posts
KaTeX	About 75 KB of script, plus a stylesheet and fonts	LaTeX	Pages full of LaTeX that have to load fast
MathJax	About 280 KB of script	LaTeX or MathML	Numbered equations with references, and built-in tools for screen readers
Temml	A small stylesheet and one font file	LaTeX	Static sites that want MathML from LaTeX source
Pandoc	Nothing	A whole LaTeX or Markdown document	Papers, books and lecture notes

Both sizes are gzipped and belong to the files most sites load, katex.min.js for KaTeX and tex-chtml.js for MathJax. MathJax costs almost 4 times what KaTeX does before a single equation is drawn, and both cost more than MathML, which is already inside the browser.

Native MathML

MathML is a markup language for mathematics, the way HTML is a markup language for text. You describe the structure of the equation with tags, <mfrac> for a fraction and <msqrt> for a square root, and the browser does the drawing. What browsers support is a subset called MathML Core, and it has worked in every major browser since Chrome added it in January 2023.

This is the quadratic formula written by hand:

<math display="block">
  <mi>x</mi>
  <mo>=</mo>
  <mfrac>
    <mrow>
      <mo>&minus;</mo>
      <mi>b</mi>
      <mo>&plusmn;</mo>
      <msqrt>
        <msup><mi>b</mi><mn>2</mn></msup>
        <mo>&minus;</mo>
        <mn>4</mn><mi>a</mi><mi>c</mi>
      </msqrt>
    </mrow>
    <mrow><mn>2</mn><mi>a</mi></mrow>
  </mfrac>
</math>

And this is the same formula drawn by your browser from MathML alone:

That is the whole setup. There are three limits you should know before you commit to it.

• MathML is long to type. The formula above takes 17 lines by hand and 1 line in LaTeX, which is why most people write LaTeX and convert it.
• MathML Core has no element for numbered equations and drops most of the table attributes used for alignment. MathJax still ships no native MathML output for this reason.
• The browser draws MathML with a math font from the reader’s device, Cambria Math on Windows and STIX Two Math on a recent Mac. So the same equation looks a little different from one system to another, and a device with no math font draws it poorly. KaTeX and MathJax ship their own fonts and look the same everywhere.

KaTeX

KaTeX is a JavaScript library from Khan Academy that turns LaTeX into HTML. It should be used when your content is already in LaTeX, a few hundred posts or a set of lecture notes, and converting all of it by hand is out of the question.

In the browser, KaTeX needs 3 tags in the <head> of the page:

<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/katex@0.18.9/dist/katex.min.css"
  integrity="sha384-lPx0C4zIUZLpveABMwOFcFeGZwsvKBJfhJ85FN1PYOV7xApBcFMhcAEMVKF8loOI"
  crossorigin="anonymous">
<script defer
  src="https://cdn.jsdelivr.net/npm/katex@0.18.9/dist/katex.min.js"
  integrity="sha384-19KE2cFb3U+RUWmyhBz7aLOGDG8WrRC6hE3oY/HTZZlAAVWYTdmvLC//+TIV3zUx"
  crossorigin="anonymous"></script>
<script defer
  src="https://cdn.jsdelivr.net/npm/katex@0.18.9/dist/contrib/auto-render.min.js"
  integrity="sha384-bjyGPfbij8/NDKJhSGZNP/khQVgtHUE5exjm4Ydllo42FwIgYsdLO2lXGmRBf5Mz"
  crossorigin="anonymous"
  onload="renderMathInElement(document.body);"></script>

<p>Inline math: \(a^2 + b^2 = c^2\)</p>
<p>$$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$</p>

The auto-render script finds LaTeX between $$ markers, or between \( and \) for math inside a sentence, and replaces it with the drawn equation. It leaves single dollar signs alone by default. I would keep it that way on any site that also mentions prices, because a sentence with two prices in it has two dollar signs and KaTeX will read everything between them as math.

KaTeX can also run on the server, in Node.js, and hand you finished HTML. The page then loads the stylesheet and fonts but no script.

import katex from "katex";

const html = katex.renderToString(
  String.raw`x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}`,
  { displayMode: true }
);

• katex.min.js is about 75 KB gzipped and the stylesheet adds under 4 KB. The fonts are separate files, which the browser fetches only when an equation uses them.
• KaTeX numbers equation and align environments and supports \tag. It doesn’t support \label, \ref or \eqref, so the text can’t link to an equation by name.
• The default output is HTML for the eye with MathML hidden inside it for screen readers. Setting output: "mathml" sends the MathML alone.
• trust is off by default, which blocks commands such as \href and \includegraphics. It should stay off wherever visitors can submit LaTeX, in comments or on a forum.
• The integrity values in the tags belong to version 0.18.9. These change with every release, and KaTeX’s installation page lists the current ones.

MathJax

MathJax is the older and heavier library, and it does the most. Version 4 reads both LaTeX and MathML, breaks long equations across lines and switches on its expression explorer by default, so a person using a keyboard or a screen reader can move through an equation and hear it read out.

MathJax should be used when equations need numbers that the text can refer to. This is the setup for it:

<script>
  window.MathJax = {
    tex: { tags: "ams" }
  };
</script>
<script defer src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-chtml.js"></script>

<p>
  \begin{equation}
    x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} \label{eq:quadratic}
  \end{equation}
</p>
<p>Equation \eqref{eq:quadratic} gives both roots.</p>

With tags: "ams", MathJax numbers the equation as (1) and turns \eqref{eq:quadratic} into a link that jumps to it. The reference can even come before the equation it points to.

The cost is the download, about 280 KB gzipped for tex-chtml.js. It is wise to load MathJax only on the pages that contain math.

LaTeX to MathML With Temml and Pandoc

You can write LaTeX and still send the reader plain MathML. The conversion happens once, on your machine or your build server, and the page that goes out carries no math script.

Temml is a JavaScript library that converts LaTeX to MathML Core. It works well inside a static site generator, where a build script can replace each LaTeX string with the MathML that Temml returns:

import temml from "temml";

const mathml = temml.renderToString(
  String.raw`x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}`,
  { displayMode: true }
);

Temml’s output needs its stylesheet and one small font file on the page. The stylesheet comes in several versions. Temml-Local.css uses the math font already on the reader’s device, and the others load a web font such as Latin Modern or STIX Two, which gives every reader the same look.

Pandoc converts whole documents, so it should be used when the source is a complete LaTeX file such as a paper or a book chapter:

pandoc paper.tex --math-method=mathml --standalone -o paper.html

The --standalone flag wraps the result in a complete HTML page with a head and a body. Older versions of Pandoc take --mathml in place of --math-method=mathml.

Math Equations in WordPress

WordPress has a Math block in core from version 6.9 onwards, and you should use it for every new equation. You type /math in the editor, write the equation in LaTeX and WordPress saves it as MathML. It uses Temml for the conversion, so no plugin is needed and the front end loads nothing extra.

For math inside a sentence, select the text, open the More menu in the block toolbar and choose Math. The block has two limits. It doesn’t number equations, and WordPress’s documentation says complex packages and custom macros may not work.

The harder case is a site that already has LaTeX typed into many old posts. The snippet below loads KaTeX on the posts that contain $$ or \( and on nothing else. It goes in your theme’s functions.php or in a small plugin of your own.

add_action( 'wp_enqueue_scripts', function () {
	if ( ! is_singular() ) {
		return;
	}

	$content = (string) get_post_field( 'post_content', get_queried_object_id() );

	if ( ! str_contains( $content, '$$' ) && ! str_contains( $content, '\(' ) ) {
		return;
	}

	$base = 'https://cdn.jsdelivr.net/npm/katex@0.18.9/dist/';

	wp_enqueue_style( 'katex', $base . 'katex.min.css', array(), null );
	wp_enqueue_script( 'katex', $base . 'katex.min.js', array(), null, array( 'strategy' => 'defer' ) );
	wp_enqueue_script( 'katex-auto-render', $base . 'contrib/auto-render.min.js', array( 'katex' ), null, array( 'strategy' => 'defer' ) );
	wp_add_inline_script(
		'katex-auto-render',
		'document.addEventListener( "DOMContentLoaded", function () { renderMathInElement( document.body ); } );',
		'before'
	);
} );

There is one catch with LaTeX typed straight into a paragraph. WordPress runs its typography filter over the text before KaTeX sees it, so a minus sign with a space on each side reaches KaTeX as an en dash. The Math block doesn’t have this problem because it stores finished MathML.

If you don’t want to touch code, the KaTeX and MathJax-LaTeX plugins in the WordPress directory load the same two libraries for you.

Screen Readers and MathML

An equation saved as an image gives a screen reader nothing except its alt text. MathML gives it the structure of the equation, so it can read a fraction as a fraction and let the listener move through the parts.

• VoiceOver on Mac and iPhone, NVDA and JAWS on Windows all read MathML.
• NVDA reads it through MathCAT, which is built into NVDA from version 2026.1.
• KaTeX hides MathML inside its default output for this purpose, and MathJax speaks the equation through its explorer.

FAQs on Math in HTML

Where to Start

For a new page, I’d write the equation in LaTeX, convert it to MathML with Temml or the WordPress Math block and load nothing at all. KaTeX comes in when there is too much existing LaTeX to convert, and MathJax when the equations need numbers and references.

If LaTeX is the part you haven’t learned yet, my book LaTeX for Students starts from zero and covers math on the web as well. You can also try the syntax in one of these online LaTeX editors before installing anything.