# MathJax — Beautiful Math Rendering in All Browsers

> An open-source JavaScript display engine that renders LaTeX, MathML, and AsciiMath notation in any modern browser without plugins.

## Install

Save in your project root:

# MathJax — Beautiful Math Rendering in All Browsers

## Quick Use
```html
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<p>When \(a \neq 0\), the solutions are \(x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}\).</p>
```
```bash
npm install mathjax-full
```

## 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

---
Source: https://tokrepo.com/en/workflows/asset-a00aeded
Author: AI Open Source