MathJax — Beautiful Math Rendering in All Browsers

Introduction

MathJax is a display engine for mathematical notation that takes LaTeX, MathML, or AsciiMath markup and produces high-quality HTML/CSS, SVG, or MathML output. It is widely used in academic publishing, learning management systems, and documentation sites to render equations without requiring browser plugins.

What MathJax Does

• Converts LaTeX, MathML, and AsciiMath input into rendered math in the browser
• Produces three output formats: HTML with CSS, SVG, and native MathML
• Processes math in web pages automatically by scanning for delimiters
• Provides a Node.js API for server-side rendering of math expressions
• Supports custom macros, extensions, and third-party plugins

Architecture Overview

MathJax v3 is built on a modular input-output pipeline. Input processors parse source notation into an internal MathML representation. Output processors then convert this intermediate form into the chosen format (CHTML, SVG, or MathML). Components are loaded on demand, and the system can be configured to include only the input and output jax needed, reducing the overall payload.

Self-Hosting & Configuration

• Load a combined component from a CDN or install mathjax-full via npm for self-hosting
• Configure input delimiters (e.g., $$...$$, \(...\)) in the MathJax configuration object
• Choose an output renderer: chtml for HTML/CSS, svg for scalable vector output
• Define custom LaTeX macros in the tex.macros configuration
• Use MathJax.typeset() or MathJax.typesetPromise() to process dynamically added content

Key Features

• Supports the broadest range of LaTeX commands among browser-based math renderers
• Responsive equations that scale with surrounding text size
• Right-click context menu for copying math as LaTeX, MathML, or accessing accessibility options
• Built-in assistive technology support with speech rule integration
• Lazy typesetting mode for pages with hundreds of equations

Comparison with Similar Tools

• KaTeX — Faster synchronous rendering but supports fewer LaTeX commands; MathJax handles more complex expressions
• Temml — Outputs MathML only; MathJax produces HTML/CSS and SVG as well
• LaTeX.js — Renders full LaTeX documents; MathJax focuses on math expressions within web pages
• AsciiMathML — Older library with limited output; MathJax integrates AsciiMath as one of several input formats

FAQ

Q: Is MathJax v3 significantly different from v2? A: Yes. Version 3 is a complete rewrite with a modular architecture, faster rendering, and support for server-side use via Node.js.

Q: Can I render math on the server? A: Yes. Use mathjax-full in Node.js to pre-render equations to HTML or SVG strings.

Q: How do I handle dynamically loaded math? A: Call MathJax.typeset() after inserting new content, or use MathJax.typesetPromise() for async workflows.

Q: Does MathJax work with screen readers? A: Yes. MathJax includes an accessibility extension that generates speech text and supports navigation of math structures.

Sources

• https://github.com/mathjax/MathJax
• https://www.mathjax.org