0
# MathJax
1
2
MathJax is a comprehensive JavaScript display engine for mathematical notation that renders LaTeX, MathML, and AsciiMath expressions in web browsers and Node.js applications. It provides high-quality mathematical typesetting with support for multiple input formats and output formats, accessibility features for screen readers, and a powerful API for integration.
3
4
## Package Information
5
6
- **Package Name**: mathjax
7
- **Package Type**: npm
8
- **Language**: JavaScript/TypeScript
9
- **Installation**: `npm install mathjax`
10
11
## Core Imports
12
13
For Node.js applications:
14
15
```javascript
16
const MathJax = require('mathjax');
17
```
18
19
For ES modules:
20
21
```javascript
22
import MathJax from 'mathjax';
23
```
24
25
For browser applications, include a component script:
26
27
```html
28
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-chtml.js"></script>
29
```
30
31
## Basic Usage
32
33
### Node.js Usage
34
35
```javascript
36
const MathJax = require('mathjax');
37
38
// Initialize MathJax with configuration
39
MathJax.init({
40
loader: {
41
load: ['input/tex', 'output/svg']
42
}
43
}).then((MathJax) => {
44
// Convert TeX to SVG
45
const svg = MathJax.tex2svg('x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}', {
46
display: true
47
});
48
console.log(MathJax.startup.adaptor.outerHTML(svg));
49
}).catch((err) => console.log(err.message));
50
```
51
52
### Browser Usage
53
54
```html
55
<!DOCTYPE html>
56
<html>
57
<head>
58
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-chtml.js"></script>
59
</head>
60
<body>
61
<div>
62
When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
63
\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]
64
</div>
65
</body>
66
</html>
67
```
68
69
## Architecture
70
71
MathJax is built around several key components:
72
73
- **Input Processors**: Parse mathematical notation in various formats (TeX/LaTeX, MathML, AsciiMath)
74
- **Output Processors**: Render mathematics using different technologies (HTML/CSS, SVG)
75
- **Document Processing**: Find, process, and render math in documents
76
- **Component System**: Modular loading of features and extensions
77
- **Accessibility System**: Screen reader support, speech generation, interactive exploration
78
- **Configuration System**: Extensive customization of behavior and appearance
79
80
## Capabilities
81
82
### Initialization and Configuration
83
84
Core MathJax initialization, component loading, and configuration management for both browser and Node.js environments.
85
86
```javascript { .api }
87
function init(config?: Configuration): Promise<MathJax>;
88
```
89
90
[Initialization and Configuration](./initialization.md)
91
92
### Input Processing
93
94
Support for multiple mathematical notation formats with extensive customization options and extension support.
95
96
```javascript { .api }
97
// Convert TeX/LaTeX to various output formats
98
function tex2svg(tex: string, options?: ConversionOptions): Element;
99
function tex2chtml(tex: string, options?: ConversionOptions): Element;
100
function tex2mml(tex: string, options?: ConversionOptions): Element;
101
102
// Convert MathML to output formats
103
function mml2svg(mathml: string, options?: ConversionOptions): Element;
104
function mml2chtml(mathml: string, options?: ConversionOptions): Element;
105
106
// Convert AsciiMath to output formats
107
function asciimath2svg(ascii: string, options?: ConversionOptions): Element;
108
function asciimath2chtml(ascii: string, options?: ConversionOptions): Element;
109
```
110
111
[Input Processing](./input-processing.md)
112
113
### Document Rendering
114
115
Automatic discovery and rendering of mathematics in HTML documents with support for dynamic content updates.
116
117
```javascript { .api }
118
function typeset(elements?: Element[]): void;
119
function typesetPromise(elements?: Element[]): Promise<void>;
120
function typesetClear(elements?: Element[]): void;
121
```
122
123
[Document Rendering](./document-rendering.md)
124
125
### Output Formats
126
127
High-quality mathematical rendering using HTML/CSS (CommonHTML) or Scalable Vector Graphics (SVG) with font support and styling options.
128
129
```javascript { .api }
130
function chtmlStylesheet(): Element;
131
function svgStylesheet(): Element;
132
function getMetricsFor(wrapper: Element, display: boolean): Metrics;
133
```
134
135
[Output Formats](./output-formats.md)
136
137
### Accessibility Features
138
139
Comprehensive accessibility support including speech generation, semantic enrichment, interactive exploration, and assistive technology integration.
140
141
```javascript { .api }
142
interface AccessibilityOptions {
143
backgroundColor?: string;
144
backgroundOpacity?: number;
145
foregroundColor?: string;
146
foregroundOpacity?: number;
147
highlight?: string;
148
subtitles?: boolean;
149
speech?: boolean;
150
}
151
```
152
153
[Accessibility Features](./accessibility.md)
154
155
### Extension System
156
157
Modular component system for loading input/output processors, extensions, and additional functionality on demand.
158
159
```javascript { .api }
160
interface LoaderOptions {
161
load?: string[];
162
dependencies?: Record<string, string[]>;
163
paths?: Record<string, string>;
164
source?: Record<string, string>;
165
}
166
```
167
168
[Extension System](./extensions.md)
169
170
## Types
171
172
```javascript { .api }
173
interface Configuration {
174
loader?: LoaderOptions;
175
startup?: StartupOptions;
176
tex?: TexOptions;
177
mml?: MMLOptions;
178
asciimath?: AsciiMathOptions;
179
chtml?: CommonHTMLOptions;
180
svg?: SVGOptions;
181
options?: GlobalOptions;
182
}
183
184
interface ConversionOptions {
185
display?: boolean;
186
em?: number;
187
ex?: number;
188
containerWidth?: number;
189
scale?: number;
190
family?: string;
191
}
192
193
interface MathJax {
194
version: string;
195
config: Configuration;
196
loader: Loader;
197
startup: Startup;
198
_: InternalModules;
199
200
// Initialization
201
init(config?: Configuration): Promise<MathJax>;
202
203
// Document processing
204
typeset(elements?: Element[]): void;
205
typesetPromise(elements?: Element[]): Promise<void>;
206
typesetClear(elements?: Element[]): void;
207
208
// Conversion methods (created dynamically based on loaded components)
209
tex2svg?(tex: string, options?: ConversionOptions): Element;
210
tex2chtml?(tex: string, options?: ConversionOptions): Element;
211
tex2mml?(tex: string, options?: ConversionOptions): Element;
212
mml2svg?(mathml: string, options?: ConversionOptions): Element;
213
mml2chtml?(mathml: string, options?: ConversionOptions): Element;
214
asciimath2svg?(ascii: string, options?: ConversionOptions): Element;
215
asciimath2chtml?(ascii: string, options?: ConversionOptions): Element;
216
217
// Promise-based conversion methods
218
tex2svgPromise?(tex: string, options?: ConversionOptions): Promise<Element>;
219
tex2chtmlPromise?(tex: string, options?: ConversionOptions): Promise<Element>;
220
tex2mmlPromise?(tex: string, options?: ConversionOptions): Promise<Element>;
221
mml2svgPromise?(mathml: string, options?: ConversionOptions): Promise<Element>;
222
mml2chtmlPromise?(mathml: string, options?: ConversionOptions): Promise<Element>;
223
asciimath2svgPromise?(ascii: string, options?: ConversionOptions): Promise<Element>;
224
asciimath2chtmlPromise?(ascii: string, options?: ConversionOptions): Promise<Element>;
225
226
// Reset methods
227
texReset?(...args: any[]): void;
228
mmlReset?(...args: any[]): void;
229
asciimathReset?(...args: any[]): void;
230
231
// Stylesheet methods
232
chtmlStylesheet?(): Element;
233
svgStylesheet?(): Element;
234
235
// Metrics
236
getMetricsFor?(wrapper: Element, display: boolean): Metrics;
237
238
// Utility methods
239
done(): Promise<void>;
240
whenReady(callback: () => void): Promise<void>;
241
}
242
243
interface Loader {
244
load(...components: string[]): Promise<any[]>;
245
ready(...components: string[]): Promise<any[]>;
246
preLoaded(...components: string[]): void;
247
checkVersion(component: string, version: string, name: string): boolean;
248
getRoot(): string;
249
}
250
251
interface Startup {
252
document: HTMLDocument;
253
input: InputJax[];
254
output: OutputJax;
255
adaptor: DOMAdaptor;
256
handler: Handler;
257
registerConstructor(name: string, constructor: any): void;
258
useHandler(name: string, force?: boolean): void;
259
useAdaptor(name: string, force?: boolean): void;
260
useInput(name: string, force?: boolean): void;
261
useOutput(name: string, force?: boolean): void;
262
}
263
264
interface Metrics {
265
em: number;
266
ex: number;
267
containerWidth: number;
268
scale: number;
269
}
270
```