MathJax
MathJax is an open-source JavaScript library designed to render mathematical notation from input formats such as LaTeX, MathML, and AsciiMath into high-quality, accessible output that displays consistently across all modern web browsers without requiring special plugins or setups for end users.[1]
Developed as a collaborative project, MathJax originated from the earlier jsMath initiative started in 2004 by Davide Cervone and was formally launched in 2010 through a partnership between the American Mathematical Society (AMS), Design Science, and the Society for Industrial and Applied Mathematics (SIAM), with the goal of providing a robust, cross-platform solution for mathematical typesetting on the web.[1] The project has evolved through major versions, including a complete rewrite in TypeScript for version 3.0, released in 2019, which improved modularity and integration with modern web frameworks, and the subsequent version 4.0, released in 2025, enhancing performance and accessibility features such as support for screen readers and interactive mathematical exploration.[1] As a non-profit organization since 2022, MathJax is maintained by a dedicated team and supported by sponsorships, ensuring its continued availability for educational, scientific, and publishing applications.[1]
Key features of MathJax include its modular architecture, allowing flexible input processing and output rendering via HTML/CSS, SVG, or native MathML, which enables seamless integration into content management systems like WordPress and Moodle, as well as learning platforms for online teaching and assessments.[1] It emphasizes accessibility by producing content compatible with assistive technologies and supports copy-paste functionality for mathematical expressions into tools like word processors or computational software.[1] Widely adopted in academic publishing and e-learning, MathJax transforms static print-based mathematical content into dynamic, interactive web and ePub formats, promoting broader dissemination of scientific knowledge.[1]
History and Development
Founding and Initial Goals
MathJax was founded in 2009 as a collaborative project by the American Mathematical Society (AMS), Design Science, and the Society for Industrial and Applied Mathematics (SIAM), who formed the MathJax Consortium to develop a new solution for mathematical rendering on the web.[1][2] This initiative built on prior efforts like jsMath, aiming to create a more robust and standardized platform from the ground up.[1]
The initial goals centered on producing a cross-browser JavaScript library that could reliably display mathematical notation embedded in HTML without requiring plugins or external dependencies, thereby addressing the limitations of native browser support for MathML, which was inconsistent across platforms at the time.[3][2] Early challenges included varying browser implementations of web technologies, such as incomplete MathML rendering in major browsers like Internet Explorer and early versions of Chrome, which often resulted in poor or absent display of complex formulas.[4][5] The project emphasized high-quality, efficient rendering to make mathematics a seamless part of the web's infrastructure.[1]
From its inception, MathJax was developed as open-source software under the Apache License 2.0, fostering community contributions and broad adoption.[6][7] Early integrations with platforms like arXiv and Wikipedia highlighted its utility for scholarly publishing and collaborative knowledge bases, enabling consistent math display in these environments.[8] In 2013, the AMS transitioned to become the managing partner of the consortium.[9]
Evolution and Current Versions
In March 2013, the American Mathematical Society (AMS) became the managing partner of the MathJax Consortium following the departure of Design Science, ensuring continued development and fostering community involvement through the project's GitHub repository.[9][10]
The version 2.x series, spanning releases from 2012 to 2018, introduced key enhancements in accessibility, such as contextual menus for screen readers and partial support for MathML input and output, alongside over 200 bug fixes across sub-versions like 2.5 and 2.7.[11][12] Version 3.x, launched in 2019 as a ground-up rewrite, adopted a modular component-based architecture for greater flexibility and added native compatibility with Node.js environments, enabling server-side rendering and integration into diverse applications.[13][14]
MathJax version 4.0.0 was released on August 5, 2025, delivering improved rendering performance through optimized processing and expanded handling of input formats, including enhanced TeX extensions and output options.[15]
In April 2017, the original MathJax CDN at cdn.mathjax.org shut down due to rising hosting costs, prompting a transition to third-party providers like cdnjs.cloudflare.com and jsDelivr for distribution.[16]
As an open-source project, MathJax sustains growth through active GitHub contributions, with thousands of stars and forks reflecting community engagement, while its adoption in academic publishing—by outlets such as Elsevier, Wiley, and the American Physical Society—has rendered mathematical content accessible in millions of online articles.[17][18][19][20]
Core Functionality
Rendering Process and Outputs
MathJax's rendering process begins with the identification and parsing of mathematical expressions embedded in web content, typically delimited within HTML elements. The input jax locate these expressions and convert them into an internal representation known as MathItem objects, which store the original math strings and their locations for further processing. This intermediate format serves as a unified structure that facilitates subsequent steps in the pipeline.[21]
The core pipeline then proceeds through several render actions, executed in priority order: compilation of the internal format, gathering of font metrics for layout calculations, typesetting the mathematics into a structured form, and finally inserting the rendered output into the document. The typesetting phase processes the internal representation to generate layout and styling information, ensuring accurate visual and semantic fidelity. Font metrics are obtained dynamically to support scalable rendering across devices. Output generation relies on configurable output jax to produce the final display format.[22]
MathJax supports multiple output formats to ensure broad compatibility and accessibility. The CommonHTML output jax generates semantic HTML with CSS styling, creating accessible markup that screen readers can interpret while using web fonts such as the default New Computer Modern or supported fonts including STIX (as mathjax-stix2) for mathematical symbols; this approach prioritizes performance and fallback support in all browsers. For cases requiring precise scalability or when CSS limitations arise with complex expressions, the SVG output jax produces vector-based graphics that maintain quality at any zoom level, also leveraging web fonts such as the default New Computer Modern or other supported fonts including STIX. MathJax uses MathML internally and can serialize expressions to MathML via API for use in browsers with native support, such as Firefox, though this requires custom implementation since there is no dedicated output jax in v4.0, enhancing semantic enrichment for accessibility tools.[23][24][25]
Output jax are selected and configured via the JavaScript API during MathJax initialization, allowing developers to specify formats like CommonHTML or SVG through the loader configuration object. For instance, dynamic loading of components can be achieved with options such as loader: {load: ["output/chtml"]}, enabling on-demand rendering without preloading all assets. Customization of rendering behavior, including font preferences and output priorities, is handled through the global MathJax configuration, which permits overrides for specific document needs. This API supports asynchronous typesetting calls, such as MathJax.typesetPromise(), for integrating rendered math into dynamically generated pages.[26][27]
Accessibility and API Features
MathJax incorporates several built-in accessibility features to ensure mathematical content is usable by individuals with disabilities. The MathJax menu follows WCAG 2.0 guidelines and employs WAI-ARIA attributes.[28] It generates semantic markup in its outputs, including ARIA landmarks and roles for math elements, which allow screen readers to interpret and navigate equations as structured content rather than flat images or text.[29] For instance, MathJax enriches MathML output with attributes that describe the semantic structure of expressions, enabling assistive technologies to convey meaning beyond visual presentation.[29]
A core component is the integration with the Speech Rule Engine (SRE), which provides audio rendering of equations through rule sets like ClearSpeak and MathSpeak, supporting over a dozen languages including English, French, and German.[29] This engine generates spoken descriptions synchronized with visual highlighting, activated via keyboard commands or automatically on focus, and allows personalization of speech preferences through the MathJax contextual menu.[29] Additionally, MathJax supports braille output in formats such as Nemeth and 8-dot Euro Braille, with options for on-screen subtitles to aid low-vision users.[29]
Navigation aids further enhance accessibility via the Interactive Explorer mode, which enables step-by-step traversal of equation components using keyboard shortcuts, such as arrow keys for sibling navigation and 'S' for auto-voicing subexpressions.[29] This mode includes magnification options from 200% to 500% and semantic classifications (e.g., type, role, prefix) accessible through the menu, helping users explore complex formulas programmatically.[29] These features are enabled by loading accessibility extensions like a11y/semantic-enrich and a11y/explorer, which can be customized via configuration.[29]
MathJax's API provides extensible programmatic interfaces for integrating these accessibility tools and customizing rendering behavior. The component-based architecture allows dynamic loading of modules, such as a11y/speech for SRE integration, using the loader configuration in the MathJax setup script.[30] For on-demand rendering, methods like MathJax.typesetPromise() and mathDocument.convertPromise() enable asynchronous processing of math elements, returning promises that resolve once typesetting completes, including font loading—useful for interactive applications.[30] An example API call for dynamic rendering is:
javascript
MathJax.typesetPromise([document.getElementById('math-container')]).then(() => {
console.log('Rendering complete');
});
MathJax.typesetPromise([document.getElementById('math-container')]).then(() => {
console.log('Rendering complete');
});
This approach supports customization, such as integrating interactive input libraries like MathLive for equation editing, where user-entered LaTeX can be fed into MathJax's rendering pipeline.[1] (Note: MathLive compatibility is via standard LaTeX output, not direct API binding.)
Error handling is managed through configurable callbacks, including formatError(jax, error) for TeX input errors, which can log details like the original LaTeX source and message, and typesetError(document, math, error) for broader typesetting issues, allowing developers to suppress default red error displays or implement custom recovery.[31] Accessibility-specific customizations, such as enabling speech output or explorer mode, are set via the a11y configuration options, e.g., {explorer: true, speech: true}, ensuring seamless integration with web standards like ARIA roles for math navigation.[32] These API capabilities facilitate on-the-fly adjustments, such as rerendering with updated accessibility settings using rerenderPromise().[30]
TeX and LaTeX Support
MathJax's TeX input processor identifies and parses mathematical expressions embedded in web pages using configurable delimiters that mimic LaTeX math modes. By default, inline mathematics is delimited by pairs, while display-style equations use or $$ pairs; single dollar signs can be enabled via configuration to support legacy TeX notation, though this is disabled initially to avoid conflicts with non-mathematical uses like currency symbols.[33] Within these delimiters, MathJax processes TeX and LaTeX syntax, converting it to an internal representation for rendering, while supporting escapes like $ to treat delimiters literally.[33]
The processor replicates a wide range of core LaTeX math commands, enabling authors to write expressions such as fractions with \frac{a}{b} or summations like \sum_{i=1}^n i, which are parsed and rendered faithfully to standard LaTeX output.[34] It includes support for basic operators, symbols, and constructs from Plain TeX and LaTeX math mode, but excludes text-mode formatting, as MathJax focuses solely on mathematical content rather than full document layout.[35]
Extensions enhance this support, particularly for AMS-LaTeX, which provides advanced environments and macros loaded via configuration (e.g., adding 'ams' to tex.packages).[36] Notable features include the align environment for multi-line aligned equations, as in \begin{align} a &= b \ c &= d \end{align}, and the equation environment for numbered single equations like \begin{equation} E = mc^2 \end{equation}.[34][36] Macro definitions are handled through commands such as \newcommand{\R}{\mathbb{R}} or \def, allowing custom abbreviations within math blocks, while \DeclareMathOperator{\op}{text} defines operator names like \DeclareMathOperator{\arctanh}{arctanh}.[34] The ams extension specifically supports over 200 related macros, including \binom for binomial coefficients and \boxed for highlighting, along with matrix environments like pmatrix and bmatrix.[36]
MathJax does not perform full LaTeX document processing, limiting its scope to isolated math snippets rather than entire documents with preamble, packages, or text structure; unsupported commands trigger error reporting via a configurable formatError function that displays issues inline.[35][37] For instance, while many AMS environments like gather and multline are available, not all LaTeX packages or exotic macros are implemented, and interpretations may differ slightly from native TeX engines.[36][34]
Configuration of the TeX input jax allows customization, such as setting inlineMath and displayMath arrays for delimiters, or enabling preprocessors like processEnvironments to handle LaTeX environments outside explicit math modes and processEscapes for HTML entity handling via the texhtml extension.[37] Additional options include processRefs for cross-references like \ref and \eqref, and buffer limits to manage parsing errors in large inputs.[37] These settings ensure flexibility for web integration while maintaining focus on mathematical syntax.[37]
MathML Support
MathJax provides robust support for MathML as an input format, enabling the parsing of mathematical expressions marked up in XML-based notation. The input processor handles Presentation MathML from versions 2.0 and 3.0, converting elements such as fractions represented by <mfrac><mnum>a</mnum><mden>b</mden></mfrac> into an internal JavaScript object format for further processing.[38] In versions 2.x, MathJax included experimental support for partial Content MathML, allowing semantic expressions like those using <apply> and <ci> elements to be translated via an XSL stylesheet developed by David Carlisle.[39] This support was removed in version 3.0 and is not available in v4.0 or later, with current versions focusing solely on Presentation MathML.[38]
For output generation, earlier versions of MathJax (up to 2.7) featured a NativeMML output processor that rendered expressions directly as MathML in browsers with native support, such as Firefox and Safari, providing high-fidelity display without additional styling.[40] In versions 3.0 and later, the NativeMML processor was removed due to inconsistent browser implementations of MathML-Core, which lacks full MathML 3.0 features; instead, MathJax relies on fallbacks to HTML/CSS or SVG outputs while maintaining an internal MathML-based representation that can be serialized to native MathML via functions like MathJax.startup.toMML().[24]
MathJax extensions enhance MathML handling by supporting attributes like mathvariant and namespaces through its internal parser, ensuring consistent rendering across environments.[38] Semantic annotations are integrated via the <semantics> element, which allows embedding alternative notations (e.g., TeX or Maple) accessible through the contextual "Show Math As" menu since version 2.3.[40] This feature aids accessibility by exposing underlying semantics to assistive technologies in a single sentence.[38]
Despite these capabilities, MathJax's MathML support has limitations, particularly with advanced MathML 3.0 features such as intent expressions and full alignment groups in tables, which remain unimplemented to prioritize core functionality.[38] Table attributes like columnspan and rowspan are also partially supported, and the experimental mml3 extension in version 4.0 provides limited handling for elementary math tags like <mstack> through XSLT transformations.[38]
ASCIIMathML Support
MathJax provides support for ASCIIMath notation, a lightweight, plain-text method for entering mathematical expressions that can be parsed and rendered into high-quality output. This input format allows users to write mathematics using simple ASCII characters and symbols, such as a/b to represent a fraction or sum_(i=1)^n i for a summation from i=1 to n.[41][42]
The parsing process begins with the asciimath2jax preprocessor, which scans the document for ASCIIMath content delimited by default backticks (`...`), though customizable options like dollar signs ($...$) are available via configuration. Once identified, the ASCIIMath input processor converts the notation into MathJax's internal representation, typically MathML, supporting a wide range of symbols (e.g., Greek letters via alpha or pi), functions (e.g., sin(x) or sqrt(2)), and basic layouts like fractions, roots, and sub/superscripts. This internal format is then passed to MathJax's output processors for rendering into formats such as HTML/CSS or SVG.[41][42][43]
Configuration of ASCIIMath support is handled through MathJax's setup, where users load the input module (e.g., loader: {load: ['input/asciimath']} in versions 3 and later) and adjust preprocessor settings to define delimiters or extend symbol tables for custom notations. This integration fits into MathJax's overall rendering pipeline by preprocessing the input alongside other formats before unified output generation.[41][44]
One key advantage of ASCIIMath support is its accessibility for non-technical users, as the syntax requires no special markup knowledge and enables quick entry of common mathematical expressions in plain text environments like forums or wikis. It was introduced in early versions of MathJax, starting with version 2.0, to broaden input options and align with the original ASCIIMathML.js library developed by Peter Jipsen and David Lippman for easy web-based math display.[41][42][45]
However, ASCIIMath has limitations in expressiveness compared to more advanced formats, as it adheres to version 1.4.7 of the notation and lacks support for complex layouts or extensions like LaTeXMathML (version 2.0), making it less suitable for intricate typesetting needs. In MathJax versions 3 and 4, the implementation relies on legacy code from version 2 for compatibility, which may introduce minor inefficiencies, though full modernization is planned for future releases. Special characters within expressions, such as < or &, must be spaced or encoded (e.g., <) to avoid parsing issues.[41][42]
Browser Compatibility
MathJax has historically provided broad browser compatibility to ensure accessibility of mathematical content across diverse web environments. Early versions, such as MathJax v2, offered full support for Internet Explorer 6 and later, Firefox 3 and later, Chrome 0.3 and later, Safari 2 and later, Opera 9.5 and later, as well as modern mobile browsers including iOS Safari and Android Chrome equivalents at the time.[3] This extensive legacy support was achieved through output formats like HTML-CSS, which accommodated older rendering engines, though with varying performance levels— for instance, Internet Explorer 8 and 9 rendered faster in standards mode than in emulation of earlier versions.[3]
As of MathJax v4.0, released in August 2025, compatibility has shifted to focus on evergreen browsers, prioritizing modern web standards for improved efficiency and reliability. The CommonHTML and SVG output formats now support all recent versions of Chrome, Safari, Firefox, and Edge, along with most contemporary mobile browsers such as those on iOS and Android.[46] Internet Explorer, including version 11, is no longer supported, marking a departure from v3's use of polyfills like those from polyfill.io to enable IE11 functionality.[46][47] In legacy environments, MathJax v4 provides graceful degradation through fallback mechanisms, but users are advised to upgrade browsers for optimal rendering.[46]
Performance considerations vary across browsers due to differences in JavaScript execution, CSS support, and font handling. Rendering speeds are generally faster in modern browsers like Chrome and Firefox, where CommonHTML output leverages native capabilities for quick typesetting, though initial font loading—particularly for MathJax's web fonts—can introduce delays on slower connections.[47][48] Zoom handling is influenced by the HTML viewport meta tag; without <meta name="viewport" content="width=device-width, initial-scale=1">, mathematics may appear with small font sizes on mobile devices, affecting readability during user-initiated zooming.[46][47]
MathJax's compatibility evolves in alignment with web standards such as CSS3 and HTML5, with regular testing against browser updates to maintain support for input formats like TeX and MathML.[46] The project uses tools like Sauce Labs for cross-browser screenshots and its own test suite to identify issues, ensuring ongoing optimizations without accommodating obsolete platforms.[3][49]
Server-Side and Node.js Usage
MathJax provides robust support for server-side rendering through Node.js, enabling headless processing of mathematical expressions without browser dependencies. In version 2, this functionality was facilitated by the dedicated mathjax-node package, which offered an API for converting inputs like TeX or MathML into outputs such as HTML, SVG, or MathML on the server.[50] With the release of version 3, MathJax evolved to include native server-side capabilities via modular components, allowing seamless integration in Node.js environments similar to browser usage but with adaptations for non-DOM contexts.[5] Version 4 further refined this by introducing asynchronous loading of smaller font files and enhanced worker termination for efficiency in server applications.[51]
Key use cases for server-side MathJax include generating static images or HTML snippets from mathematical inputs for integration into PDFs, emails, or offline documents, as well as command-line tools for batch processing large volumes of content.[51] For instance, educational platforms or documentation generators can preprocess equations server-side to produce consistent, accessible outputs without client-side rendering delays.
The API in Node.js supports headless rendering through functions like MathJax.tex2svgPromise() or MathJax.tex2chtmlPromise(), which process inputs asynchronously and return serialized outputs suitable for files or streams.[51] In version 2's mathjax-node, the primary method was mjAPI.typeset(), which accepted options for input format and output type, returning promises or callbacks with results like SVG strings.[50] Outputs can be directed to streams using Node.js utilities, such as writing SVG to a file via fs.writeFileSync(). A basic example in version 4 involves importing components and typeseting:
javascript
global.MathJax = {
loader: {
paths: {mathjax: '@mathjax/src/bundle'},
load: ['input/tex', 'output/svg', 'adaptors/liteDOM'],
require: (file => import(file)),
},
output: {font: 'mathjax-newcm'}
};
await import('@mathjax/src/bundle/startup.js');
await MathJax.startup.promise;
const EM = 16, EX = 8, WIDTH = 80 * EM;
function typeset(math, display = true) {
return MathJax.tex2svgPromise(math, {display, em: EM, ex: EX, containerWidth: WIDTH})
.then((node) => {
const adaptor = MathJax.startup.adaptor;
return adaptor.serializeXML(adaptor.tags(node, 'svg')[0]);
}).catch(err => console.error(err));
}
const svg = await typeset('\\sqrt{2}');
console.log(svg);
MathJax.done();
global.MathJax = {
loader: {
paths: {mathjax: '@mathjax/src/bundle'},
load: ['input/tex', 'output/svg', 'adaptors/liteDOM'],
require: (file => import(file)),
},
output: {font: 'mathjax-newcm'}
};
await import('@mathjax/src/bundle/startup.js');
await MathJax.startup.promise;
const EM = 16, EX = 8, WIDTH = 80 * EM;
function typeset(math, display = true) {
return MathJax.tex2svgPromise(math, {display, em: EM, ex: EX, containerWidth: WIDTH})
.then((node) => {
const adaptor = MathJax.startup.adaptor;
return adaptor.serializeXML(adaptor.tags(node, 'svg')[0]);
}).catch(err => console.error(err));
}
const svg = await typeset('\\sqrt{2}');
console.log(svg);
MathJax.done();
This produces an SVG representation without DOM interaction.[51]
Configuration for server-side usage differs from browser environments primarily in the absence of DOM manipulation, requiring lightweight adaptors like liteDOM or full jsdom for HTML handling.[51] In version 3 and later, paths are set via loader.paths.mathjax to point to bundled server components (e.g., '@mathjax/src/bundle'), and startup promises must be awaited before typesetting, followed by MathJax.done() to clean up workers.[51] Version 2 configurations, managed through mjAPI.config(), focused on options like error display and font URLs but still needed jsdom for compatibility.[50] These adaptations ensure efficient, non-interactive operation in server scripts or APIs.
Integrations and Extensions
MathJax provides a modular architecture with built-in extensions that handle input processing, output rendering, and additional features like debugging and accessibility. In earlier versions such as v2, preprocessors like tex2jax and mml2jax automatically scan HTML documents for delimited mathematics—such as \dots for inline TeX or embedded MathML—and convert them into processable script elements, while the noErrors extension replaces rendering errors with placeholder images to preserve page layout during development.[52] In MathJax v3 and later, including the current v4 release, these preprocessors are deprecated in favor of explicit configuration for delimiters (e.g., via the tex input processor options) and modular component loading, with extensions like noErrors ported as TeX-specific packages for error handling.[5][53]
Version 4.0, released in August 2025, further enhances modularity, allowing easier loading of custom components and third-party extensions at runtime, which improves integration flexibility with modern web frameworks and platforms.[54]
The library integrates seamlessly with various web platforms and content management systems through dedicated plugins and native support. MediaWiki, the software powering Wikipedia, uses the MathJax extension to typeset TeX and LaTeX formulae within math environments on wiki pages.[55] WordPress incorporates MathJax via community plugins such as Simple MathJax or MathJax-LaTeX, enabling users to render mathematical expressions directly in blog posts and pages without server-side processing.[56] Jupyter Notebooks natively employ MathJax to display LaTeX equations in rendered cells, supporting interactive educational workflows. Similarly, Stack Exchange forums, including Mathematics Stack Exchange, leverage MathJax as a core partner technology to render user-submitted math in questions and answers.[57]
Community-driven third-party extensions expand MathJax's capabilities beyond core features. These include support for autoloading TeX macros on demand to reduce initial load times, custom output adapters for specialized formats like Braille, and theme adjustments for visual consistency in diverse web environments.[53] Developers can contribute or load these extensions dynamically via the loader configuration, fostering innovations such as enhanced physics notation or integration with specific accessibility tools.
MathJax's adoption underscores its role in educational and scientific ecosystems. In education, it powers tools like Jupyter for reproducible research notebooks and Moodle plugins for course materials, enabling accessible math delivery in online learning platforms.[1] In scientific publishing, organizations such as the Optical Society (OSA) and the Society for Industrial and Applied Mathematics (SIAM) rely on MathJax to render complex equations in journal articles and web content, ensuring high-fidelity display across browsers.[58][59]
Equation Editor Compatibility
MathJax facilitates seamless integration with equation editing software by supporting the import and export of mathematical expressions in standard formats such as MathML and LaTeX, enabling direct rendering without additional conversion steps. For instance, users can copy equations created in MathType, developed by Wiris, directly to the clipboard in MathML or LaTeX formats, which MathJax then processes and displays in web browsers. Similarly, Wiris equation editor outputs can be exported as MathML for immediate rendering by MathJax on websites, ensuring compatibility across authoring and display environments.[60]
This bidirectional compatibility extends to workflows where equations rendered by MathJax in browsers can be copied back into editors for modification. MathJax's contextual menu allows users to select and copy rendered equations as source LaTeX code or MathML markup, which can then be pasted into tools like MathType for editing, preserving the original structure and avoiding reformatting. Conversely, web-based editing in compatible editors produces output that MathJax renders natively, supporting iterative development of mathematical content directly in browser environments.[61][62]
Specific integrations include live editors such as MathQuill, an open-source web-based formula editor that outputs LaTeX or MathML expressions compatible with MathJax rendering. MathQuill enables inline editing of mathematical input, generating markup that MathJax processes in real-time for display, often used in interactive web applications for dynamic equation creation. Additionally, MathJax handles clipboard data through specialized MIME types, such as math/[tex](/page/TeX) for LaTeX and math/mml for MathML, allowing equations to be transferred between editors and web pages while maintaining semantic integrity.[63][64]
In practical workflows, this compatibility supports seamless transfers, such as authoring an equation in MathType, exporting it as LaTeX to a web document, and having MathJax render it without loss of fidelity, or copying a rendered equation from a MathJax-enabled page into Wiris for further adjustments before re-pasting for updated display. These processes minimize reformatting needs, enhancing efficiency in educational and publishing contexts where equations move between desktop editors and web platforms.[60][61]
Deployment and Distribution
CDN Servers and Hosting
The MathJax Consortium operated a dedicated content delivery network (CDN) at cdn.mathjax.org, which provided free access to MathJax files from its inception until its shutdown on April 30, 2017.[16] This service experienced significant growth in usage, peaking at approximately 70 terabytes of monthly traffic and serving 179 million users with 3.3 billion requests shortly before closure.[16] The shutdown was driven by escalating hosting costs on CloudFlare and a strategic shift toward core development rather than infrastructure maintenance.[16]
Following the closure, MathJax files are distributed through third-party CDNs such as jsDelivr (via cdn.jsdelivr.net), cdnjs (via cdnjs.cloudflare.com), and unpkg (via unpkg.com), which host the latest versions and allow specification of exact releases like MathJax v4.0.0.[65] These options enable users to load MathJax without local installation by including script tags pointing to the desired endpoint, such as <script src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-mml-chtml.js"></script>.[65] For enhanced privacy—avoiding third-party tracking—and optimized performance in controlled environments, self-hosting is recommended, where files are downloaded and served from a user's own server or local storage.
Using CDNs offers key benefits, including reduced load times through global edge caching, where content is delivered from servers geographically close to the user for lower latency.[65] Versioning support ensures stability by allowing pinned loads, such as @4.0.0, preventing unexpected updates from breaking existing implementations.[65] On security and reliability, all recommended CDNs enforce HTTPS by default to protect against interception, and users can implement fallback mechanisms—such as conditional script loading to alternative endpoints—if a primary CDN fails.[65]
Installation and Configuration Methods
MathJax can be installed through several methods, depending on the project requirements and environment. For web-based applications, the simplest approach is to load MathJax directly from a content delivery network (CDN) using a script tag, which avoids the need for local hosting and ensures automatic updates.[66] Alternatively, for local installations, users can download the MathJax files from the official GitHub repository releases, where pre-built bundles are available for direct integration into web servers or static sites.[67] For Node.js projects or those requiring server-side rendering, MathJax is available as an npm package, installable via the command npm install mathjax@4, allowing programmatic access to its typesetting engine.
Configuration of MathJax begins with defining options in a global MathJax object before loading the script, enabling customization of input processors, output formats, and extensions. In version 4.0 and later, MathJax uses combined component files for efficient loading, such as tex-mml-chtml.js for TeX and MathML input with CommonHTML output. A basic example involves embedding the configuration in an inline script followed by the MathJax loader:
html
<script>
MathJax = {
tex: {
inlineMath: { '[+]': [['$', '$'], ['\$', '\$']] }
}
};
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-mml-chtml.js"></script>
<script>
MathJax = {
tex: {
inlineMath: { '[+]': [['$', '$'], ['\$', '\$']] }
}
};
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-mml-chtml.js"></script>
This setup processes inline math delimited by single or double dollar signs and parentheses. For modular loading in version 3.0 and above, the loader option can dynamically fetch additional components, such as TeX packages, via loader: {load: ['[tex]/html']} to include HTML extensions without pre-bundling everything.[68][69]
Best practices for installation and configuration emphasize performance and compatibility. In production environments, use minified combined files from CDNs or local copies to reduce load times, and include the defer or async attribute on script tags to prevent blocking page rendering while ensuring configuration executes first. For older browsers lacking modern JavaScript features, incorporate polyfills such as those for Promises, as MathJax v3+ relies on them for asynchronous operations; environment-specific setups, like bundling with Webpack for single-page applications, further optimize delivery by creating custom builds.[70][71]
Common troubleshooting issues include font loading failures, often resolved by enabling the global font cache in output options (e.g., chtml: {fontCache: 'global'}) to share resources across elements, and incorrect JAX selection, which can be fixed by verifying input/output combinations in the configuration, such as ensuring tex is enabled for LaTeX processing. If math expressions fail to render, check console errors for missing packages and add them via tex: {packages: {'[+]': ['base', 'ams']}}. Delays in startup can occur if scripts load out of order, so always place configuration before the MathJax script.[68][69]