MathJax

https://docs.mathjax.org/en/latest/
Admin
MathJax is an open-source JavaScript display engine for LaTeX, MathML, and AsciiMath notation that...
Tokens:296,135
Snippets:2,014
Trust Score:9.9
Update:23 hours ago
Show doc for...
Tokens:
Raw
### Import MathJax core components

Source: https://docs.mathjax.org/en/latest/server/preload.html

Initializes the MathJax global variable, imports the insert utility, loads the startup component, core component, and the liteDOM adaptor for Node.js. This is the required setup for all pre-loading examples.

```javascript
import {MathJax} from '@mathjax/src/js/components/global.js';
import {insert} from '@mathjax/src/js/util/Options.js';
import '@mathjax/src/js/components/startup.js';
import '@mathjax/src/components/js/core/core.js';
import '@mathjax/src/components/js/adaptors/liteDOM/liteDOM.js';
```

--------------------------------

### Preload MathJax TeX components and mathjax-tex font for synchronous conversion

Source: https://docs.mathjax.org/en/latest/server/preload.html

This example imports the MathJax core, TeX input extensions (ams, newcommand, color), the CHTML output jax, and the mathjax-tex font. It configures the TeX packages and font data, then starts MathJax and converts a math string from the command line to CHTML synchronously. Requires installing the @mathjax/mathjax-tex-font package via npm or pnpm.

```javascript
import {MathJax} from '@mathjax/src/js/components/global.js';
import {insert} from '@mathjax/src/js/util/Options.js';
import '@mathjax/src/js/components/startup.js';
import '@mathjax/src/components/js/core/core.js';
import '@mathjax/src/components/js/adaptors/liteDOM/liteDOM.js';

//
// Load the TeX components that we want to use
//
import '@mathjax/src/components/js/input/tex-base/tex-base.js';
import '@mathjax/src/components/js/input/tex/extensions/ams/ams.js';
import '@mathjax/src/components/js/input/tex/extensions/newcommand/newcommand.js';
import '@mathjax/src/components/js/input/tex/extensions/color/color.js';

//
// Load the output jax
//
import '@mathjax/src/components/js/output/chtml/chtml.js';

//
// Load the mathjax-tex font
//
import {MathJaxTexFont} from '@mathjax/mathjax-tex-font/js/chtml.js';

//
// Add the pre-loaded TeX extensions here, and specify the font
//
insert(MathJax.config, {
  tex: {
    packages: {'[+]': ['ams', 'newcommand', 'color']}
  },
  chtml: {
    fontData: MathJaxTexFont
  }
}, false);

//
// Start up MathJax
//
MathJax.config.startup.ready();

//
// Convert some math synchronously
//
const math = process.argv[2] || '';
const adaptor = MathJax.startup.adaptor;
console.log(adaptor.outerHTML(MathJax.tex2chtml(math)));
```

--------------------------------

### Example: pack TeX input component

Source: https://docs.mathjax.org/en/latest/upgrading/whats-new-4.0/build-tools.html

This example packs only the TeX input component using the MJS module type.

```bash
pnpm -s make-one input/tex mjs
```

--------------------------------

### \bbox usage examples

Source: https://docs.mathjax.org/en/latest/input/tex/extensions/bbox.html

Examples of the \bbox macro with different options: background color, padding, border, and combinations. The last example shows a 2px red border with 5px padding.

```latex
\bbox[red]{x+y}      % a red box behind x+y
\bbox[2pt]{x+1}      % an invisible box around x+y with 2pt of extra space
\bbox[red,2pt]{x+1}  % a red box around x+y with 2pt of extra space
\bbox[5px, border: 2px solid red]{x+1}
                     % a 2px red border around the math 5px away
```

--------------------------------

### Install mathjax-fira font package

Source: https://docs.mathjax.org/en/latest/server/direct.html

Install the @mathjax/mathjax-fira-font package using pnpm or npm. This is required before using the font in the conversion example.

```bash
pnpm install @mathjax/mathjax-fira-font
```

--------------------------------

### CommonJS MathJax setup with require() and loadDynamicFilesSync()

Source: https://docs.mathjax.org/en/latest/server/preload.html

Use this CommonJS example to set up MathJax with require() instead of import. It loads all dynamic font files synchronously using loadDynamicFilesSync(), which requires setting mathjax.asyncLoad to use require() and mathjax.asyncIsSynchronous to true. Note that loading all font files can increase startup time and data usage.

```javascript
const {MathJax, combineDefaults} = require('@mathjax/src/js/components/global.js');
const {insert} = require('@mathjax/src/js/util/Options.js');
require('@mathjax/src/js/components/startup.js');
require('@mathjax/src/components/js/core/core.js');
require('@mathjax/src/components/js/adaptors/liteDOM/liteDOM.js');

//
// Needed for asyncLoad below
//
const {mathjax} = require('@mathjax/src/js/mathjax.js');
const {Package} = require('@mathjax/src/js/components/package.js');

//
// Load the TeX components that we plan to use
//
require('@mathjax/src/components/js/input/tex-base/tex-base.js');
require('@mathjax/src/components/js/input/tex/extensions/ams/ams.js');
require('@mathjax/src/components/js/input/tex/extensions/newcommand/newcommand.js');
require('@mathjax/src/components/js/input/tex/extensions/color/color.js');

//
// Load the output jax
//
require('@mathjax/src/components/js/output/chtml/chtml.js');

//
// Set the font path and add the pre-loaded TeX extensions here
//
insert(MathJax.config, {
  loader: {
    paths: {
      'mathjax-newcm': '@mathjax/mathjax-newcm-font/js'
    }
  },
  tex: {
    packages: {'[+]': ['ams', 'newcommand', 'color']}
  }
}, false);

//
// Start up MathJax
//
MathJax.config.startup.ready();

//
// Load the font dynamic files
//
mathjax.asyncLoad = (file) => require(Package.resolvePath(file));
mathjax.asyncIsSynchronous = true;
MathJax.startup.document.outputJax.font.loadDynamicFilesSync();

//
// Convert some math synchronously
//
const math = process.argv[2] || ''
const adaptor = MathJax.startup.adaptor;
console.log(adaptor.outerHTML(MathJax.tex2chtml(math)));
```

--------------------------------

### Install webpack and required plugins

Source: https://docs.mathjax.org/en/latest/advanced/webpack.html

Commands to install webpack, webpack-cli, and terser-webpack-plugin for packaging custom MathJax code.

```bash
npm install webpack
npm install webpack-cli
npm install terser-webpack-plugin
```

--------------------------------

### Example proof tree using bussproofs in MathJax

Source: https://docs.mathjax.org/en/latest/input/tex/extensions/bussproofs.html

A complete proof tree example using the prooftree environment with various inference macros (\AxiomC, \UnaryInfC, \BIC, etc.). Note that in MathJax, proofs must be enclosed in \begin{prooftree} and \end{prooftree}, and the \DisplayProof command is not needed.

```latex
\begin{prooftree}
\AxiomC{}
\RightLabel{Hyp$^{1}$}
\UnaryInfC{$P$}
\AXC{$P\to Q$}
\RL{$\to_E$}
\BIC{$Q^2$}
\AXC{$Q\to R$}
\RL{$\to_E$}
\BIC{$R$}
\AXC{$Q$}
\RL{Rit$^2$}
\UIC{$Q$}
\RL{$\wedge_I$}
\BIC{$Q\wedge R$}
\RL{$\to_I$$^1$}
\UIC{$P\to Q\wedge R$}
\end{prooftree}
```

--------------------------------

### Run TeX code during startup with ready()

Source: https://docs.mathjax.org/en/latest/input/tex/macros.html

Use this configuration to process TeX definitions during startup. The 'ready()' function calls 'defaultReady()' and then uses 'tex2mml' with a raw string containing TeX commands.

```javascript
window.MathJax = {
  startup: {
    ready() {
      MathJax.startup.defaultReady();
      const {STATE} = MathJax._.core.MathItem;
      MathJax.tex2mml(String.raw`
        \newcommand{\RR}{\mathbf{R}}
        \newcommand{\bold}[1]{\mathbf{#1}}
        \let\star=\ast
      `);
    }
  }
};
```

--------------------------------

### MathJax startup configuration block

Source: https://docs.mathjax.org/en/latest/options/startup/startup.html

Example configuration object for the MathJax startup component. It sets all available startup options, including elements, typeset, ready, pageReady, document, invalidOption, optionError, input, output, handler, adaptor, and polyfillHasOwn. The comments indicate default values and behavior.

```javascript
MathJax = {
  startup: {
    elements: null,          // The elements to typeset (default is document body)
    typeset: true,           // Perform initial typeset?
    ready: Startup.defaultReady,          // Called when components are loaded
    pageReady: Startup.defaultPageReady,  // Called when MathJax and page are ready
    document: document,      // The document (or fragment or string) to work in
    invalidOption: 'fatal',  // Are invalid options fatal or produce an error?
    optionError: Startup.defaultOptionError,  // Function used to report invalid options
    input: [],               // The names of the input jax to use from among those loaded
    output: null,            // The name for the output jax to use from among those loaded
    handler: null,           // The name of the handler to register from among those loaded
    adaptor: null,           // The name for the DOM adaptor to use from among those loaded
    polyfillHasOwn: true,    // True if a polyfill for Object.hasOwn should be used when
                             //   it is not available natively
  }
};
```

--------------------------------

### Get list of TeX packages in Node using source object

Source: https://docs.mathjax.org/en/latest/upgrading/whats-new-4.0/breaking.html

Use this snippet in Node applications to get a list of main TeX packages by filtering the source object keys that start with '[tex]/'. The result is stored in AllPackages.

```javascript
import {source} from '@mathjax/src/components/js/source.js';
const AllPackages = Object.keys(source).filter((name) => name.substring(0,6) === '[tex]/').sort();
```

--------------------------------

### Start MathJax

Source: https://docs.mathjax.org/en/latest/server/preload.html

Calls the startup component's ready() method to instantiate MathJax objects and create typeset and conversion functions.

```javascript
MathJax.config.startup.ready();
```

--------------------------------

### MathJax.startup.defaultReady()

Source: https://docs.mathjax.org/en/latest/web/actions.html

Default implementation of the ready() function. Can be called from a custom ready() function to perform the usual ready() action.

```APIDOC
## MathJax.startup.defaultReady()

### Description
Default for the `ready()` function. Can be called from your `ready()` function to perform the usual `ready()` action.

### Method
Function (method)

### Usage
Call from within a custom `ready()` function.

### Parameters
None

### Returns
None

### Example
```javascript
MathJax = {
  startup: {
    ready() {
      // Custom code
      MathJax.startup.defaultReady();
    }
  }
};
```
```

--------------------------------

### Synchronous Typesetting with Speech using MathJax and SRE

Source: https://docs.mathjax.org/en/latest/server/preload.html

This snippet shows the complete setup for synchronous typesetting with speech. It imports SRE and MathJax components, configures TeX packages, adds a render action to compute speech, initializes SRE with locale and modality from command-line arguments, and converts math to CHTML synchronously. Requires installing the 'speech-rule-engine' npm module if not already present.

```javascript
 1import {MathJax} from '@mathjax/src/js/components/global.js';
 2import {insert} from '@mathjax/src/js/util/Options.js';
 3import '@mathjax/src/js/components/startup.js';
 4import '@mathjax/src/components/js/core/core.js';
 5import '@mathjax/src/components/js/adaptors/liteDOM/liteDOM.js';
 6
 7//
 8// Load code for SRE
 9//
10import '@mathjax/src/components/require.mjs';
11import '@mathjax/src/components/js/a11y/semantic-enrich/semantic-enrich.js';
12import {setupEngine, engineReady, toSpeech} from 'speech-rule-engine/js/common/system.js';
13import {STATE} from '@mathjax/src/js/core/MathItem.js';
14
15//
16// Load the TeX components that we want to use
17//
18import '@mathjax/src/components/js/input/tex-base/tex-base.js';
19import '@mathjax/src/components/js/input/tex/extensions/ams/ams.js';
20import '@mathjax/src/components/js/input/tex/extensions/newcommand/newcommand.js';
21import '@mathjax/src/components/js/input/tex/extensions/color/color.js';
22
23//
24// Load the output jax
25//
26import '@mathjax/src/components/js/output/chtml/chtml.js';
27
28//
29// Load the font to use, and any dynamic font files
30//
31import {MathJaxNewcmFont} from '@mathjax/mathjax-newcm-font/js/chtml.js';
32import '@mathjax/mathjax-newcm-font/js/chtml/dynamic/calligraphic.js';
33  //
34  // ... load any additional ones here, and add them to the array below.
35  //
36const fontPreloads = ['calligraphic'];
37
38//
39// Add the pre-loaded TeX extensions here
40//
41insert(MathJax.config, {
42  tex: {
43    packages: {'[+]': ['ams', 'newcommand', 'color']}
44  }
45}, false);
46
47//
48// Add a speech string to the root math element
49//
50function addSpeech(item) {
51  const speech = toSpeech(MathJax.startup.toMML(item.root));
52  item.root.attributes.set('aria-label', speech);
53}
54
55//
56// Add a render action that computes the speech
57//
58insert(MathJax.config, {
59  options: {
60    renderActions: {
61      addSpeech: [
62        STATE.COMPILED + 10,
63        (doc) => {for (const item of doc.math) addSpeech(item)},
64        (item, doc) => addSpeech(item)
65      ]
66    }
67  }
68}, false);
69
70//
71// Start up SRE
72//
73const locale = process.argv[3] || 'en';
74const modality = locale === 'nemeth' || locale === 'euro' ? 'braille' : 'speech';
75await setupEngine({modality, locale}).then(() => engineReady());
76
77//
78// Start up MathJax
79//
80MathJax.config.startup.ready();
81
82//
83// Activate the dynamic font files
84//
85const font = MathJax.startup.document.outputJax.font;
86const dynamic = MathJaxNewcmFont.dynamicFiles;
87fontPreloads.forEach(name => dynamic[name].setup(font));
88
89//
90// Convert some math synchronously
91//
92const math = process.argv[2] || '';
93const adaptor = MathJax.startup.adaptor;
94console.log(adaptor.outerHTML(MathJax.tex2chtml(math)));
```

--------------------------------

### Configure loader with source, dependencies, and load for custom extension

Source: https://docs.mathjax.org/en/latest/options/startup/loader.html

Extends the first example by adding a load option to load input/tex and the custom extension. The input/tex component provides input/tex-base and [tex]/newcommand, so only [tex]/enclose is loaded separately before the custom extension.

```javascript
MathJax = {
  loader: {
    source: {
      '[tex]/myExtension: 'https://my.site.com/mathjax/tex/myExtension.js'},
    },
    dependencies: {
      '[tex]/myExtension': ['input/tex-base', '[tex]/newcommand', '[tex]/enclose']
    },
    load: ['input/tex', '[tex]/myExtension']
  }
};
```

--------------------------------

### Configure input/tex component with ready and failed callbacks

Source: https://docs.mathjax.org/en/latest/options/startup/loader.html

Sets up the loader to load the input/tex component and defines ready and failed functions that log when the component loads successfully or fails. The ready function receives the component name, while the failed function receives a PackageError object with a package property.

```javascript
MathJax = {
  loader: {
    load: ['input/tex'],
    'input/tex': {
      ready: (name) => console.log(name + ' ready'),
      failed: (error) => console.log(error.package + ' failed')
    }
  }
};
```

--------------------------------

### Pre-load MathJax-NewCM font and convert math synchronously

Source: https://docs.mathjax.org/en/latest/server/preload.html

This example shows the required imports and configuration to use the MathJax-NewCM font synchronously. It loads the calligraphic dynamic font file and sets the fontData in the chtml output. The code then starts MathJax, activates the dynamic font files, and converts a math expression from the command line to HTML. Note that lines 37-39 are optional because mathjax-newcm is the default font, but they demonstrate how to configure any font.

```javascript
import {MathJax} from '@mathjax/src/js/components/global.js';
import {insert} from '@mathjax/src/js/util/Options.js';
import '@mathjax/src/js/components/startup.js';
import '@mathjax/src/components/js/core/core.js';
import '@mathjax/src/components/js/adaptors/liteDOM/liteDOM.js';

//
// Load the TeX components that we want to use
//
import '@mathjax/src/components/js/input/tex-base/tex-base.js';
import '@mathjax/src/components/js/input/tex/extensions/ams/ams.js';
import '@mathjax/src/components/js/input/tex/extensions/newcommand/newcommand.js';
import '@mathjax/src/components/js/input/tex/extensions/color/color.js';

//
// Load the output jax
//
import '@mathjax/src/components/js/output/chtml/chtml.js';

//
// Load the font to use, and any dynamic font files
//
import {MathJaxNewcmFont} from '@mathjax/mathjax-newcm-font/js/chtml.js';
import '@mathjax/mathjax-newcm-font/js/chtml/dynamic/calligraphic.js';
  //
  // ... load any additional ones here, and add them to the array below.
  //
const fontPreloads = ['calligraphic'];

//
// Add the pre-loaded TeX extensions here
//
insert(MathJax.config, {
  tex: {
    packages: {'[+]': ['ams', 'newcommand', 'color']}
  },
  chtml: {
    fontData: MathJaxNewcmFont
  }
}, false);

//
// Start up MathJax
//
MathJax.config.startup.ready();

//
// Activate the dynamic font files
//
const font = MathJax.startup.document.outputJax.font;
const dynamic = MathJaxNewcmFont.dynamicFiles;
fontPreloads.forEach(name => dynamic[name].setup(font));

//
// Convert some math synchronously
//
const math = process.argv[2] || '';
const adaptor = MathJax.startup.adaptor;
console.log(adaptor.outerHTML(MathJax.tex2chtml(math)));
```

--------------------------------

### Install MathJax via npm

Source: https://docs.mathjax.org/en/latest/web/hosting.html

Installs MathJax version 4 into the node_modules/mathjax subdirectory of your current directory.

```bash
npm install mathjax@4
```

--------------------------------

### Expected MathML output for formatError example

Source: https://docs.mathjax.org/en/latest/options/input/tex.html

The MathML representation that the formatError example would create, as shown in the documentation.

```xml
<mtext mathvariant="bold">
An error occurred!
</merror>
```

--------------------------------

### Log MathJax initialization state in startup.ready()

Source: https://docs.mathjax.org/en/latest/web/actions.html

Use this snippet to log the state of MathJax at different points during initialization. The first log occurs before MathJax.startup.defaultReady(), the second after, and the third when the initial typesetting is complete via MathJax.startup.promise.

```javascript
window.MathJax = {
  startup: {
    ready() {
      console.log("MathJax is loaded, but not yet initialized");
      MathJax.startup.defaultReady();
      console.log("MathJax is initialized and the initial typeset is queued, but hasn't run");
      MathJax.startup.promise.then(() => {
        console.log("The initial typesetting is complete");
      });
    }
  }
};
```

--------------------------------

### Inline MathJax configuration example

Source: https://docs.mathjax.org/en/latest/upgrading/earlier/upgrade.html

Shows the original inline configuration that can be replaced by a combined configuration file. It configures the TeX input and CommonHTML output jax, and loads extensions for TeX2jax, AMSmath, and AMSsymbols.

```html
<script type="text/javascript" src="/MathJax/MathJax.js">
  MathJax.Hub.Config({
    jax: ["input/TeX","output/CommonHTML"],
    extensions: ["tex2jax.js","AMSmath.js","AMSsymbols.js"]
  });
</script>
```

--------------------------------

### Chemical equation examples using \ce

Source: https://docs.mathjax.org/en/latest/input/tex/extensions/mhchem.html

Examples of chemical equations using the \ce macro. These render as chemical formulas and reactions.

```latex
\ce{[AgCl2]-}
\ce{$A$ ->[\ce{+H2O}] $B$}
\ce{SO4^2- + Ba^2+ -> BaSO4 v}
```

--------------------------------

### Configure MathJax to load custom extension with startup.js and dependencies

Source: https://docs.mathjax.org/en/latest/advanced/build/extension.html

Use this configuration when using startup.js and including input/tex in the load array. The dependencies block ensures the custom extension waits for the TeX input jax to load.

```html
<script>
MathJax = {
   loader: {
      load: ['input/tex', 'output/chtml', '[custom]/mml.min.js'],
      paths: {custom: '.'},
      dependencies: {'[custom]/mml.min.js': ['input/tex']}
   },
   tex: {
      packages: {'[+]': ['mml']}
   }
};
</script>
<script defer src="https://cdn.jsdelivr.net/npm/mathjax@4/startup.js"></script>
```

--------------------------------

### numcases environment example

Source: https://docs.mathjax.org/en/latest/input/tex/extensions/cases.html

Example of the numcases environment for a piecewise function with separate case numbering. The environment is used with the cases extension.

```latex
\begin{numcases} {|x|=}
  x, & for $x \geq 0$\\
  -x, & for $x < 0$
\end{numcases}
```

--------------------------------

### Build custom MathJax component with makeAll

Source: https://docs.mathjax.org/en/latest/advanced/build/component.html

Runs the makeAll script to process the custom build, producing custom-mathjax.min.js in the directory with the other files.

```bash
node ../node_modules/@mathjax/src/components/bin/makeAll
```
Tokens:
Raw