MathJax DocumentationÂ¶
MathJax is an opensource JavaScript display engine for LaTeX, MathML, and AsciiMath notation that works in all modern browsers, with builtin support for assistive technology like screen readers.
Version 3.0 of MathJax is a complete rewrite of MathJax from the ground up, and its usage and configuration is significantly different from that of MathJax version 2. Use the green menu at the bottom of the sidebar on the left to access the version 2 documentation if you need it.
What is MathJax?Â¶
MathJax is an opensource JavaScript display engine for LaTeX, MathML, and AsciiMath notation that works in all modern browsers. It was designed with the goal of consolidating the recent advances in web technologies into a single, definitive, mathontheweb platform supporting the major browsers and operating systems, including those on mobile devices. It requires no setup on the part of the user (no plugins to download or software to install), so the page author can write web documents that include mathematics and be confident that users will be able to view it naturally and easily. One simply includes MathJax and some mathematics in a web page, and MathJax does the rest.
MathJax uses webbased fonts to produce highquality typesetting that scales and prints at full resolution, unlike mathematics included as bitmapped images. With MathJax, mathematics is textbased rather than imagebased, and so it is available for search engines, meaning that your equations can be searchable, just like the text of your pages. MathJax allows page authors to write formulas using TeX and LaTeX notation, MathML (a World Wide Web Consortium standard for representing mathematics in XML format), or AsciiMath notation. MathJax can generate output in several formats, including HTML with CSS styling, or scalable vector graphics (SVG) images.
MathJax includes the ability to generate speakable text versions of your mathematical expressions that can be used with screen readers, providing accessibility for the visually impaired. The assistive support in MathJax also includes an interactive expression explorer that helps these users to âwalk throughâ an expression one piece at a time, rather than having to listen to a complex expression all at once, and the ability to âcollapseâ portions of the expressions to allow a more simplified expression to be read, and only expanded if more detail is desired.
MathJax is modular, so it can load components only when necessary, and can be extended to include new capabilities as needed. MathJax is highly configurable, allowing authors to customize it for the special requirements of their web sites. Unlike earlier versions of MathJax, version 3 can be packaged into a single file, or included as part of larger bundles for those sites that manage their javascript assets in that way.
Finally, MathJax has a rich application programming interface (API)
that can be used to make the mathematics on your web pages interactive
and dynamic. Version 3 has been rewritten in ES6 using Typescript (a
version of javascript that includes typechecking and the ability to
transpile to ES5). It was designed to be used as easily on a server
(as part of a node.js
application) as it is in a browser. This makes
preprocessing of web pages containing mathematics much easier than
with version 2, so web sites can perform all the math processing once
up front, rather than having the browser do it each time the page is
viewed.
Accessibility FeaturesÂ¶
MathJaxâs mission is to provide the best tools for mathematics on the web. Naturally, this means for everyone and thus accessibility is an important concern for us.
MathJax User InterfaceÂ¶
The MathJax user interface currently consists of the MathJax Menu and the various MathJax messages, such as syntax error messages from the TeX input processor.
The user interface for version 2 was localized to over 20 languages and many more partial localizations thanks to the fantastic support of the community at TranslateWiki.net. Localization is not yet available in version 3, but is on the roadmap for a future version.
The MathJax Menu follows WCAG 2.0 guidelines. Each MathJax fragment is included in the tab order; the menu can be triggered via the space or menu key; and navigation in the menu is possible using the arrow keys.
MathJax Accessibility ExtensionsÂ¶
The MathJax Accessibility extensions provide several tools and features that enable universal rendering of mathematics on the web. They enhance rendering both visually and aurally. In particular:
 An innovative responsive rendering of mathematical content through collapsing and exploration of subexpressions.
 An aural rendering tool providing onthefly speechtext for mathematical content and its subexpressions using various rule sets.
 Tactile rendering tool enabling Nemeth Braille output on a connecte Braille displays.
 An exploration tool, allowing for meaningful exploration of mathematical content including multiple highlighting features, magnification and synchronized aural rendering.
The Accessibility Extensions support the widest selection of browsers, operating systems, and assistive technologies as they only require the use of wellsupported web standards such as WAIARIA, in particular labels and live regions.
Note
We strongly suggest that you use the MathJax Accessibility extensions to provide the best possible experience for all users.
The Accessibility Extensions can be enabled using the MathJax
Contextual Menu (rightclick on any typeset expression), and are
loaded automatically when enabled. The contextual menu code is
included in all the combined MathJax components, such as texchtml
and mmlsvg
. If you are making a custom configuration, you can
include ui/menu
to enable the contextual menu, or you can include
any of the a11y extensions explicitly.
Legacy Support via AssistiveMML.jsÂ¶
Some screen readers support MathML, MathJaxâs internal format. Screenreaders like ChromeVox, JAWS (on IE), and Texthelp support MathJax directly; other screenreaders were supported in version 2 by its AssistiveMML extension.
Note
The AssistiveMML extension has not ben ported to version 3, but you can implement a workalike, as described in the AssistiveMML section.
The AssistiveMML
extension embeds visually hidden MathML alongside
MathJaxâs visual rendering while hiding the visual rendering from
assistive technology (AT) such as screenreaders. This allows most
MathMLenabled screenreaders to read out the underlying
mathematics. Itâs important to note that Presentation MathML is
usually not expressive enough to voice the mathematics properly in all
circumstances, which is why screenreaders have to rely on heuristics
to analyze the MathML semantically.
The quality of MathML support in screenreaders varies greatly, with different levels of MathML feature support, different speech rule sets, and different voicing technologies.
The expected result for MathJax given the current state of technology is roughly the following:
 The visuallyhidden MathML is read out correctly by AT (i.e., not
just the character strings but, e.g.,
<mfrac>
leads to âfractionâ; this will vary with the MathML support of the screenreader).  The visual rendering is not read out by AT
 The MathJax Menu triggers AT to say âclickableâ before each math element.
 This allows keyboard users to enter the MathJax Menu via space or menu key.
 The visually hidden MathML does not get an outline (usually placed
at an odd location due to the target of the outline being visually
hidden).
 except in iOS VoiceOver, where this allows the user to hook into VoiceOverâs exploration features.
Support Matrix (AssistiveMML.js)Â¶
Below is a summary of results for MathML enabled screenreaders and the legacy AssistiveMML extension, based on tests as well as user reports.
Screenreader  Browser  OS  Usable?  Bugs 

ChromeVox  Chrome  any  +1  no bugs 
NVDA  any  WinXP  DNA  MathPlayer 4 does not support WinXP 
NVDA  Chrome  any  DNA  Chrome issues prevent MathML support by NVDA 
NVDA  Firefox  Win7  +1  no bugs 
NVDA  Firefox  Win8.1  +1  no bugs 
NVDA  Firefox  Win10  +1  no bugs 
NVDA  MS Edge  Win10  DNA  Edge issues prevent MathML support by NVDA 
NVDA  IE11  Win8.1  +1  no bugs 
NVDA  IE10  Win7  +1  no bugs 
NVDA  IE9  Win7  +1  no bugs 
JAWS  any  WinXP  DNA  JAWS 15 was the last version to support Windows XP but MathML support in JAWS starts with JAWS 16 
JAWS  Chrome  any  DNA  JAWS only supports IE and Firefox 
JAWS  Firefox  Win8.1  +1  no bugs 
JAWS  Firefox  Win7  +1  no bugs 
JAWS  Firefox  Win10  +1  no bugs 
JAWS  MS Edge  Win10  DNA  JAWS only supports IE and Firefox 
JAWS  IE11  Win8.1  +1  no bugs 
JAWS  IE10  Win7  +1  no bugs 
JAWS  IE9  Win7  +1  no bugs 
VoiceOver  Safari  OSX  +1  see notes below 
VoiceOver  Chrome  OSX  DNA  Chrome and VoiceOver issues prevent MathML support in this combination. 
VoiceOver  Firefox  OSX  DNA  Chrome and Firefox issues prevent MathML support in this combination. 
Orca  Firefox  Ubuntu 15.10  +1  no bugs 
Orca  Web  Ubuntu 15.10  DNA  Chrome issues prevent MathML support by ORCA 
Orca  Chrome(ium)  Ubuntu 15.10  DNA  Chrome issues prevent MathML support by ORCA 
Notes on Apple VoiceOverÂ¶
 VoiceOver on OSX
 Safari. The visuallyhidden MathML is read out and gets an outline. Visual rendering is ignored correctly. VoiceOver somtimes drops parts of the equation due to its partial MathML support.
 Chrome. The visuallyhidden MathML is detected but VoiceOver does not read it correctly (only e.g., â4 items detected; mathâ; this seems like a VO bug); an outline is added. Visual rendering is ignored correctly.
 Firefox. The visuallyhidden MathML is only read as a string of contained characters; an outline is added. Visual rendering is ignored correctly.
 VoiceOver on iOS
 The âslide two fingers from top to read screenâ method will read the visuallyhidden MathML. Visual rendering is ignored correctly.
 Manual exploration.
 Exploration by swiping left/right will read the visuallyhidden MathML. Visual rendering is ignored correctly.
 Tapping on an equation does not work due to the visuallyhidden MathML being placed in a 1px box.
Notes on MathPlayer 4 and Internet Explorer 11Â¶
Design Science suggests that you always use IEâs Enterprise mode for MathPlayer in IE11, see their documentation. However, it seems that this is only required for MathPlayerâs visual rendering to work and this additionally requires the MathPlayer BrowserHelperAddon to be active in IE.
Unfortunately, the MathPlayer BrowserHelperAddon can lead to crashes. E.g., if you switch MathJaxâs output to the NativeMML output, MathPlayer will crash IE11; youâll have to clear the MathJax cookie to reset things. Also, in a plain MathML sample (without MathJax), clicking on the MathPlayer rendering will crash IE11.
Using IEâs Enterprise mode should work with NVDA and the AssistiveMML extension but they donât seem to work with NVDA and plain MathML pages.
We suggest you do not switch on IEâs Enterprise mode on pages using MathJax and we also have to strongly suggest that you not use the BrowserHelperAddon with MathJax on IE11.
More InformationÂ¶
Accessibility ExtensionÂ¶
MathJax offers accessibility support via its own builtin extension that provides a choice of support options as well as a high degree of personalization. The extension can be activated either via the context menu, which itself is fully accessible, or by default using configuration options. Similarly its various features and options are best selected via the MathJax Menu or programmatically using the accessibility options. We discuss the different features of the accessibility tool at the hand of the context menu, roughly in the order in which they appear.
Most features of the Accessibility extensions are based on technology provided by the Speech Rule Engine. For some more details and information please also see there.
MathJaxâs supports the widest selection of browsers, operating systems, and assistive technologies as they only require the use of wellsupported web standards such as WAIARIA, in particular labels and live regions.
Interactive ExplorationÂ¶
The main feature is an interactive exploration mode that allows a reader to traverse and explore subexpressions stepbystep. The explorer is activated in the context menu by checking the Activate item in the Accessibility submenu.
Once a math expression is focused, the explorer can be started by pressing the Enter key. The cursor keys then allow traversal of the expression.
Keyboard Explorer CommandsÂ¶
The keyboard explorer is used to interact with a mathematical expression using keyboard commands. Interaction allows a reader to traverse an expression in a mathematical meaningful way, examining subexpressions and diving into details as they see fit.
The keyboard explorer supports multiple types of output: Speech and Braille output for the subexpression that is explored, magnification of that subexpression, and synchronised highlighting with the navigation.
Navigation can be started when a MathJax expression is focused and quit at any time during the exploration. When navigation is restarted, the application will continue where the user has left off within the expression.
Enter  Activate explorer. Requires math expression to have the focus. 
Escape  Leave exploration mode. 
Down  Explore next lower level of the formula by moving down in the subexpression tree. Exploration will start at the leftmost subexpression on the level. 
Up  Move up the subexpression tree. 
Right  Navigate the expression horizontally by moving to the next subexpression on the current level. 
Left  Navigate the expression horizontally by moving to the previous subexpression on the current level. 
An earcon is played as indicator that the boundary of an expression has been reached in either direction.
Tab  Repeat previous speechtext or announcement. 
Space  Get positional information; i.e., the current level in the subexpression tree as well as collapsibility/expandability of the current subexpression. 
Enter  Collapse or expand expression under cursor, if possible. Speechtext is regenerated to match. 
Home  Navigate directly to topmost level of expression. 
X  Summarise the expression under cursor, without collapsing it. 
Z  Give detailed description of expression under cursor, without expanding it. 
V  Start new virtual cursor from the current position. 
P  Go to last position or previous virtual cursor 
U  Undo all virtual cursors; i.e.; go to position where first virtual cursor was started. 
>  Switch rule sets between MathSpeak and ClearSpeak, if both are available for the current locale. 
<  Cycle styles or preferences for the currently active rule sets. 
Note
Depending on the implementation quality of the particular browser/screenreader/OS combination (especially Chrome and IE), users might have to disable screenreader reading modes (e.g., âbrowse modeâ in NVDA, âvirtual cursorâ in JAWS) before being able to launch the MathJax explorer application.
During traversal, focused subexpressions are highlighted and optionally magnified. In addition, an aural rendering is pushed to a screen reader, if one is available, and a tactile rendering can be read on a Braille display, if one is connected.
Speech & Braille SupportÂ¶
Both aural and tactile rendering can be controlled via the options in the Speech submenu. Speech Output and Braille Output, respectively, control whether or not speech or Braille output is generated. If speech is generated, it is by default also displayed in Speech Subtitles, which can be switched off and hidden. Braille on the other hand is by default hidden but can be displayed by switching on the Braille Subtitles.
Speech is generally generated with respect to the currently chosen locale (if it is available). In addition, there are a number of different rule sets that can be chosen for translating math to text, where each can have a number of different preferences for how a particular expression is spoken. By default, MathJax uses the MathSpeak rule set in Verbose mode; however, the menu allows this to be changed to either the ClearSpeak or ChromeVox. Each rule set has several different preference settings; three in the case of MathSpeak, for example, which primarily influence the length of produced text. ClearSpeak on the other hand has a large number of preferences that allow very finetuned control over how different types of expressions are spoken. The MathJax menu allows a smart choice of preferences by only displaying the preferences that are currently relevant for the subexpression that is currently explored.
Some ruleset and preference settings can also be controlled by keyboard commands. This allows the user to have the same expression read in different variants without having to leave the exploration mode. The > key switches rule sets between MathSpeak and ClearSpeak if both are available for the current locale. The < key cycles preferences for the currently active rule set. For ClearSpeak rules, preference cycling depends on the type of the currently explored subexpression, similar to smart selection of menu entries.
Note
MathJax currently only supports speech in English, French, and Spanish. The only available Braille output is Nemeth. We are hoping to add more in the future.
In addition to voicing expressions, the explorer allows for queries on subexpression, such as getting positional information with respect to the context, as well as summaries of the subexpression currently explored.
AbstractionÂ¶
In addition to textual summaries of expressions, MathJax offers the possibility to abstract certain subexpressions so that the entire subexpression is visually replaced by a placeholder symbol and interactive traversal treats it as a single element. This allows the reader to abstract away details and to better observe the overall structure of a formula.
Abstraction can be triggered either via mouse click on a collapsible expression or via pressing the Enter key during keyboard exploration. Expressions that can be abstracted can also be discovered using some of the highlighting features.
HighlightÂ¶
During interactive exploration, the subexpression that is explorered is automatically highlighted, by default with a blue background color. The highlighting can be customized by changing Background or Foreground colors in in the Highlight submenu of the MathJax contextual menu.
In addition, there is choice of highlighters for marking collapsible subexpressions: The Flame highligher permanently colors collapsible subexpressions while successively darkening the background for nested collapsible expressions. The Hover highlighter colors each collapsible subexpression only when hovering over it with the mouse pointer.
A final highlighting feature is Tree Coloring, in which expressions are visually distinguished by giving neighbouring symbols different, ideally contrasting foreground colors.
MagnificationÂ¶
During exploration, the accessibility extension can optionally magnify the subexpression that is currently explored. The zoomed version of the expression is overlayed on the original one when traversing the formula. For keyboard exploration, this can be switched on in the Magnification submenu by selecting the Keyboard option.
A similar effect can be achieved by exploring an expression with the mouse. When using the Mouse option in the Magnification submenu, the subexpression over which the mouse pointer hovers is zoomed.
The zoom factor of the magnification can also be adjusted. The values available in the context menu are 200%, 300%, 400%, and 500%.
Semantic InfoÂ¶
The Semantic Info submenu contains a number of options that allow the reader to see the semantic classifications MathJax applies to a particular subexpression, by hovering over it with the mouse pointer. The choices here are
 Type is an immutable property of an expression that is independent of its particular position in a formula. Note, however that types can change depending on the subject area of a document.
 Role is dependent on the context of a subexpression in the overall expression.
 Prefix
is information pertaining to the position of a
subexpression. Examples are
'exponent'
,'radicand'
, etc. These would also be spoken during interactive exploration.
For more details on all of these concepts, see also the documentation of the Speech Rule Engine.
Writing Mathematics for MathJaxÂ¶
Putting mathematics in a web pageÂ¶
To put mathematics in your web page, you can use TeX and LaTeX notation, MathML notation, AsciiMath notation, or a combination of all three within the same page; the MathJax configuration tells MathJax which you want to use, and how you plan to indicate the mathematics when you are using TeX/LaTeX or AsciiMath notation. These three formats are described in more detail below.
TeX and LaTeX inputÂ¶
Mathematics that is written in TeX or LaTeX format is indicated using math delimiters that surround the mathematics, telling MathJax what part of your page represents mathematics and what is normal text. There are two types of equations: ones that occur within a paragraph (inline mathematics), and larger equations that appear separated from the rest of the text on lines by themselves (displayed mathematics).
The default math delimiters are $$...$$
and \[...\]
for
displayed mathematics, and \(...\)
for inline mathematics. Note
in particular that the $...$
inline delimiters are not used
by default. That is because dollar signs appear too often in
nonmathematical settings, which could cause some text to be treated
as mathematics unexpectedly. For example, with singledollar
delimiters, ââŠ the cost is $2.50 for the first one, and $2.00 for
each additional one âŠâ would cause the phrase â2.50 for the first
one, andâ to be treated as mathematics since it falls between dollar
signs. See the section on TeX and LaTeX Math Delimiters for more information on using dollar signs as
delimiters.
Here is a complete sample page containing TeX mathematics (see the MathJax Web Demos Repository for more).
<!DOCTYPE html>
<html>
<head>
<title>MathJax TeX Test Page</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script type="text/javascript" id="MathJaxscript" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/texchtml.js">
</script>
</head>
<body>
When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {b \pm \sqrt{b^24ac} \over 2a}.$$
</body>
</html>
Since the TeX notation is part of the text of the page, there are some caveats that you must keep in mind when you enter your mathematics. In particular, you need to be careful about the use of lessthan signs, since those are what the browser uses to indicate the start of a tag in HTML. Putting a space on both sides of the lessthan sign should be sufficient, but see TeX and LaTeX support for more details.
If you are using MathJax within a blog, wiki, or other content management system, the markup language used by that system may interfere with the TeX notation used by MathJax. For example, if your blog uses Markdown notation for authoring your pages, the underscores used by TeX to indicate subscripts may be confused with the use of underscores by Markdown to indicate italics, and the two uses may prevent your mathematics from being displayed. See TeX and LaTeX support for some suggestions about how to deal with the problem.
There are a number of extensions for the TeX input processor that are
loaded by combined components that include the TeX input format (e.g.,
texchtml.js
), and others that are loaded automatically when
needed. See TeX and LaTeX Extensions for
details on TeX extensions that are available.
MathML inputÂ¶
For mathematics written in MathML notation, you mark your mathematics
using standard <math>
tags, where <math display="block">
represents displayed mathematics and <math display="inline">
or
just <math>
represents inline mathematics.
MathML notation will work with MathJax in HTML files, not just XHTML
files, even in older browsers and that the web page need not be served
with any special MIMEtype. Note, however, that in HTML (as opposed to
XHTML), you should not include a namespace prefix for your <math>
tags; for example, you should not use <m:math>
except in an XHTML file
where you have tied the m
namespace to the MathML DTD by adding the
xmlns:m="http://www.w3.org/1998/Math/MathML"
attribute to your fileâs
<html>
tag.
In order to make your MathML work in the widest range of situations,
it is recommended that you include the
xmlns="http://www.w3.org/1998/Math/MathML"
attribute on all
<math>
tags in your document (and this is preferred to the use of
a namespace prefix like m:
above, since those are deprecated in
HTML5), although this is not strictly required.
Here is a complete sample page containing MathML mathematics (see the MathJax Web Demos Repository for more).
<!DOCTYPE html>
<html>
<head>
<title>MathJax MathML Test Page</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script type="text/javascript" id="MathJaxscript" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/mmlchtml.js">
</script>
</head>
<body>
<p>
When
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mi>a</mi><mo>≠</mo><mn>0</mn>
</math>,
there are two solutions to
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mi>a</mi><msup><mi>x</mi><mn>2</mn></msup>
<mo>+</mo> <mi>b</mi><mi>x</mi>
<mo>+</mo> <mi>c</mi> <mo>=</mo> <mn>0</mn>
</math>
and they are
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
<mi>x</mi> <mo>=</mo>
<mrow>
<mfrac>
<mrow>
<mo>−</mo>
<mi>b</mi>
<mo>±</mo>
<msqrt>
<msup><mi>b</mi><mn>2</mn></msup>
<mo>−</mo>
<mn>4</mn><mi>a</mi><mi>c</mi>
</msqrt>
</mrow>
<mrow>
<mn>2</mn><mi>a</mi>
</mrow>
</mfrac>
</mrow>
<mtext>.</mtext>
</math>
</p>
</body>
</html>
When entering MathML notation in an HTML page (rather than an XHTML page), you should not use selfclosing tags, as these are not part of HTML, but should use explicit open and close tags for all your math elements. For example, you should use
<mspace width="5pt"></mspace>
rather than <mspace width="5pt" />
in an HTML document. If you
use the selfclosing form, some browsers will not build the math tree
properly, and MathJax will receive a damaged math structure, which
will not be rendered as the original notation would have been.
Typically, this will cause parts of your expression to not be
displayed. Unfortunately, there is nothing MathJax can do about that,
since the browser has incorrectly interpreted the tags long before
MathJax has a chance to work with them.
See the MathML page for more on MathJaxâs MathML support.
AsciiMath inputÂ¶
MathJax v2.0 introduced a new input format, AsciiMath notation, by incorporating ASCIIMathML. This input processor has not been fully ported to MathJax version 3 yet, but there is a version of it that uses the legacy version 2 code to patch it into MathJax version 3. None of the combined components currently include it, so you would need to specify it explicitly in your MathJax configuration in order to use it. See the AsciiMath page for more details.
By default, you mark mathematical expressions written in AsciiMath by
surrounding them in âbackticksâ, i.e., `...`
.
Here is a complete sample page containing AsciiMath notation:
<!DOCTYPE html>
<html>
<head>
<title>MathJax AsciiMath Test Page</title>
<script>
MathJax = {
loader: {load: ['input/asciimath', 'output/chtml']}
}
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script type="text/javascript" id="MathJaxscript" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/startup.js">
</script>
<body>
<p>When `a != 0`, there are two solutions to `ax^2 + bx + c = 0` and
they are</p>
<p style="textalign:center">
`x = (b + sqrt(b^24ac))/(2a) .`
</p>
</body>
</html>
See the AsciiMath support page for more on MathJaxâs AsciiMath support and how to configure it.
Putting Math in Javascript StringsÂ¶
If your are using javascript to process mathematics, and need to put a
TeX or LaTeX expression in a string literal, you need to be aware that
javascript uses the backslash (\
) as a special character in
strings. Since TeX uses the backslash to indicate a macro name, you
often need backslashes in your javascript strings. In order to
achieve this, you must double all the backslashes that you want to
have as part of your javascript string. For example,
var math = '\\frac{1}{\\sqrt{x^2 + 1}}';
This can be particularly confusing when you are using the LaTeX macro \, which must both be doubled, as \. So you would do
var array = '\\begin{array}{cc} a & b \\\\ c & d \\end{array}';
to produce an array with two rows.
The MathJax CommunityÂ¶
If you are an active MathJax user, you may wish to become involved in the wider community of MathJax users. The MathJax project maintains forums where users can ask questions about how to use MathJax, make suggestions about future features for MathJax, and present their own solutions to problems that they have faced. There is also a bugtracking system where you can report errors that you have found with MathJax in your environment.
Mailing ListsÂ¶
If you need help using MathJax or you have solutions you want to share, please post to the MathJax Users Google Group. We try hard to answer questions quickly, and users are welcome to help with that as well. Also, users can post code snippets showing how they have used MathJax, so it may be a good place to find the examples you are looking for.
If you want to discuss MathJax development, please use the MathJax Dev Google Group. We made this group to discuss anything beyond what an enduser might be interested in, so if you have any suggestions or questions about MathJax performance, technology, or design, feel free to submit it to the group.
The community is only as good as the users who participate, so if you have something to offer, please take time to make a post on one of our groups.
Issue trackingÂ¶
Found a bug or want to suggest an improvement? Post it to our issue tracker. We monitor the tracker closely, and work hard to respond to problems quickly.
Before you create a new issue, however, please search the issues to see if it has already been reported. You could also be using an outdated version of MathJax, so be sure to upgrade your copy to verify that the problem persists in the latest version.
See the section on Reporting Issues for more detailed instructions.
DocumentationÂ¶
The source for this documentation can be found on github. You can file bug reports on the documentationâs bug tracker and actively contribute to the public documentation wiki.
âPowered by MathJaxâÂ¶
If you are using MathJax and want to show your support, please consider using our âPowered by MathJaxâ badge.
Reporting IssuesÂ¶
If you come across a problem with MathJax, please report it so that the development team and other users are aware and can look into it. It is important that you report your problem following the steps outlined here because this will help us to rapidly establish the nature of the problem and work towards a solution effectively.
To report a problem, please follow these steps:
 Have you cleared your browser cache, quit your browser, and restarted it? If not, please do so first and check if the problem persists. These instructions tell you how to clear your cache on the major browsers.
 Have you turned off other extensions and plugins in your browser, and restarted it?
 Have a look at the math rendering examples on www.mathjax.org to see if you experience problems there as well. This might help you to determine the nature of your problem.
 If possible, check whether the problem has been solved in the latest MathJax release.
 Search through the MathJax User Group and the MathJax issue tracker to see if anyone else has come across the problem before.
 Found a real and new problem? Please report it to the MathJax issue
tracker including the
following information:
 A detailed description of the problem. What exactly is not working as you expected? What do you see?
 The MathJax version you are working with, your operating system, and full browser information including all version information.
 If at all possible, a pointer to a webpage that is publicly available and exhibits the problem. This makes sure that we can reproduce the problem and test possible solutions. You can create minimal examples using such tools as jsfiddle, jsbin, codepen, or codesandbox.
Getting Started with MathJax ComponentsÂ¶
MathJax allows you to include mathematics in your web pages, either using LaTeX, MathML, or AsciiMath notation, and the mathematics will be processed using JavaScript to produce HTML or SVG for viewing in any modern browser.
MathJax ComponentsÂ¶
To make using MathJax easier in web pages, the various pieces that make up MathJax have been packaged into separate files called âcomponentsâ. For example, there is a component for MathML input, and one for SVG output, and the various TeX extensions are packaged as separate components. You can mix and match the various components to customize MathJax to suit your particular needs (this is described in detail in the section on Configuring MathJax below); the individual component files that you specify are loaded when MathJax starts up.
There are also components that combine several others into one larger
file that loads everything you need to run MathJax all at once. These
represent some of the standard combinations of input and output
formats, and you will probably find one of these that suits your
needs. You can configure the various
components in order to customize how they run, even when they are
loaded as part of a combined component. For example, you can set the
delimiters to be used for inline and displayed math for the TeX input
component whether the TeX component was loaded individually, or as
part of the texchtml
component.
It is even possible for you to create your own components or custom builds of MathJax, or incorporate the MathJax components into larger files that contain other assets your website might need (see the section on Making a Custom Build of MathJax for more details).
Ways of Accessing MathJaxÂ¶
There are two ways to access MathJax for inclusion in web pages: link
to a content delivery network (CDN) like cdn.jsdelivr.net
to obtain a
copy of MathJax, or download and install a copy of MathJax on your own
server (for network access) or hard disk (for local use without a
network connection). The first method is described below, while the
second is discussed in the section on Hosting Your Own Copy of MathJax.
This page gives the quickest and easiest ways to get MathJax up and running on your web site, but you may want to read the details in the linked sections in order to customize the setup for your pages.
Using MathJax from a Content Delivery Network (CDN)Â¶
The easiest way to use MathJax is to link directly to a public installation available through a Content Distribution Network (CDN). When you use a CDN, there is no need to install MathJax yourself, and you can begin using MathJax right away. The CDN will automatically arrange for your readers to download MathJax files from a fast, nearby server.
To use MathJax from a CDN, you need to do three things:
 Include a MathJax configuration in your page (this may be optional in some cases).
 Link to MathJax in the web pages that are to include mathematics.
 Put mathematics into your web pages so that MathJax can display it.
There are many free CDN services that provide copies of MathJax. Most of them require you to specify a particular version of MathJax to load, but some provide ârolling releasesâ, i.e., links that update to the latest available version upon release (note that we also provide a means of obtaining the latest version automatically, described below).
 jsdelivr.com [latest or specific version] (recommended)
 unpkg.com [latest or specific version]
 cdnjs.com
 raw.githack.com
 gitcdn.xyz
 cdn.statically.io
To jump start using jsdelivr
, you accomplish the first two steps by putting
<script type="text/javascript" id="MathJaxscript" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/texmmlchtml.js">
</script>
into the <head>
block of your document. (It can also go in the
<body>
if necessary, but the head is to be preferred.) This will
load the latest 3.x.x version of MathJax from the distributed server,
configure it to recognize mathematics in both TeX and MathML notation,
and ask it to generate its output using HTML with CSS (the CommonHTML
output format) to display the mathematics.
Warning
The texmmlchtml.js
file includes all the pieces needed for
MathJax to process these two input formats and produce this
output format. There are several other choices with different
input/output combinations, and and you can even configure MathJax to
load components individually.
We list this file here because it will get you started quickly with MathJax without having to worry too much about configurations; but since it is one of the most general of the combined component files, it is also one of the largest, so you might want to consider a smaller one that is more tailored to your needs. See the section on Configuring and Loading MathJax for more details on how this is done, and on The MathJax Components for information about the components themselves.
If you use the code snippet given above, you will not need to change
the URL whenever MathJax is updated and the version changes, because
jsdelivr
offers the mathjax@3
notation for obtaining the
texmmlchtml.js
file from the latest version (3.x.x) available on
the CDN.
Getting the Latest VersionÂ¶
Although jsdelivr
provides a means of getting the latest version
automtically, as described above, not all CDNs have a mechanism for
that. For such CDNs, MathJax provides a latest.js
file that can
be used to obtain the latest (3.x.x) version of MathJax. For example,
cdnjs
doesnât have a mechanism for getting the latest 3.x.x
version automtically, so you can use
<script type="text/javascript" id="MathJaxscript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.0.0/es5/latest?texmmlchtml.js">
</script>
to obtain the latest (3.x.x) version of the texmmlchtml
component from cdnjs
; even though you have started by asking for
version 3.0.0, the latest.js
script will switch to the latest
3.x.x version automatically.
Getting a Specific VersionÂ¶
It is also possible to always use a specific version, regardless of the current version of MathJax. To do this, simply give the full version number in the URL; for example:
<script id="MathJaxscript" async
src="https://cdn.jsdelivr.net/npm/mathjax@3.0.0/es5/texmmlchtml.js">
</script>
will always load version 3.0.0 of the texmmlchtml.js
combined
component file.
Other CDNs have slightly different formats for how to specify the
version number. For example, cdnjs
uses the following:
<script type="text/javascript" id="MathJaxscript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.0.0/es5/texmmlchtml.js">
</script>
to get the same file.
Browser CompatibilityÂ¶
MathJax supports all modern browsers (Chrome, Safari, Firefox, Edge), and most mobile browsers. Include the polyfill library in order to support earlier browser versions (see their browser support page for details). In particular, to allow MathJax version 3 to work with IE11, include the line
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
before the script that loads MathJax.
Configuring MathJaxÂ¶
The combined component files, like texmmlchtml.js
, include default
settings for the various options available in MathJax. You may need
to adjust those to suit your needs. For example, the TeX input
component does not enable single dollar signs as delimiters for
inline mathematics because single dollar signs appear frequently in
normal text, e.g. âThe price is $50 for the first one, and $40 for
each additional oneâ, and it would be confusing the have â50 for the
first one, andâ be typeset as mathematics.
If you wish to enable single dollar signs as inline math delimiters,
you need to tell MathJax that by providing an explicit MathJax
configuration. That is accomplished by using a <script>
tag to
set the MathJax
global variable to hold a configuration for
MathJax and placing that script before the one that loads the MathJax
component file that you are using. For example
<script>
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']]
}
};
</script>
<script id="MathJaxscript" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/texchtml.js">
</script>
configures MathJaxâs TeX input component to use $...$
and
\(...\)
as delimiters for inlinemath (this enabling single
dollar signs as math delimiters), and then loads the texchtml.js
component for TeX input and CommonHTML output.
There are many options that can be set in this way. See the section on Configuring and Loading MathJax for more details, and on Configuring MathJax for information on the available options for the various components.
Putting Mathematics in a Web PageÂ¶
Once MathJax is configured and loaded, it will look through your web page for mathematics for it to process. There are three available formats for that mathematics: TeX/LaTeX, MathML, and AsciiMath. The TeX/LaTeX and AsciiMath formats are plain text formats that use special delimiter characters to separate the mathematics from the rest of the text of your document, while the MathML format is an XML format that uses âtagsâ (similar to HTML tags) to represent the mathematics. TeX and AsciiMath are often written by hand, but MathML usually is generated by mathematical software or specialized editors.
See the section on Writing Mathematics for MathJax for more details about how to enter mathematics in these three formats.
Note that once MathJax has processed the page, it will not not run again without you explicitly telling it to. For example, if you add new mathematics to the page after MathJax has already run, that math will not be processed by MathJax until you request that to happen. See the section on MathJax in Dynamic Content for details of how to do that.
Where to Go from Here?Â¶
If you have followed the instructions above, you should now have MathJax installed and configured on your web server, and you should be able to use it to write web pages that include mathematics. At this point, you can start making pages that contain mathematical content!
You could also read more about the details of how to customize MathJax.
You can also check out the MathJax examples for illustrations of using MathJax.
If you are working on dynamic pages that include mathematics, you might want to read about the MathJax Application Programming Interface (its API), so you know how to include mathematics in your interactive pages.
Finally, if you have questions or comments, or want to help support MathJax, you could visit the MathJax community forums or the MathJax bug tracker.
Configuring and Loading MathJaxÂ¶
The configuration, loading, and startup processes for MathJax version
3 are different from those of version 2 in a number of ways. Where
version 2 had several different methods for configuring MathJax,
version 3 streamlines the process and has only one, as described
below. In version 2, you always loaded MathJax.js
, and added a
config=...
parameter to provide a combined configuration file, but
in version 3 you load one of several different files, depending on
your needs (so you can avoid multiple file transfers, and also use
MathJax synchronously, which was not possible in version 2).
If you use one of the combined component files in version 3, like
mmlchtml
, you may not need to do any configuration at all.
Configuring MathJaxÂ¶
To configure MathJax, you use a global object named MathJax that
contains configuration data for the various components of MathJax.
For example, to configure the TeX input component to use single dollar
signs as inline math delimiters (in addition to the usual \(...\)
delimiters) and the SVG output component to use a global font cache
for all expressions on the page, you would use
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']]
},
svg: {
fontCache: 'global'
}
};
The sections below describe the different places you could put such a configuration. For information on the options that you can set for each of the components, see the Configuring MathJax pages.
Configuration Using an InLine ScriptÂ¶
The easiest way to configure MathJax to to place the MathJax
object in a <script>
tag just before the script that loads MathJax
itself. For example:
<script>
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']]
},
svg: {
fontCache: 'global'
}
};
</script>
<script type="text/javascript" id="MathJaxscript" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/texsvg.js">
</script>
This will configure the TeX input component to use single dollar
signs as inline math delimiters, and the SVG output component to use
a global font cache (rather than a separate cache for each expression
on the page), and then loads the latest version of the texsvg
component file from the jsdelivr
CDN. This will typeset any TeX
mathematics on the page, producing SVG versions of the expressions.
Using a Local File for ConfigurationÂ¶
If you are using the same MathJax configuration over multiple pages,
you may find it convenient to store your configuration in a separate
JavaScript file that you load into the page. For example, you could
create a file called mathjaxconfig.js
that contains
window.MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']]
},
svg: {
fontCache: 'global'
}
};
and then use
<script src="mathjaxconfig.js" defer></script>
<script type="text/javascript" id="MathJaxscript" defer
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/texsvg.js">
</script>
to first load your configuration file, and then load the texsvg
component from the jsdelivr
CDN.
Note that here we use the defer
attribute on both scripts so that
they will execute in order, but still not block the rest of the page
while the files are being downloaded to the browser. If the async
attribute were used, there is no guarantee that the configuration
would run first, and so you could get instances where MathJax doesnât
get properly configured, and they would seem to occur randomly.
Configuring and Loading in One ScriptÂ¶
It is possible to have the MathJax configuration file also load
MathJax as well, which would be another way to handle the problem of
synchronizing the two scripts described above. For example, you could
make the file loadmathjax.js
containing
window.MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']]
},
svg: {
fontCache: 'global'
}
};
(function () {
var script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/texsvg.js';
script.async = true;
document.head.appendChild(script);
})();
and then simply link to that file via
<script src="loadmathjax.js" async></script>
This script can be async
because it doesnât have to synchronize
with any other script. This will allow it to run as soon as it loads
(since it is small, there is little cost to that), meaning the script
to load MathJax itself will be inserted as soon as possible, so that
MathJax can begin downloading as early as possible. (If this script
were loaded with defer
, it would not run until the page was ready,
so the script to load MathJax would not be inserted until then, and
you would have to wait for MathJax to be downloaded before it could
run.)
Converting Your v2 Configuration to v3Â¶
Because the version 3 configuration options are somewhat different
from their version 2 counterparts, we provide an automated
configuration conversion tool
to help you move from version 2 to version 3. Simply paste your
current MathJax.Hub.Config()
call into the converter, press
Convert
and you should get the equivalent version 3 configuration,
and comments about any options that could not be translated to version
3 (some options are not yet implements, others no longer make sense in
version 3). See the instructions on the linked page for more details.
Loading MathJaxÂ¶
Once you have configured MathJax, you then load the MathJax component
file that you want to use. Most often, this will mean you load a
combined component that loads everything you need to run MathJax with
a particular input and output format. For example, the texsvg
component would allow you to process TeX input and produce SVG output.
To do so, use a script like the following
<script type="text/javascript" id="MathJaxscript" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/texsvg.js">
</script>
to get the latest (3.x.x) version of the texsvg
component in ES5
format (the only one currently available) from the jsdelivr
CDN.
This takes advantage of the feature of jsdeliver
that allows you
to get the latest version using the mathjax@3
notation. For a
specific version, you would use
<script type="text/javascript" id="MathJaxscript" async
src="https://cdn.jsdelivr.net/npm/mathjax@3.0.0/es5/texsvg.js">
</script>
to always get the 3.0.0 version of the texsvg
component.
Other CDNs have slightly different formats for how to specify the
version number. For example, cdnjs
uses the following:
<script type="text/javascript" id="MathJaxscript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.0.0/es5/texsvg.js">
</script>
Some CDNs donât provide a means of getting the lastest version
automatically. For these, MathJax provides a latest.js
file that
will do that for you. For example, cdnjs
doesnât have a mechanism
for getting the latest 3.x.x version automtically. If you want to do
that using cdnjs
, then use
<script type="text/javascript" id="MathJaxscript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.0.0/es5/latest?texsvg.js">
</script>
to obtain the latest (3.x.x) version of the texsvg
component.
See The MathJax Components for a list of the various components you can choose and descriptions of their contents. See the list of CDNs for the URLs for a number of CDNs that serve MathJax.
Note that the script that loads the MathJax component file should follow the script the configures MathJax (otherwise MathJax will not know what configuration you need). If you use one of the combined component files in version 3, you may not need to do any configuration at all.
Loading Components IndividuallyÂ¶
If none of the combined component files suits your needs, you can
specify the individual components you want by setting the load
array in the loader
section of your MathJax configuration and
loading the startup
component.
For example
<script>
MathJax = {
loader: {
load: ['input/texbase', 'output/svg', 'ui/menu', '[tex]/require']
},
tex: {
packages: ['base', 'require']
}
};
</script>
<script type="text/javascript" id="MathJaxscript" async
src="https://cdn.jsdelivr.net/npm/mathjax@3.0.0/es5/startup.js">
</script>
would cause the base TeX input, the SVG output, the contextual menu
code, and the TeX \require
macro extension components to be loaded
(and would tell TeX to use the require
extension in addition to the
base TeX macros). In this way, you can load exactly the components
you want. Note, however, that each component will be loaded as a
separate file, so it is better to use a combined component file if
possible.
Loading Additional ComponentsÂ¶
You can use the load
array described in the previous section to
load additional components even if you are using one of the combined
components. For example
<script>
MathJax = {
loader: {
load: ['[tex]/colorV2']
},
tex: {
packages: {'[+]': 'colorV2'},
autoload: {color: []}
}
};
</script>
<script type="text/javascript" id="MathJaxscript" async
src="https://cdn.jsdelivr.net/npm/mathjax@3.0.0/es5/texchtml.js">
</script>
would load the version2compatible \color
macro, inform TeX to
add that to the packages that it already has loaded, and not autoload
the default version 3 color
(the LaTeXcompatible one). This is
done on top of the texchtml
combined configuration file, so the
TeX input and CommonHTML output formats are already included (as are
the contextual menu, and several TeX packages; see
The MathJax Components for details).
Performing Actions During StartupÂ¶
MathJax allows you several ways to hook into the MathJax startup
process so that you can do additional configuration, perform actions
after the initial typesetting, and so on. Because MathJax version 3
uses promises for its synchronization, they are what MathJax
provides in order for you to hook into the startup process. There are
two main hooks that you can set in the startup
block of your
configuration: the ready()
function and the
pageReady()
function.
The ready()
function is what MathJax calls when all the
components of MathJax have been loaded. It builds the internal
structures needed by MathJax, creates functions in the MathJax
object to make typesetting and format conversion easy for you,
performs the initial typesetting call, and sets up a promise for when
that is complete. You can override the ready()
function with
one of your own to override the startup process completely, or to
perform actions before or after the usual initialization. For
example, you could do additional setup before MathJax created the
objects it needs, or you could hook into the typesetting promise to
synchronize other actions with the completion of the initial
typesetting. Examples of these are given below.
The pageReady()
function is performed when MathJax is ready
(all its components are loaded, and the internal objects have been
created), and the page itself is ready (i.e., it is OK to typeset the
page). The default is for pageReady()
to perform the initial
typesetting of the page, but you can override that to perform other
actions instead, such as delaying the initial typesetting while other
content is loaded dynamically, for example. The ready()
function sets up the call to pageReady()
as part of its
default action.
Using these two functions separately or in combination gives you full control over the actions that MathJax takes when it starts up, and allows you to customize MathJaxâs startup process to suit your needs. Several examples are given below for common situations.
Performing Actions During InitializationÂ¶
If you want to perform actions after MathJax has loaded all the needed
components, you can set the ready()
function to a function that does
the needed actions, and then calls
MathJax.startup.defaultReady()
to perform the usual
startup process.
Actions coming before the MathJax.startup.defaultReady()
call are run before any initialization has been done. In particular,
this is before any input or output jax are created, so this is where
customization of the MathJax object definitions could be performed.
For example, you could modify the configuration blocks at this point,
or you could create subclasses of the MathJax objects that override
some of their methods to produce custom behavior, and then register
those subclasses with MathJax so they will be used in place of the
originals.
Actions coming after the MathJax.startup.defaultReady()
call are run after initialization is complete. In particular, all the
internal objects used by MathJax (e.g., the input and output jax, the
math document, the DOM adaptor, etc) will have been created, and the
typesetting and conversion methods will have been created in the
MathJax
object. Also the MathJax.startup.promise
value
will hold a promise that is resolved when the initial typesetting is
complete, but note that the typesetting has not yet been performed at
this point.
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');
}
}
};
The next section shows how to use the MathJax.startup.promise
to synchronize with the initial typesetting action.
Performing Actions After TypesettingÂ¶
Often, you may need to wait for MathJax to finish typesetting the page
before you perform some action. To accomplish this, you can override
the ready()
function, having it perform the
MathJax.startup.defaultReady()
action, and then use the
MathJax.startup.promise
to queue your actions; these will be
performed after the initial typesetting is complete.
window.MathJax = {
startup: {
ready: () => {
MathJax.startup.defaultReady();
MathJax.startup.promise.then(() => {
console.log('MathJax initial typesetting complete');
});
}
}
};
Configuring MathJax After it is LoadedÂ¶
The global variable MathJax
is used to store the configuration for
MathJax. Once MathJax is loaded, however, MathJax changes the
MathJax
variable to contain the various methods needed to control
MathJax. The initial configuration that you provided is moved to the
MathJax.config
property so that its contents doesnât conflict
with the new values provides in MathJax
. This occurs when the
MathJax component you have requested is loaded (and before the
ready()
function is called).
Once MathJax has created the objects that it needs (like the input and
output jax), changes to the configuration may not have any effect, as
the configuration values were used during the creation of the objects,
and that is already complete. Most objects make a copy of their
configuration from your original MathJax
object, so changing the
values in MathJax.config
after the objects are created will
not change their configurations. (You can change
MathJax.config
values for objects that havenât been created
yet, but not for ones that have.)
For some objects, like input and output jax, document handlers, and
math documents, the local copies of the configuration settings are
stored in the options
property of the object, and you may be
able to set the value there. For example,
MathJax.startup.output.options.scale
is the scaling value for
the output, and you can set that at any time to affect any subsequent
typeset calls.
Note that some options are moved to subobjects when the main object
is created. For example, with the TeX input jax, the inlineMath
and similar options are used to create a FindTeX
object that is
stored at MathJax.startup.input[0].findTeX
; but in this case, the
FindTeX
object uses the configuration once when it is created, so
changing MathJax.startup.input[0].findTeX.options
will not affect
it. (There is a getPatterns()
method if the FindTeX
object that could be used to refresh the object if the options are
changed, however.)
If you need to change the configuration for an object whose options
canât be changed once it is created, then you will need to create a
new version of that object after you change the configuration. For
example, if you change MathJax.config.tex.inlineMath
after
MathJax has started up, that will not affect the TeX input jax, as
described above. In this case, you can call
MathJax.startup.getComponents()
to ask MathJax to recreate all
the internal objects (like MathJax.startup.input
). This will
cause them to be created using the new configuration options. Note,
however, that MathJax will no longer know about any mathematics that
has already been typeset, as that data was stored in the objects that
have been discarded when the new ones are created.
The MathJax ComponentsÂ¶
In order to make it possible to customize what parts of MathJax you include in your web pages, the MathJax code has been broken into individual pieces, called âcomponentsâ. These are designed to share common code, so that you donât download the same thing more than once, while still making it possible to only download the parts that you need. There are individual components for the various input and output processors in MathJax, for the various TeX extensions, for the contextual menu, and for other specialized pieces, such as the assistive technology support. These can be mixed and matched in whatever combinations you need.
There are some obvious combinations of components, for example, TeX input together with SVG output, or MathML input with CommonHTML output. MathJax provides a number of these common combinations as complete packages that contain everything you need to run mathjax in your page in a single file, though you can also configure additional extensions to be loaded as well.
Components provide a great deal of flexibility in determining the pieces of MathJax that you use. You can even make your own custom builds of MathJax that package exactly the pieces and that you want to use. See Making a Custom Build of MathJax for more details about how to do that.
See the Loading MathJax section for details about how to specify and load MathJax components.
See the Configuring MathJax section for details about how to configure the various MathJax components.
Combined ComponentsÂ¶
Currently there are eight combined components, whose contents are described below:
The combined components include everything needed to run MathJax in your web pages. Each includes at least one input processor, an output processor, the data needed for the MathJax TeX font, the contextual menu code, and the startup component.
Unlike the other components, these combined components should be
loaded directly via a <script> tag, not through the load
array
in your MathJax configuration. So a typical use would be
<script>
MathJax = {
// your configuration here, if needed
};
</script>
<script type="text/javascript" id="MathJaxscript" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/texchtml.js">
</script>
to load the texchtml component, for example.
texchtmlÂ¶
The texchtml component loads the input/tex component and the output/chtml, along with the contextual menu component, and the startup component.
The input/tex component loads the ams, newcommand,
require, autoload, configMacros, and
noundefined extensions, which that means most other extensions
will be loaded automatically when needed, or you can use the
\require
macro to load them explicitly.
texchtmlfullÂ¶
The texchtmlfull component loads the input/texfull component and the output/chtml, along with the contextual menu component, and the startup component.
The input/texfull component loads the the code for all the TeX extensions, and configures TeX to use all but the physics and colorV2 extensions.
texsvgÂ¶
The texsvg component loads the input/tex component and the output/svg, along with the contextual menu component, and the startup component.
The input/tex component loads the ams, newcommand,
require, autoload, configMacros, and
noundefined extensions, which that means most other extensions
will be loaded automatically when needed, or you can use the
\require
macro to load them explicitly.
texsvgfullÂ¶
The texsvgfull component loads the input/texfull component and the output/svg, along with the contextual menu component, and the startup component.
The input/texfull component loads the the code for all the TeX extensions, and configures TeX to use all but the physics and colorV2 extensions.
texmmlchtmlÂ¶
The texmmlchtml component loads the input/tex and input/mathml components and the output/chtml, along with the contextual menu component, and the startup component.
The input/tex component loads the ams, newcommand,
require, autoload, configMacros, and
noundefined extensions, which that means most other extensions
will be loaded automatically when needed, or you can use the
\require
macro to load them explicitly.
texmmlsvgÂ¶
The texmmlsvg component loads the input/tex and input/mathml components and the output/svg, along with the contextual menu component, and the startup component.
The input/tex component loads the ams, newcommand,
require, autoload, configMacros, and
noundefined extensions, which that means most other extensions
will be loaded automatically when needed, or you can use the
\require
macro to load them explicitly.
mmlchtmlÂ¶
The mmlchtml component loads the input/mathml component and the output/chtml, along with the contextual menu component, and the startup component.
mmlsvgÂ¶
The mmlsvg component loads the input/mathml component and the output/svg, along with the contextual menu component, and the startup component.
Input ComponentsÂ¶
Currently there are three MathJax input formats, each packaged into its own component.
These are described in more detail below. See the Input Processor Options section for details about configuring these components.
input/texÂ¶
The TeX input format is packages in three different ways, depending on which extensions are included in the component. This gives you several possible tradeoffs between file size and feature completeness. See the TeX and LaTeX input section for details about the TeX input processor.
When you include one of the TeX input components, MathJax will define a function to convert TeX strings into the output format that has been loaded. See the Converting a Math String to Other Formats section for details.
input/texÂ¶
This is the standard TeX input component. It includes the main
TeX/LaTeX input parser, along with the base definitions for the most
common macros and environments. It also includes the ams,
newcommand, require, autoload,
configMacros, and noundefined extensions. The
remaining extensions (other than physics and
colorV2) are loaded automatically when needed, or you can
use \require
to load any of them explicitly. This will cause the
extensions to be loaded dynamically, so if you are calling MathJaxâs
typesetting or conversion methods yourself, you should use the
promisebased versions in order to handle that properly.
See the TeX Input Processor Options section for information about configuring this component.
input/texfullÂ¶
This is the most complete TeX input component. It includes the main
TeX/LaTeX input parser, along with all the TeX extensions, and is
configured to enable all of them other than physics and
colorV2. You can add these two to the packages
array
in the tex
section of your MathJax configuration, though you
should remove the color extension if you add the
colorV2 extension, and should remove the braket
extension if you enable the physics package.
See the TeX Input Processor Options section for information about configuring this component.
input/texbaseÂ¶
This is a minimal TeX input component. It includes the main TeX/LaTeX
input parser, along with the base definitions for the most common
macros and environments. No other extensions are included, so no
extensions are autoloaded, and you can not use \require
. For this
component, you must explicitly load the extensions you want to use,
and add them to the packages
array.
See the TeX Input Processor Options section for information about configuring this component.
TeX Extension PackagesÂ¶
Each of the TeX extensions listed in the The TeX/LaTeX Extension List has its
own component. The name of the component is the name of the extension
preceded by [tex]/
; so the component for the enclose
extension is [tex]/enclose
. You can include any of the extension
components in the load
array of the loader
section of your
MathJax configuration, and add the extension to the packages
array
in the tex
block. For example:
window.MathJax = {
loader: {load: ['[tex]/enclose']},
tex: {
packages: {'[+]', ['enclose']}
}
};
Of course, if you are using one of the packages that includes the autoload extension, then you donât have to load the extensions explicitly (except for physics and colorV2), as they will be loaded automatically when first used.
In addition, there is a [tex]/allpackages
component that includes
all the packages, and configures the TeX input processors to include
all of them except physics and colorV2. The
input/texbase and [tex]/allpackages components together are
effectively the same as the input/texfull component.
See the TeX Extension Options section for information about configuring the TeX extensions.
input/mathmlÂ¶
The input/mathml component contains the MathML input processor, including the function that identifies MathML within the page. See the MathML input section for details concerning the MathML input processor. When you include the input/mathml component, MathJax will define a function to convert serialized MathML strings into the output format that has been loaded. See the Converting a Math String to Other Formats section for details.
 See the MathML Support section for details about MathML output.
 See the MathML Input Processor Options section for information about configuring this component.
input/asciimathÂ¶
The input/asciimath component contains the AsciiMath input processor, including the function that identifies AsciiMath within the page. See AsciiMath input section or details concerning the AsciiMath input processor. When you include the input/asciimath component, MathJax will define a function to convert AsciiMath strings into the output format that has been loaded. See the Converting a Math String to Other Formats section for details.
See the AsciiMath Input Processor Options section for information about configuring this component.
Note
The AsciiMath input jax has not been fully ported to version 3 yet. The AsciiMath component includes legacy MathJax 2 code patched into the MathJax 3 framework. That makes the AsciiMath component larger than usual, and slower than the other input components.
Output ComponentsÂ¶
Currently there are two MathJax output formats, each packaged into its own component.
These are described in more detail below.
Note
The NativeMML output jax from version 2 has not been ported to version 3, and is unlikely to be. See the MathML Support section for details.
output/chtmlÂ¶
The output/chtml component includes the CommonHTML output processor. When loaded, it causes data for handling the MathJax TeX font to be loaded as well (via a separate component). Currently, this is the only font available in version 3 (see the MathJax Font Support section for more information). The output/chtml/fonts/tex component holds the font data.
 See the HTML Support section for details on the CommonHTML output processor.
 See the CommonHTML Output Processor Options section for information about configuring this component.
output/svgÂ¶
The output/svg component includes the SVG output processor. When loaded, it causes data for handling the MathJax TeX font to be loaded as well (via a separate component). Currently, this is the only font available in version 3 (see the MathJax Font Support section for more information). The output/svg/fonts/tex component holds the font data.
 See the SVG Support section for details on the CommonHTML output processor.
 See the SVG Output Processor Options section for information about configuring this component.
Accessibility ComponentsÂ¶
Currently, there are three components designed specifically to support assistive technology.
These are described below.
Note
The AssistiveMML extension has not been ported to MathJax version 3, and is unlikely to be in the future (but see the MathML Support section for some ideas about how to implement this functionality). Also, the autocollapse extension has not yet been converted to version 3, but will be in a future release. Finally, the assistivemenu extension is now part of the standard contextual menu extension, so doesnât have to be loaded separately.
a11y/semanticenrichÂ¶
The semanticenrich component connects MathJax with the Speech Rule Engine, which allows MathJax to generate speech strings for the mathematics that it processes. These can be attached to the output for use by screen readers, or for use with the a11y/explorer component described below.
See the SemanticEnrich Extension Options section for information about configuring this component.
a11y/complexityÂ¶
The complexity component computes a complexity measure for each element within an expression, and allows complex expressions to âcollapseâ to make them both shorter, and simpler to read. The collapsed portions can be expanded with a click of the mouse, or by keyboard actions when using the a11y/explorer extension described below.
See the Complexity Extension Options section for information about configuring this component.
a11y/explorerÂ¶
The explorer component allows readers to explore a mathematical expression interactively. When an expression is focused (by tabbing to it, or by clicking on it), a reader can âenterâ the expression by pressing shiftspace on the keyboard. The arrow keys then move the reader through the expression (down moves to more detail by selecting the first subexpression of the selected expression, up moves to more complete expressions, while left and right move through the subexpressions at the current level). See the Accessibility Features section for more details about using the expression explorer and its various features.
See the Explorer Extension Options section for information about configuring this component.
Miscellaneous ComponentsÂ¶
There are several miscellaneous components that donât fit into other categories. These are:
They are described in more detail below.
startupÂ¶
The startup component is the one that you would use if you are not
using a combined component, but are using
the load
array to specify the components you want to load. Like a
combined component, you would load this directly via a <script> tag,
as in
<script type="text/javascript" id="MathJaxscript" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/startup.js">
</script>
This is the component that manages the global MathJax
object.
It is responsible for creating the needed objects (like the input and
output jax), and for adding the typesetting and conversion methods
described in the Typesetting and Converting Mathematics section.
See the Startup Options section for information about configuring this component.
adaptors/liteDOMÂ¶
The adaptors/liteDOM component implements an alternative to the browser DOM that can be used to parse HTML pages outside of a browser. This can be used in Node applications that donât have access to a browser DOM, or in webworkers that canât access the document DOM.
coreÂ¶
The core component includes the code that is required for all other components, including the base classes for input and output jax, math documents, math items within those documents, DOM adaptors, and so on. This component is loaded automatically when needed, so you donât usually have to load it yourself. But you can include it if you are creating your own combined component.
loaderÂ¶
The loader component contains the code needed to load other components. It is included automatically by the startup component, but if you donât want the features created by the startup module, you can use the loader component instead to load the MathJax component you need. You can even use it as a general loader for other javascript, if you want.
See the Loader Options section for information about configuring this component.
Typesetting and Converting MathematicsÂ¶
There are two main uses for MathJax:
 Typesetting all the mathematics within a web page, and
 Converting a string containing mathematics into another form.
In version 2, MathJax could perform the first function very well, but it was much harder to do the second. MathJax version 3 makes both easy to do. Both these tasks are described below.
Typesetting Math in a Web PageÂ¶
MathJax makes it easy to typeset all the math in a web page, and in fact it will do this automatically when it is first loaded unless you configure it not to. So this is one of the easiest actions to perform in MathJax; if your page is static, there is nothing to do but load MathJax.
If your page is dynamic, and you may be adding math after the page is
loaded, then you will need to tell MathJax to typeset the mathematics
once it has been inserted into the page. There are two methods for
doing that: MathJax.typeset()
and
MathJax.typesetPromise()
.
The first of these, MathJax.typeset()
, typesets the page, and
does so immediately and synchronously, so when the call finishes, the
page will have been typeset. Note, however, that if the math includes
actions that require additional files to be loaded (e.g., TeX input
that uses require, or that includes autoloaded extensions), then
an error will be thrown. You can use the try/catch
command to
trap this condition.
The second, Mathjax.typesetPromise()
, performs the typesetting
asynchronously, and returns a promise that is resolved when the
typesetting is complete. This properly handles loading of external
files, so if you are expecting to process TeX input that can include
require or autoloaded extensions, you should use this form of
typesetting. It can be used with await
as part of a larger
async
function.
Both functions take an optional argument, which is an array of elements whose content should be processed. An element can be either an actual DOM element, or a CSS selector string for an element or collection of elements. Supplying an array of elements will restrict the typesetting to the contents of those elements only.
Handling Asynchronous TypesettingÂ¶
It is generally a bad idea to try to perform multiple asynchronous
typesetting calls simultaneously, so if you are using
MathJax.typesetPromise()
to make several typeset calls, you
should chain them using the promises they return. For example:
MathJax.typesetPromise().then(() => {
// modify the DOM here
MathJax.typesetPromise();
}).catch((err) => console.log(err.message));
This approach can get complicated fast, however, so you may want to maintain a promise that can be used to chain the later typesetting calls. For example,
let promise = Promise.resolve(); // Used to hold chain of typesetting calls
function typeset(code) {
promise = promise.then(() => {code(); return MathJax.typesetPromise()})
.catch((err) => console.log('Typeset failed: ' + err.message));
return promise;
}
Then you can use typeset()
to run code that changes the DOM
and typesets the result. The code()
that you pass it does the
DOM modifications and returns the array of elements to typeset, or
null
to typeset the whole page. E.g.,
typeset(() => {
const math = document.querySelector('#math');
math.innerHTML = '$$\\frac{a}{1a^2}$$';
return math;
});
would replace the contents of the element with id="math"
with the
specified fraction and have MathJax typeset it (asynchronously).
Because the then()
call returns the result of
MathJax.typesetPromise()
, which is itself a promise, the
then()
will not resolve until that promise is resolved; i.e.,
not until the typesetting is complete. Finally, since the
typeset()
function returns the promise
, you can use
await
in an async
function to wait for the typesetting to
complete:
await typeset(...);
Note that this doesnât take the initial typesetting that MathJax
performs into account, so you might want to use
MathJax.startup.promise
in place of promise
above.
I.e., simply use
function typeset(code) {
MathJax.startup.promise = MathJax.startup.promise
.then(() => {code(); return MathJax.typesetPromise()})
.catch((err) => console.log('Typeset failed: ' + err.message));
return MathJax.startup.promise;
}
This avoids the need for the global promise
variable, and
makes sure that your typesetting doesnât occur until the initial
typesetting is complete.
Resetting Automatic Equation NumberingÂ¶
The TeX input jax allows you to automatically number equations. When modifying a page, this can lead to problems as numbered equations may be removed and added; most commonly, duplicate labels lead to issues.
You can reset equation numbering using the command
MathJax.texReset([start])
where start
is the number at which to start equation numbering.
If you have inserted new content, that may require the entire page to be reprocessed in order to get the automatic numbering, labels, and references to be correct. In that case, you can do
MathJax.startup.document.state(0);
MathJax.texReset();
MathJax.typeset();
to force MathJax to reset the page to the state it was before MathJax processed it, reset the TeX automatic line numbering and labels, and then retypeset the contents of the page from scratch.
Loading MathJax Only on Pages with MathÂ¶
The MathJax combined configuration files are large, and so you may wish to include MathJax in your page only if it is necessary. If you are using a contentmanagement system that puts headers and footers into your pages automatically, you may not want to include MathJax directly, unless most of your pages include math, as that would load MathJax on all your pages. Once MathJax has been loaded, it should be in the browserâs cache and load quickly on subsequent pages, but the first page a reader looks at will load more slowly. In order to avoid that, you can use a script like the following one that checks to see if the content of the page seems to include math, and only loads MathJax if it does. Note that this is not a very sophisticated test, and it may think there is math in some cases when there really isnât but it should reduce the number of pages on which MathJax will have to be loaded.
Create a file called checkfortex.js
containing the following:
(function () {
var body = document.body.textContent;
if (body.match(/(?:\$\\\(\\\[\\begin\{.*?})/)) {
if (!window.MathJax) {
window.MathJax = {
tex: {
inlineMath: {'[+]': [['$', '$']]}
}
};
}
var script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/texchtml.js';
document.head.appendChild(script);
}
})();
and then use
<script src="checkfortex.js" defer></script>
in order to load the script when the page content is ready. Note
that you will want to include the path to the location where you
stored checkmathjax.js
, that you should change
texchtml.js
to whatever component file you want to use, and that
the window.MathJax
value should be set to whatever configuration
you want to use. In this case, it just adds dollar signs to the
inline math delimiters. Finally, adjust the body.match()
regular
expression to match whatever you are using for math delimiters.
This simply checks if there is something that looks like a TeX inline or displayed math delimiter, and loads MathJax if there is. If you are using different delimiters, you will need to change the pattern to include those (and exclude any that you donât use). If you are using AsciiMath instead of TeX, then change the pattern to look for the AsciiMath delimiters.
If you are using MathML, you may want to use
if (document.body.querySelector('math')) {...}
for the test instead (provided you arenât using namespace prefixes, like <m:math>).
Converting a Math String to Other FormatsÂ¶
An important use case for MathJax is to convert a string containing mathematics (in one of the three forms that MathJax understands) and convert it into another form (either MathML, or one of the output formats that MathJax supports). This was difficult to do in MathJax version 2, but easy to do in version 3.
When MathJax startup up, it creates methods for converting from the
input format(s) to the output format(s) that you have loaded, and to
MathML format. For example, if you have loaded the MathML input jax
and the SVG output jax (say by using the mmlsvg
component), then
MathJax will create the following conversion methods for you:
MathJax.mathml2svg(math[,options])
MathJax.mathml2svgPromise(math[,options])
MathJax.mathml2mml(math[,options])
MathJax.mathml2mmlPromise(math[,options])
If you had loaded the TeX input jax as well, you would also get four
more methods, with tex
in place of mathml
.
As the names imply, the Promise
functions perform the conversion
asynchronously, and return promises, while the others operate
synchronously and return the converted form immediately. The first
two functions (and any others like them) produce DOM elements as the
results of the conversion, with the promise versions passing that to
their then()
functions as their argument (see the section on
Asynchronous Conversion below), and the nonpromise versions returning
them directly. You can insert these DOM elements into the document
directly, or you can use their outerHTML
property to obtain
their serialized string form.
The functions that convert to MathML produce serialized MathML strings
automatically, rather than DOM elements. (You can use the browserâs
DOMParser
object to convert the string into a MathML DOM tree
if you need one.)
Conversion OptionsÂ¶
All four of these functions require an argument that is the math
string to be converted (e.g., the serialized MathML string, or in the
case of tex2chtml()
, the TeX or LaTeX string). You can also
pass a second argument that is an object containing options that
control the conversion process. The options that can be included are:
display
, a boolean specifying whether the math is in displaymode or not (for TeX input). Default istrue
.em
, a number giving the number of pixels in anem
for the surrounding font. Default is16
.ex
, a number giving the number of pixels in anex
for the surrounding font. Default is8
.containerWidth
, a number giving the width of the container, in pixels. Default is 80 times theex
value.lineWidth'
, a number giving the linebreaking width inem
units. Default is a very large number (100000), so effectively no line breaking.scale
, a number giving a scaling factor to apply to the resulting conversion. Default is 1.
For example,
let html = MathJax.tex2chtml('\\sqrt{x^2+1}', {em: 12, ex: 6, display: false});
would convert the TeX expression \sqrt{x^2+1}
to HTML as an
in0line expression, with em
size being 12 pixels and ex
size
being 6 pixels. The result will be a DOM element containing the HTML
for the expression. Similarly,
let html = MathJax.tex2chtml('\\sqrt{x^2+1}', {em: 12, ex: 6, display: false});
let text = html.outerHTML;
sets text
to be the serialized HTML string for the expression.
Obtaining the Output MetricsÂ¶
Since the em
, ex
, and containerWidth
all
depend on the location where the math will be placed in the document
(they are values based on the surrounding text font and the container
elements width), MathJax provides a method for obtaining these values
from a given DOM element. The method
MathJax.getMetricsFor(node, display)
takes a DOM element (node
) and a boolean (display
), indicating
if the math is in display mode or not, and returns an object
containing all six of the options listed above. You can pass this
object directly to the conversion methods discussed above. So you can
do something like
let node = document.querySelector('#math');
let options = MathJax.getMetricsFor(node, true);
let html = MathJax.tex2svg('\\sqrt{x^2+1}', options);
node.appendChild(html);
in order to get get the correct metrics for the (eventual) location of
the math that is being converted. Of course, it would be easier to
simply insert the TeX code into the page and use
MathJax.typeset()
to typeset it, but this is just an example
to show you how to obtain the metrics from a particular location in
the page.
Note that obtaining the metrics causes a page refresh, so it is expensive to do this. If you need to get the metrics from many different locations, there are more efficient ways, but these are advanced topics to be dealt with elsewhere.
Obtaining the Output StylesheetÂ¶
The output from the SVG and CommonHTML output jax both depend on CSS stylesheets in order to properly format their results. You can obtain the SVG stylesheet element by calling
MathJax.svgStylesheet();
and the HTML stylesheet from
MathJax.chtmlStylesheet();
The CommonHTML output jax CSS can be quite large, so the output jax tries to minimize the stylesheet by including only the styles that are actually needed for the mathematics that has been processed by the output jax. That means you should request the stylesheet only after you have typeset the mathematics itself.
Moreover, if you typeset several expressions, the stylesheet will include everything needed for all the expressions you have typeset. If you want to reset the stylesheet, then use
MathJax.startup.output.clearCache();
if the output jax is the CommonHTML output jax. So if you want to
produce the style sheet for a single expression, issue the
clearCache()
command just before the tex2chtml()
call.
Asynchronous ConversionÂ¶
If you are converting TeX or LaTeX that might use require to load extensions, or where extensions might be autoloaded, you will either need to use one of the âfullâ components that include all the extensions, or preload all the extensions you need if you plan to use the synchronous calls listed above. Otherwise, you can use the promisebased calls, which handle the loading of extensions transparently.
For example,
let node = document.querySelector('#math');
let options = MathJax.getMetricsFor(node, true);
MathJax.tex2chtmlPromise('\\require{bbox}\\bbox[red]{\\sqrt{x^2+1}}', options)
.then((html) => {
node.appendChild(html);
let sheet = document.querySelector('#MJXCHTMLstyles');
if (sheet) sheet.parentNode.removeChild(sheet);
document.head.appendChild(MathJax.chtmlStylesheet());
});
would get the metrics for the element with id="math"
, convert
the TeX expression using those metrics (properly handling the
asynchronous load needed for the \require
command); then when the
expression is typeset, it is added to the document and the CHTML
stylesheet is updated.
Hosting Your Own Copy of MathJaxÂ¶
We recommend using a CDN service if you can, but you can also install MathJax on your own server, or locally on your own hard disk. You may need to do this if you are creating a custom build of MathJax, for example, or if you wish to use MathJax offline.
Acquiring the MathJax CodeÂ¶
In order to host your own version of MathJax, you must first obtain a
copy of the MathJax code. That can be done in several ways, the
easiest being to use npm
(the node package manager), or git
to
get MathJax from its GitHub development repository.
Getting MathJax via npmÂ¶
To include MathJax in your project, use the command
npm install mathjax
This will install MathJax in node_modules/mathjax
subdirectory of
your current directory. It will include the prebuilt components in
the node_modules/mathjax/es5
directory.
If you need access to the source code, as well. Then use
npm install mathjaxfull
which installs MathJax in the node_modules/mathjaxfull
subdirectory, the source files for the components in
node_modules/mathjaxfull/components/src
, the typescript source
files for MathJax in node_modules/mathjaxfull/ts
, and the
compiled javascript files from the typescript source in
node_modules/mathjaxfull/js
.
Getting MathJax via gitÂ¶
To obtain a copy of MathJax from the GitHub component repository, use the command
git clone https://github.com/mathjax/MathJax.git mathjax
This will install a copy of MathJax in the mathjax/es5
directory.
If you need access to the source code as well, then use
git clone https://github.com/mathjax/MathJaxsrc.git mathjax
which will install the source code for MathJax in the
mathjax
subdirectory of your current directory. You will need to
compile the typescript source files and build the component files by
hand, as they are not part of the repository itself. To do this, do
the following:
cd mathjax
npm install
npm run compile
npm run makecomponents
cd ..
This will compile the typescript source files from the mathjax/ts
directory into javascript files in the mathjax/js
directory, and
then will build the component files from mathjax/components/src
into the mathjax/es5
directory.
Make the Files AvailableÂ¶
Once you have acquired the MathJax files by one of the methods
described above, you need to make the proper files available on your
web server. Note that most of the files in the MathJax distribution
are not needed on the server. For example, the mathjax/ts
directory is typescript source code for MathJax, and this is compiled
into the javascript files found in the mathjax/js
directory. But
even these are not the files you want on your server. These
javascript files are further processed into the MathJax components
stored in the mathjax/es5
files using the data in the
mathjax/components/src
directory.
It is the contents of the mathjax/es5
directory that
you want to make available on your server, as these are the files that
are served from the CDNs that provide MathJax. You should move them
to a convenient location on your server. This might be a toplevel
directory called mathjax
, for example.
Linking to you Your Copy of MathJaxÂ¶
You can include MathJax in your web page by putting
<script src="pathtoMathJax/texchtml.js" id="MathJaxscript" async></script>
in your documentâs <head>
block. Here, texchtml.js
is the
combined component that you are loading, and this is just an example; you
will need to pick the one you want to use. See the section on
Configuring and Loading MathJax for more details.
The pathtoMathJax
should be replaced by the URL for the main
MathJax directory, so if you have put the mathjax/es5
directory at the top level of you serverâs web site and named it
mathjax
, you could use
<script src="/mathjax/texchtml.js" id="MathJaxscript" async></script>
to load MathJax in your page. For example, your page could look like
<html>
<head>
...
<script src="/mathjax/texchtml.js" id="MathJaxscript" async></script>
</head>
<body>
...
</body>
</html>
Firefox and Local FontsÂ¶
Firefoxâs sameorigin security policy affects its ability to load webbased fonts, as described above. This has implications not only to crossdomain loading of MathJax, but also to using MathJax locally from your hard disk. Firefoxâs interpretation of the sameorigin policy for local files used to be that the âsame domainâ for a page is the directory where that page exists, or any of its subdirectories. This allowed MathJax to be loaded from a subdirectory of the director where the web page was loaded.
This is no longer the case with Firefox starting with version 68 and
going forward (see their documentation).
Now there is no same origin for a file://
URL (the origin for a
page loaded from a file://
URL is unique).
This means there are limited options for using MathJax in Firefox with a local copy of MathJax. The easiest option is to use the SVG output renderer rather than the CommonHTML output, as that does not require fonts to be loaded, so avoids the sameorigin issue. Alternatively, you could install the MathJax TeX fonts as system fonts so that Firefox doesnât hav to try to load them as web fonts.
This is an unfortunate restriction for MathJax (though we understand their reasoning), but it is a limitation imposed by Firefoxâs security model that MathJax can not circumvent. Currently, this is not a problem for other browsers, though there is no guarantee that it wonât be in the future.
Making a Custom Build of MathJaxÂ¶
MathJax provides a number of combined components that load everything you need to run MathJax with a given input and output format. Still, you might find that none of the ones we provide fully suit your needs, and that you would like to include additional components in the build, or perhaps want to include customized configuration options.
You can use the MathJax component build tools to make your own custom component that has exactly the pieces and configuration that you want. You can also use them to make a custom extension, for example a TeX input extension, that takes advantage of the components already loaded, but implements additional functionality. These possibilities are described in Building a Custom Component below.
It is also possible to make a completely custom build of MathJax that doesnât use the MathJax components at all, but includes direct calls to the MathJax source files. This is described in A Custom MathJax Build below.
If you wish to include MathJax as part of a larger project, you can use either of the techniques to do that, and make a webpacked file that includes your own project code as well as MathJax.
Your first step is to download a copy of MathJax via npm
or
git
, as described in the section on Acquiring the MathJax Code.
Building a Custom ComponentÂ¶
MathJax comes with a number of predefined components, and you can use their definitions as a starting point for your own custom component. There are also custom component examples (with documentation) in the MathJax web demos repository, which is similar to the ones described here.
There are two kinds of components you could build:
 A combined component that brings together several other
components (the
texchtml
component is a combined component)  A extension component that contains what is needed for one feature and can be loaded along with other components to add that feature to MathJax.
We describe how you can create each of these below. In both cases, you should create a directory to hold your componentâs support files. You will need the main control file for the component (that includes the code that defines the component), and a webpack control file that will tell MathJaxâs build tools how to handle your component. These will be discussed in the sections below.
If you have not already done so, you should build the components already defined in MathJax, so that you can call on them in your own component. To do this, issue the commands
cd mathjax
npm run makecomponents
(Note that the mathjax
directory will be in your node_modules
directory if you used npm
to install MathJax.)
A Custom Combined ComponentÂ¶
After downloading a copy of MathJax as described in the section on
Acquiring the MathJax Code, make the directory for your component and
cd
to that directory. We will assume the directory is called
custommathjax
for this discussion.
For this example, we will create a custom build that has the TeX input
jax and the SVG output jax, and we will load the newcommand
,
ams
, and configMacros
extensions, but will not include
require
or autoload
, so the user will not be able load any
additional TeX extensions. This component also includes the
contextual menu.
The Control FileÂ¶
Create a javascript file to house the component and call it
custommathjax.js
. The file should contain the following code (we
assume here that you used npm
to install MathJax. If not, you may
need to adjust the locations in the require()
commands).
//
// Initialize the MathJax startup code
//
require('mathjaxfull/components/src/startup/lib/startup.js');
//
// Get the loader module and indicate the modules that
// will be loaded by hand below
//
const {Loader} = require('mathjaxfull/js/components/loader.js');
Loader.preLoad(
'loader', 'startup',
'core',
'input/texbase',
'[tex]/ams',
'[tex]/newcommand',
'[tex]/configMacros',
'output/svg', 'output/svg/fonts/tex.js',
'ui/menu'
);
//
// Load the components that we want to combine into one component
// (the ones listed in the preLoad() call above)
//
require('mathjaxfull/components/src/core/core.js');
require('mathjaxfull/components/src/input/texbase/texbase.js');
require('mathjaxfull/components/src/input/tex/extensions/ams/ams.js');
require('mathjaxfull/components/src/input/tex/extensions/newcommand/newcommand.js');
require('mathjaxfull/components/src/input/tex/extensions/config_macros/configMacros.js');
require('mathjaxfull/components/src/output/svg/svg.js');
require('mathjaxfull/components/src/output/svg/fonts/tex/tex.js');
require('mathjaxfull/components/src/ui/menu/menu.js');
//
// Update the configuration to include any updated values
//
const {insert} = require('mathjaxfull/js/util/Options.js');
insert(MathJax.config, {
tex: {
packages: {'[+]': ['ams', 'newcommand', 'configMacros']}
}
});
//
// Loading this component will cause all the normal startup
// operations to be performed
//
require('mathjaxfull/components/src/startup/startup.js');
This loads the various components that we want to include in the combined component, including the standard startup code so that the usual startup process is included.
The Webpack ConfigurationÂ¶
Next, create the file webpack.config.js
that includes the
following:
const PACKAGE = require('mathjaxfull/components/webpack.common.js');
module.exports = PACKAGE(
'custommathjax', // the name of the package to build
'../node_modules/mathjaxfull/js', // location of the mathjax library
[], // packages to link to
__dirname, // our directory
'.' // where to put the packaged component
);
This file gives the name that will be used for this component
(custommathjax
in this case), a pointer to where the MathJax
javascript code is to be found (adjust this to suit your setup), an
array of components that we assume are already loaded when this one is
loaded (none in this case), the directory name we are working in
(always __dirname
), and the directory where we want the final
packaged component to go (the default is the
mathjaxfull/es5
directory, but we set it to the directory
containing the source files, and the component will end with
.min.js
).
Most of the real work is done by the
mathjaxfull/components/webpack.common.js
file, which is included in
the first line here.
Building the ComponentÂ¶
Once these two files are ready, you should be able to use the command
../node_modules/mathjaxfull/components/bin/makeAll
to process your custom build. You should end up with a file
custommathjax.min.js
in the directory with the other files. If
you put this on your web server, you can load it into your web pages
in place of loading MathJax from a CDN. This fill will include all
that you need to run MathJax on your pages. Just add
<script src="custommathjax.min.js" id="MathJaxscript" async></script>
to your page and you should be in business (adjust the URL to point to
wherever you have placed the custommathjax.min.js
file).
Configuring the ComponentÂ¶
Note that you can still include a MathJax = {...}
definition in
your web page before loading this custom MathJax build if you want to
customize the configuration for a specific page. You could also
include configuration within the component itself, as we did for the
TeX packages
array. This will override any pageprovided
configuration, however, so if you want to provide nonstandard
defaults that can still be overridden in the page, use
//
// Update the configuration to include any updated values
//
const {insert} = require('mathjaxfull/js/util/Options.js');
insert(MathJax.config, {tex: {packages: {'[+]': ['ams', 'newcommand', 'configMacros']}}});
MathJax.config = insert({
// your default options here
}, MathJax.config);
which will update the TeX packages, and then merge the userâs
configuration options into your defaults and set
MathJax.config
to the combined options.
Fonts for CommonHTMLÂ¶
If you include the CommonHTML output jax in your custom build, the
actual web fonts are not included in the webpacked file, so you will
probably need to include fontURL in the chtml
block of your configuration and have it provide a URL where the fonts
can be found. They are in the
mathjaxfull/es5/output/chtml/fonts/woffv2
directory, and
you can put them on your server, or simply point fontURL to one of
the CDN directories for the fonts.
A Custom ExtensionÂ¶
Making a custom extension is very similar to making a custom combined component. The main difference is that the extension may rely on other components, so you need to tell the build system about that so that it doesnât include the code from those other components. You also donât load the extension file directly (like you do the combined component above), but instead include it in the load array of the loader configuration block, and MathJax loads it itself, as discussed below.
For this example, we make a custom TeX extension that defines new TeX commands implemented by javascript functions.
The commands implemented by here provide the ability to generate
MathML token elements from within TeX by hand. This allows more
control over the content and attributes of the elements produced. The
macros are \mi
, \mo
, \mn
, \ms
, and \mtext
, and
they each take an argument that is the text to be used as the content
of the corresponding MathML element. The text is not further processed
by TeX, but the extension does convert sequences of the form
\uNNNN
(where the N
are hexadecimal digits) into the
corresponding unicode character; e.g., \mi{\u2460}
would produce
U+2460, a circled digit 1, as the content of an mi
element.
The Extension FileÂ¶
After downloading a copy of MathJax as described in the section on
Acquiring the MathJax Code, create a directory for the extension named
customextension
and cd to it. Then create the file mml.js
containing the following text:
import {Configuration} from '../node_modules/mathjaxfull/js/input/tex/Configuration.js';
import {CommandMap} from '../node_modules/mathjaxfull/js/input/tex/SymbolMap.js';
import TexError from '../node_modules/mathjaxfull/js/input/tex/TexError.js';
/**
* This function prevents multiletter mi elements from being
* interpreted as TEXCLASS.OP
*/
function classORD(node) {
this.getPrevClass(node);
return this;
}
/**
* Convert \uXXXX to corresponding unicode characters within a string
*/
function convertEscapes(text) {
return text.replace(/\\u([09AF]{4})/gi, (match, hex) => String.fromCharCode(parseInt(hex,16)));
}
/**
* Allowed attributes on any token element other than the ones with default values
*/
const ALLOWED = {
style: true,
href: true,
id: true,
class: true
};
/**
* Parse a string as a set of attribute="value" pairs.
*/
function parseAttributes(text, type) {
const attr = {};
if (text) {
let match;
while ((match = text.match(/^\s*((?:data)?[az][az]*)\s*=\s*(?:"([^"]*)"(.*?))(?:\s+,\s*$)/i))) {
const name = match[1], value = match[2]  match[3]
if (type.defaults.hasOwnProperty(name)  ALLOWED.hasOwnProperty(name)  name.substr(0,5) === 'data') {
attr[name] = convertEscapes(value);
} else {
throw new TexError('BadAttribute', 'Unknown attribute "%1"', name);
}
text = text.substr(match[0].length);
}
if (text.length) {
throw new TexError('BadAttributeList', 'Can\'t parse as attributes: %1', text);
}
}
return attr;
}
/**
* The methods needed for the MathML token commands
*/
const MmlMethods = {
/**
* @param {TeXParser} parser The TeX parser object
* @param {string} name The control sequence that is calling this function
* @param {string} type The MathML element type to be created
*/
mmlToken(parser, name, type) {
const typeClass = parser.configuration.nodeFactory.mmlFactory.getNodeClass(type);
const def = parseAttributes(parser.GetBrackets(name), typeClass);
const text = convertEscapes(parser.GetArgument(name));
const mml = parser.create('node', type, [parser.create('text', text)], def);
if (type === 'mi') mml.setTeXclass = classORD;
parser.Push(mml);
}
};
/**
* The macro mapping of control sequence to function calls
*/
const MmlMap = new CommandMap('mmlMap', {
mi: ['mmlToken', 'mi'],
mo: ['mmlToken', 'mo'],
mn: ['mmlToken', 'mn'],
ms: ['mmlToken', 'ms'],
mtext: ['mmlToken', 'mtext']
}, MmlMethods);
/**
* The configuration used to enable the MathML macros
*/
const MmlConfiguration = Configuration.create(
'mml', {handler: {macro: ['mmlMap']}}
);
The comments explain what this code is doing. The main piece needed
to make it a TeX extension is the Configuration
created in the
last few lines. It creates a TeX package named mml
that handles
macros through a CommandMap
named mmlMap
that is defined just
above it. That command map defines five macros described at at the
beginning of this section, each of which is tied to a method named
mmlToken
in the MmlMethods
object that is defined earlier,
passing it the name of the MathML token element to create.
The mmlToken
method is the one that is called by the TeX parser
when the \mi
and other macros are called. It gets the argument to
the macro, and any optional attributes, and creates the MathML element
with the attributes, using the argument as the text of the element.
The Webpack ConfigurationÂ¶
Next, create the file webpack.config.js
that includes the
following:
const PACKAGE = require('mathjaxfull/components/webpack.common.js');
module.exports = PACKAGE(
'mml', // the name of the package to build
'../node_modules/mathjaxfull/js', // location of the mathjax library
[ // packages to link to
'components/src/core/lib',
'components/src/input/texbase/lib'
],
__dirname, // our directory
'.' // where to put the packaged component
);
This file gives the name that will be used for this component (mml
in this case), a pointer to where the MathJax javascript code is to be
found (adjust this to suit your setup), an array of components that we
assume are already loaded when this one is loaded (the core
and
texbase
components in this case), the directory name we are
working in (always __dirname
), and the directory where we want the
final packaged component to go (the default is the
mathjaxfull/es5
directory, but we set it to the directory
containing the source files, and the component will end with
.min.js
).
Most of the real work is done by the
mathjaxfull/components/webpack.common.js
file, which is included in
the first line here.
Building the ExtensionÂ¶
Once these two files are ready, you should be able to use the command
../node_modules/mathjaxfull/components/bin/makeAll
to process your custom build. You should end up with a file
mml.min.js
in the directory with the other files. If
you put this on your web server, you can load it as a component by
putting it in the load
array of the loader
block of your
configuration, as descrinbed below.
Loading the ExtensionÂ¶
To load your custom extension, you will need to tell MathJax where it
is located, and include it in the file to be loaded on startup.
MathJax allows you to define paths to locations where your extensions
are stored, and then you can refer to the extensions in that location
by using a prefix that represents that location. MathJax has a
predefined prefix, mathjax
that is the default prefix when none
is specified explicitly, and it refers to the location where the main
MathJax file was loaded (e.g., the file texsvg.js
, or
startup.js
).
You can define your own prefix to point to the location of your
extensions by using the paths
object in the loader
block of
your configuration. In our case (see code below), we add a custom
prefix, and have it point to the URL of our extension (in this case,
the same directory as the HTML file that loads it, represented by the
URL .
). We use the custom
prefix to specify
[custom]/mml.min.js
in the load
array so that our extension
will be loaded.
Finally, we ad the mml
extension to the packages
array in the
tex
block of our configuration via the special notation {â[+]â:
[âŠ]} that tells MathJax to append the given array to the existing
packages
array that is already in the configuration by default.
So this uses all the packages that were already specified, plus our
new mml
package that is defined in our extension.
The configuration and loading of MathJax now looks something like this:
<script>
MathJax = {
loader: {
load: ['[custom]/mml.min.js'],
paths: {custom: '.'}
},
tex: {
packages: {'[+]': ['mml']}
}
};
</script>
<script type="text/javascript" id="MathJaxscript" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/texchtml.js">
</script>
You should change the custom: '.'
line to point to the actual URL for
your server.
This example loads the texchtml.js
combined component, so the TeX
input is already loaded when our extension is loaded. If you are
using startup.js
instead, and including input/tex
in the
load
array, you will need to tell MathJax that your extension
depends on the input/tex
extension so that it waits to load your
extension until after the TeX input jax is loaded. To do that, add a
dependencies
block to your configuration like the following:
<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 type="text/javascript" id="MathJaxscript" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/startup.js">
</script>
This example can be seen live in the MathJax 3 demos repository.
A Custom MathJax BuildÂ¶
It is possible to make a completely custom build of MathJax that is not based on other MathJax components at all. The following example shows how to make a custom build that provides a function for obtaining the speech string for a given TeX math string. This example is similar to one in the MathJax3 demos repository.
After downloading a copy of MathJax as described in the section on
Acquiring the MathJax Code, create a directory called mathjaxspeech
and cd into it.
The Custom Build FileÂ¶
Create the custom MathJax file named mathjaxspeech.js
containing
the following:
//
// Load the desired components
//
const mathjax = require('mathjaxfull/js/mathjax.js').mathjax; // MathJax core
const TeX = require('mathjaxfull/js/input/tex.js').TeX; // TeX input
const MathML = require('mathjaxfull/js/input/mathml.js').MathML; // MathML input
const browser = require('mathjaxfull/js/adaptors/browserAdaptor.js').browserAdaptor; // browser DOM
const Enrich = require('mathjaxfull/js/a11y/semanticenrich.js').EnrichHandler; // semantic enrichment
const Register = require('mathjaxfull/js/handlers/html.js').RegisterHTMLHandler; // the HTML handler
const AllPackages = require('mathjaxfull/js/input/tex/AllPackages').AllPackages; // all TeX packages
const STATE = require('mathjaxfull/js/core/MathItem.js').STATE;
const sreReady = require('mathjaxfull/js/a11y/sre.js').sreReady; // SRE promise;
//
// Register the HTML handler with the browser adaptor and add the semantic enrichment
//
Enrich(Register(browser()), new MathML());
//
// Create the TeX input jax
//
const inputJax = new TeX({
packages: AllPackages,
macros: {require: ['', 1]} // Make \require a noop since all packages are loaded
});
//
// Initialize mathjax with a blank DOM.
//
const html = MathJax.document('', {
enrichSpeech: 'shallow', // add speech to the enriched MathML
InputJax: tex
});
//
// The user's configuration object
//
const CONFIG = window.MathJax  {};
//
// The global MathJax object
//
window.MathJax = {
version: mathjax.version,
html: html,
tex: inputJax,
sreReady: sreReady,
tex2speech(tex, display = true) {
const math = new html.options.MathItem(tex, inputJax, display);
math.convert(html, STATE.CONVERT);
return math.root.attributes.get('datasemanticspeech')  'no speech text generated';
}
}
//
// Perform ready function, if there is one
//
if (CONFIG.ready) {
sreReady.then(CONFIG.ready);
}
Unlike the componentbased example above, this custom build calls on
the MathJax source files directly. The import
commands at the
beginning of the file load the needed objects, and the rest of the
code instructs MathJax to create a MathDocument
object for
handling the conversions that we will be doing (using a TeX input
jax), and then defines a global MathJax
object that has the
tex2speech()
function that our custom build offers.
The Webpack ConfigurationÂ¶
Next, create the file webpack.config.js
that includes the
following:
const PACKAGE = require('mathjaxfull/components/webpack.common.js');
module.exports = PACKAGE(
'mathjaxspeech', // the name of the package to build
'../node_modules/mathjaxfull/js', // location of the mathjax library
[], // packages to link to
__dirname, // our directory
'.' // where to put the packaged component
);
This file gives the name that will be used for this component
(mathjaxspeech
in this case), a pointer to where the MathJax
javascript code is to be found (adjust this to suit your setup), an
array of components that we assume are already loaded when this one is
loaded (none, since this is a selfcontained build), the directory
name we are working in (always __dirname
), and the directory where
we want the final packaged component to go (the default is the
mathjaxfull/es5
directory, but we set it to the directory
containing the source files, and the component will end with
.min.js
).
Most of the real work is done by the
mathjaxfull/components/webpack.common.js
file, which is included in
the first line here.
Building the Custom FileÂ¶
Once these two files are ready, you should be able to use the command
../node_modules/mathjaxfull/components/bin/makeAll
to process your custom build. You should end up with a file
mathjaxspeech.min.js
in the directory with the other files. it
will contain just the parts of MathJax that are needed to implement
the MathJax.tex2speech()
command defined in the file above.
Note that this is not enough to do normal typesetting (for example, no
output jax has been included), so this is a minimal file for producing
the speech strings from TeX input.
Using the File in a Web PageÂ¶
If you put the mathjaxspeech.min.js
file on your web server, you
can load it into your web pages in place of loading MathJax from a
CDN. This fill will include all that you need to use the
MathJax.tex2speech()
command in your pages. Just add
<script src="mathjaxspeech.min.js" id="MathJaxscript" async></script>
to your page (adjust the URL to point to wherever you have placed the
custommathjax.min.js
file). Then you can use javascript calls
like
const speech = MathJax.tex2speech('\\sqrt{x^2+1}', true);
to obtain a text string that contains the speech text for the square root given in the TeX string.
Note, however, that the SpeechRule Engine (SRE) that underlies the
speech generation loads asynchronously, so you have to be sure that
SRE is ready before you make such a call. The mathjaxspeech.js
file provides two ways of handling the synchronization with SRE. The
first is to use the global MathJax
variable to include a
ready()
function that is called when SRE is ready. For
example,
window.speechReady = false;
window.MathJax = {
ready: () => {
window.speechReady = true;
}
};
would set the global variable speechReady
to true when SRE is
ready to run (so you can check that value to see if speech can be
generated yet). A more sophisticated ready()
function could
allow you to queue translations to be performed, and when SRE is ready,
it performs them. Alternatively, if you have a user interface that
allows users to transform TeX expressions, for example, then you could
initially disable to buttons that trigger speech generation, and use
the ready()
function to enable them. That way, the user canât
ask for speech translation until it can be produced.
The second method of synchronizing with SRE is through the fact that
the code sets MathJax.sreReady
to a promise that is resolves
when SRE is ready, which you can use to make sure SRE is ready when you
want to do speech generation. For example
function showSpeech(tex, display = false) {
MathJax.sreReady = MathJax.sreReady.then(() => {
const speech = MathJax.tex2speech(tex, display);
const output = document.getElementById('speech');
output.innerHTML = '';
output.appendChild(document.createTextNode(speech));
});
}
provides a function that lets you specify a TeX string to translate,
and then (asynchronously) generates the speech for it and displays it
as the contents of the DOM element with id="speech"
in the page.
Examples in a BrowserÂ¶
There are a number of example files in the MathJax web demo repository (see the list of demos). These include documentation as well as live examples that you can run.
In addition, there are examples for:
 Configuring MathJax using an external script
 Configuring and loading MathJax using one local file
 Synchronizing with MathJax using promises
 Reseting TeX equation numbering
 Loading MathJax only on pages with math
Getting Started with NodeÂ¶
This page is still under construction.
See the MathJax node demos for examples of how to use MathJax from a node application. These are categorized into three groups
 Examples using MathJax components via the startup module
 Examples using MathJax components loaded by hand
 Examples using MathJax modules directly.
More information will be coming to this section in the future.
Three Ways to Use MathJax in NodeÂ¶
Using MathJax Components in NodeÂ¶
This page is still under construction.
It is possible to use MathJax in a node application in essentially
the same was that it is used in a browser. in particular, you can
load MathJax components and configure MathJax using a global
MathJax
object and loading the startup
component or a combined component file
via nodeâs require()
command.
See the MathJax node demos for examples of how to use MathJax from a node application. in particular, see the componentbased examples for illustrations of how to use MathJax components in a node application.
More information will be coming to this section in the future.
Loading Components by Hand in NodeJSÂ¶
This page is still under construction.
In a node application, you can load components individually yourself
via nodeâs require()
command, rather than relying on MathJax
loader, which operates asynchronously. This gives
you the ability to work with MathJax synchronously (i.e., without the
need to use promises). It also gives you more complete control over
the loading of components, though in this case you do need to take
care to load dependencies yourself, and to make sure the components
are loaded in the right order.
This approach lets you take advantage of using the convenient
packaging of MathJax into individual components, the configuration of
MathJax through the global MathJax
variable, and its automatic
creation of objects and methods by the startup
component, while still allowing you to work completely synchronously
with the MathJax code. (Or you can still use promises as well â
itâs up to you!)
See the MathJax node demos for examples of how to use MathJax from a node application. in particular, see the preloading examples for illustrations of how to load MathJax components by hand in a node application.
More information will be coming to this section in the future.
Linking to MathJax Directly in NodeÂ¶
This page is still under construction.
Node applications can link directly to MathJax source code, rather than using MathJax components. This provides the lowestlevel access to the MathJax code, and is more complicated than using components, but it gives you the greatest flexibility as well.
See the MathJax node demos for examples of how to use MathJax from a node application. in particular, see the noncomponentbased examples for illustrations of how to use MathJax modules directly in a node application, rather than using the prepackaged components.
More information will be coming to this section in the future.
Examples of MathJax in NodeÂ¶
This page is still under construction.
See the MathJax node demos for examples of how to use MathJax from a node application. These are categorized into three groups
 Examples using MathJax components via the startup module
 Examples using MathJax components loaded by hand
 Examples using MathJax modules directly.
More information will be coming to this section in the future.
TeX and LaTeX SupportÂ¶
The support for TeX and LaTeX in MathJax involves two functions:
the first looks for mathematics within your web page (indicated by
math delimiters like $$...$$
) and marks the mathematics for later
processing by MathJax, and the second is what converts the TeX
notation into MathJaxâs internal format, where one of MathJaxâs output
processors then displays it in the web page. In MathJax version 2,
these were separated into distinct components (the tex2jax
preprocessor and the TeX input jax), but in version 3, the tex2jax
functions have been folded into the TeX input jax.
The TeX input jax can be configured to look for whatever markers you want to use for your math delimiters. See the TeX configuration options section for details on how to customize the delimiters, and other options for TeX input.
The TeX input processor handles conversion of your mathematical notation into MathJaxâs internal format (which is essentially MathML), and so acts as a TeX to MathML converter. The TeX input processor has can also be customized through the use of extensions that define additional functionality (see the TeX and LaTeX extensions section).
Note: if you are not familiar with TeX/LaTeX, a good starting point is the LaTeX Wiki book.
Differences from Actual TeXÂ¶
Since MathJax renders for the web and TeX is a print layout engine, there are natural limitations to which parts of TeX can be supported in a reasonable way. Accordingly, there are several differences between ârealâ TeX/LaTeX systems and MathJaxâs TeX Input.
First and foremost, the TeX input processor implements only the
mathmode macros of TeX and LaTeX, not the textmode macros. MathJax
expects that you will use standard HTML tags to handle formatting the
text of your page; MathJax only handles the mathematics. So, for
example, MathJax does not implement \emph
or
\begin{enumerate}...\end{enumerate}
or other textmode macros or
environments. You must use HTML to handle such formatting tasks. If
you need a LaTeXtoHTML converter, you should consider other options.
There are two exception to this rule. First, MathJax supports the
\ref
macro outside of mathmode. Second, MathJax supports some
macros that add text within mathmode (such as \text{}
) as well as
$...$
and \(...\)
within such macros (to switch back into
mathmode) and \$
to escape.
Second, some features in MathJax might be necessarily limited. For
example, MathJax only implements a limited subset of the array
environmentâs preamble; i.e., only the l
, r
, c
, and 
characters alongside :
for dashed lines â everything else is
ignored.
TeX and LaTeX math delimitersÂ¶
By default, the TeX processor uses the LaTeX math delimiters, which
are \(...\)
for inline math, and \[...\]
for displayed
equations. It also recognizes the TeX delimiters $$...$$
for
displayed equations, but it does not define $...$
as inline
math delimiters. That is because dollar signs appear too often in
nonmathematical settings, which could cause some text to be treated
as mathematics unexpectedly. For example, with singledollar
delimiters, ââŠ the cost is $2.50 for the first one, and $2.00 for
each additional one âŠâ would cause the phrase â2.50 for the first
one, andâ to be treated as mathematics since it falls between dollar
signs. For this reason, if you want to use single dollar signs for
inline math mode, you must enable that explicitly in your
configuration:
window.MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']]
}
};
You can use \$
to prevent a dollar sign from being treated as a
math delimiter within the text of your web page, e.g., use ââŠ the
cost is $2.50 for the first one, and $2.00 for each additional one
âŠâ to prevent these dollar signs from being used as math delimiters
in a web page where dollar signs have been configured to be inline
delimiters.
Note that, as opposed to true LaTeX, MathJax processes all
environments when wrapped inside math delimiters, even those like
\begin{equation}...\end{equation}
that are supposed to be used to
initiate math mode. By default, MathJax will also render all
environments outside of delimiters, e.g.,
\begin{matrix}...\end{matrix}
would be processed even if it is not
in math mode delimiters, though you are encouraged to use proper
delimiters for these cases to make your files more compatible with
actual LaTeX. This functionality can be controlled via the
processEnvironments
option in the tex configuration options.
See the tex configuration options page, for additional configuration parameters that you can specify for the TeX input processor.
TeX and LaTeX in HTML documentsÂ¶
HTML Special CharactersÂ¶
Keep in mind that your mathematics is part of an HTML document, so you
need to be aware of the special characters used by HTML as part of its
markup. There cannot be HTML tags within the math delimiters (other
than <br>
, <wbr>
, and HTML comments) as TeXformatted math
does not include HTML tags. Also, since the mathematics is initially
given as text in the page, you need to be careful that your
mathematics doesnât look like HTML tags to the browser, which parses
the page before MathJax gets to see it. In particular, that means
that you have to be careful about things like lessthan and
greaterthan signs (<
and >
), and ampersands (&
), which
have special meaning to web browsers. For example,
... when $x<y$ we have ...
will cause a problem, because the browser will think <y
is the
beginning of a tag named y
(even though there is no such tag in
HTML). When this happens, the browser will think the tag continues up
to the next >
in the document (typically the end of the next
actual tag in the HTML file), and you may notice that you are missing
part of the text of the document. In the example above, the â<y
â
and âwe have ...
â will not be displayed because the browser thinks
it is part of the tag starting at <y
. This is one indication you
can use to spot this problem; it is a common error and should be
avoided.
Usually, it is sufficient simply to put spaces around these symbols to cause the browser to avoid them, so
... when $x < y$ we have ...
should work. Alternatively, you can use the HTML entities <
,
>
and &
to encode these characters so that the browser
will not interpret them, but MathJax will. E.g.,
... when $x < y$ we have ...
Finally, there are \lt
and \gt
macros defined to make it
easier to enter <
and >
using TeXlike syntax:
... when $x \lt y$ we have ...
Again, keep in mind that the browser interprets your text before MathJax does.
Interactions with ContentManagement SystemsÂ¶
Another source of difficulty is when MathJax is used in
contentmanagement systems that have their own document processing
commands that are interpreted before the HTML page is created. For
example, many blogs and wikis use formats like Markdown to allow you
to create the content of your pages. In Markdown, the underscore is
used to indicate italics, and this usage will conflict with MathJaxâs
use of the underscore to indicate a subscript. Since Markdown is
applied to the page first, it may convert your subscript markers into
italics (inserting <i>
or <em>
tags into your mathematics,
which will cause MathJax to ignore the math).
Such systems need to be told not to modify the mathematics that appears between math delimiters. That usually involves modifying the contentmanagement system itself, which is beyond the means of most page authors. If you are lucky, someone else will already have done this for you, and you may be able to find a MathJax plugin for your system using a web search.
If there is no plugin for your system, or if the plugin doesnât handle
the subtleties of isolating the mathematics from the other markup that
it supports, then you may have to âtrickâ the contentmanagement
system into leaving your mathematics untouched. Most
contentmanagement systems provide some means of indicating text that
should not be modified (âverbatimâ text), often for giving code
snippets for computer languages. You may be able use that to enclose
your mathematics so that the system leaves it unchanged and MathJax
can process it. For example, in Markdown, the backtick (`
) is
used to mark verbatim text, so
... we have `\(x_1 = 132\)` and `\(x_2 = 370\)` and so ...
may be able to protect the underscores from being processed by Markdown.
Alternatively, some contentmanagement systems use the backslash
(\
) as a special character for âescapingâ other characters, and
you may be able to use that to prevent it from converting underscores
to italics. That is, you might be able to use
... we have $x\_1 = 132$ and $x\_2 = 370$ and so ...
to avoid the underscores from making 1 = 132$ and $x
into italics.
If your system uses backslashes in this way, that can help with italics, but it also causes difficulties in other ways. Because TeX uses this character to indicate a macro name, you need to be able to pass a backslash along to the page so that MathJax will be able to identify macro names; but if the contentmanagement system is using them as escapes, it will remove the backslashes as part of its processing, and they wonât make it into the final web page. In such systems, you may have to double the backslashes in order to obtain a single backslash in your HTML page. For example, you may have to do
\\begin{array}{cc}
a & b \\\\
c & c
\\end{array}
to get an array with the four entries a, b, c, and d in two
rows. Note in particular that if you want \\
you will have to
double both backslashes, giving \\\\
.
That may also affect how you enter the math delimiters. Since the
defaults are \(...\)
and \[...\]
, if your system uses \
as
an escape of its own, you may need to use \\(...\\)
and
\\[...\\]
instead in order to get \(...\)
and \[...\]
into
the page where MathJax can process it.
Finally, if you have enabled single dollar signs as math delimiters
and you want to include a literal dollar sign in your web page (one
that doesnât represent a math delimiter), you will need to prevent
MathJax from using it as a math delimiter. If you also enable the
processEscapes
configuration parameter (it is enabled by default),
then you can use \$
in the text of your page to get a dollar sign
(without the backslash) in the end. Alternatively, you can use
something like <span>$</span>
to isolate the dollar sign so that
MathJax will not use it as a delimiter.
Defining TeX macrosÂ¶
You can use the \def
, \newcommand
, \renewcommand
,
\newenvironment
, \renewenvironment
, and \let
commands to
create your own macros and environments. Unlike actual TeX, however,
in order for MathJax to process such definitions, they must be
enclosed in math delimiters (since MathJax only processes macros in
mathmode). For example
\(
\def\RR{{\bf R}}
\def\bold#1{{\bf #1}}
\)
would define \RR
to produce a boldfaced âRâ, and \bold{...}
to put its argument into bold face. Both definitions would be
available throughout the rest of the page.
You can include macro definitions in the macros
section of the
tex
blocks of your configuration, but they must be represented as
javascript objects. For example, the two macros above can be
predefined in the configuration by
window.MathJax = {
tex: {
macros: {
RR: "{\\bf R}",
bold: ["{\\bf #1}", 1]
}
}
};
Here you give the macro as a name: value
pair, where the name
is the name of the control sequence (without the backslash) that you
are defining, and value
is either the replacement string for the
macro (when there are no arguments) or an array consisting of the
replacement string followed by the number of arguments for the macro
and, optionally, default values for optional arguments.
Note that the replacement string is given as a javascript string literal, and the backslash has special meaning in javascript strings. So to get an actual backslash in the string you must double it, as in the examples above.
Automatic Equation NumberingÂ¶
The TeX input processing in MathJax can be configured to add equation numbers to displayed equations automatically. This functionality is turned off by default, but it is easy to configure MathJax to produce automatic equation numbers by adding:
window.MathJax = {
tex: {
tags: 'ams'
}
};
to tell the TeX input processor to use the AMS numbering rules (where only certain environments produce numbered equations, as they would be in LaTeX). It is also possible to set the tagging to âallâ, so that every displayed equation will get a number, regardless of the environment used.
You can use \notag
or \nonumber
to prevent
individual equations from being numbered, and \tag{}
can be used
to override the usual equation number with your own symbol instead (or
to add an equation tag even when automatic numbering is off).
Note that the AMS environments come in two forms: starred and
unstarred. The unstarred versions produce equation numbers (when
tags
is set to 'ams'
) and the starred ones donât. For example
\begin{equation}
E = mc^2
\end{equation}
will be numbered, while
\begin{equation*}
e^{\pi i} + 1 = 0
\end{equation*}
will not be numbered (when tags
is 'ams'
).
You can use \label
to give an equation an identifier that you can
use to refer to it later, and then use \ref
or \eqref
within
your document to insert the actual equation number at that location,
as a reference. For example,
In equation \eqref{eq:sample}, we find the value of an
interesting integral:
\begin{equation}
\int_0^\infty \frac{x^3}{e^x1}\,dx = \frac{\pi^4}{15}
\label{eq:sample}
\end{equation}
includes a labeled equation and a reference to that equation. Note that references can come before the corresponding formula as well as after them.
You can configure the way that numbers are displayed and how the
references to them by including the tagFormat
extension, and
setting options within the tagFormat
block of your tex
configuration. See the tagFormat extension for more
details.
If you are using automatic equation numbering and modifying the page dynamically, you can run into problems due to duplicate labels. See Resetting Automatic Equation Numbering for how to address this.
TeX and LaTeX extensionsÂ¶
While MathJax includes nearly all of the Plain TeX math macros, and
many of the LaTeX macros and environments, not everything is
implemented in the core TeX input processor. Some lessused commands
are defined in extensions to the TeX processor. MathJax will load
some extensions automatically when you first use the commands they
implement (for example, the \color
macro is implemented in the
color
extension, but MathJax loads this extension itself when you
use that macro). While most extensions are set up to load
automatically, there are a few that you would need to load explicitly
yourself. See the autoload extension below for how to
configure which extensions to autoload.
Loading TeX ExtensionsÂ¶
To enable one of the TeX extensions you need to do two things: load
the extension, and configure TeX to include it in its package setup.
For the first, to load an extension as a component, add its name to
the load
array in the loader
block of your MathJax
configuration. For example, to load the color
extension, add
'[tex]/color'
to the load array, as in the example below. To do
the second, add the extension name to packages
array in the
tex
block of your configuration. You can use the special
'[+]'
notation to append it to the default packages (so you donât
need to know what they are). For example:
window.MathJax = {
loader: {load: ['[tex]/color']},
tex: {packages: {'[+]': ['color']}}
};
will load the color
extension and configure the TeX input jax to
enable it.
A number of extensions are already loaded and configured in the
components that contain the TeX extension. The input/tex
, and the
combined components containing tex
and not ending in full
include the ams
, newcommand
, noUndefined
, require
,
autoload
, and configMacros
extensions, with the other
extensions being autoloaded as needed. The input/texbase
component has no extensions loaded, while the input/texfull
and
the combined extensions ending in full
load all the extensions.
If you load a component that has an extension you donât want to use,
you can disable it by removing it from the package
array in the
tex
block of your MathJax configuration. For example, to disable
\require
and autoloading of extensions, use
window.MathJax = {
tex: {packages: {'[]': ['require', 'autoload']}}
};
if you are using, for example, the texchtml.js
combined component
file.
Loading Extensions at Run TimeÂ¶
You can also load these extensions from within a math expression using
the nonstandard \require{extension}
macro. For example
\(\require{color}\)
would load the color extension into the page. This way you you can load extensions into pages that didnât load them in their configurations (and prevents you from having to load all the extensions into all pages even if they arenât used).
Configuring TeX ExtensionsÂ¶
Some extensions have options that control their behavior. For
example, the color extension allows you to set the padding and
borderwidth used for the \colorbox
and \fcolorbox
macros.
Such extensions are configured using a block within the tex
configuration of your MathJax configuration object. The block has the
same name as the extension, and contains the options you want to set
for that extension. For example,
window.MathJax = {
loader: {load: ['[tex]/color']},
tex: {
packages: {'[+]': ['color']},
color: {
padding: '5px'
}
}
};
would set the padding for \colorbox
to be 5 pixels.
See the Configuring MathJax section for details about the options for each of the extensions below.
For extensions that are not loaded explicitly but may be loaded via
the autoload package or the \require
macro, you canât include
the configuration within the tex
block, because MathJax will not
know the options that are available (since the extension hasnât been
loaded yet). In that case, move the configuration block to the top
level of the MathJax configuration object and prefix it with
[tex]/
, as in:
window.MathJax = {
'[tex]/color': {
padding: '5px'
}
};
The TeX/LaTeX Extension ListÂ¶
The main extensions are described below:
actionÂ¶
The action extension gives you access to the MathML <maction>
element. It defines three new nonstandard macros:

\mathtip{math}{tip}
Use
tip
(in math mode) as tooltip formath
.

\texttip{math}{tip}
Use
tip
(plain text) as tooltip formath
.

\toggle{math1}{math2}...\endtoggle
Show
math1
, and when clicked, showmath2
, and so on. When the last one is clicked, go back tomath1
.
This extension is loaded automatically when the autoload extension
is used. To load the action extension explicitly, add
'[tex]/action'
to the load
array of the loader
block of
your MathJax configuration, and add 'action'
to the packages
array of the tex
block.
window.MathJax = {
loader: {load: ['[tex]/action']},
tex: {packages: {'[+]': ['action']}}
};
Alternatively, use \require{action}
in a TeX expression to load it
dynamically from within the math on the page, if the require
package is loaded.
amsÂ¶
The ams extension implements AMS math environments and macros, and
macros for accessing the characters in the AMS symbol fonts. This
extension is already loaded in all the components that include
the TeX input jax, other than input/texbase
. See the list
of control sequences for details about what commands
are implemented in this extension.
To load the ams extension explicitly (when using
input/texbase
for example), add '[tex]/ams'
to the
load
array of the loader
block of your MathJax configuration,
and add 'ams'
to the packages
array of the tex
block.
window.MathJax = {
loader: {load: ['[tex]/ams']},
tex: {packages: {'[+]': ['ams']}}
};
Alternatively, use \require{ams}
in a TeX expression to load it
dynamically from within the math on the page, if the require
extension is loaded.
amsCdÂ¶
The amsCd extensions implements the CD environment for commutative diagrams. See the AMScd guide for more information on how to use the CD environment.
This extension is loaded automatically when the autoload extension
is used. To load the amsCd extension explicitly, add
'[tex]/amsCd'
to the load
array of the loader
block of
your MathJax configuration, and add 'amsCd'
to the packages
array of the tex
block.
window.MathJax = {
loader: {load: ['[tex]/amsCd']},
tex: {packages: {'[+]': ['amsCd']}}
};
Alternatively, use \require{amsCd}
in a TeX expression to load it
dynamically from within the math on the page, if the require
extension is loaded.
autoloadÂ¶
The autoload extension predefines all the macros from the extensions that havenât been loaded already so that they automatically load the needed extension when they are first used, with the exception of the physics package, since it redefines standard macros, and the ams package, due to the large number of macros it contains.
The autoload extension is loaded in all the components that include
the TeX input jax, other than input/texbase
. That means that the
TeX input jax essentially has access to all the extensions, even if
they arenât loaded initially, and you should never have to use
\require
or load other extensions (except physics) explicitly
unless you want to.
You can control which extensions autoload will load using the
autoload
object in the tex
block of your MathJax
configuration. This object contains key: value pairs where the
key is the name of an extension, and value is an array listing the
macro names that cause that extension to be loaded. If environments
can also cause the extension to be loaded, value is an array
consisting of two subarrays, the first being the names of the macros
that cause the extension to autoload, and the second being the names
of the environments that cause the extension to be loaded.
For example,
window.MathJax = {
tex: {
autoload: {
verb: ['verb']
}
}
};
says that the \verb
command should load the verb
extension when it is first used.
If the array is empty, then that extension will not be loaded, so to prevent autoload from loading an extension, assign it the empty array. E.g.,
window.MathJax = {
tex: {
autoload: {
verb: []
}
}
};
says that the verb extension will not be autoloaded.
Note
The autoload extension defines \color
to be the one from the
color extension (the LaTeXcompatible one rather than
the nonstandard MathJax version). If you wish to use the
nonstandard version2 \color
macro from the colorV2
extension instead, use the following:
window.MathJax = {
tex: {
autoload: {
color: [],
colorV2: ['color']
}
}
};
bboxÂ¶
The bbox extension defines a new macro for adding background colors, borders, and padding to your math expressions.

\bbox[options]{math}
puts a bounding box around
math
using the providedoptions
. The options can be one of the following: A color name used for the background color.
 A dimension (e.g.,
2px
) to be used as a padding around the mathematics (on all sides).  Style attributes to be applied to the mathematics (e.g.,
border: 1px solid red
).  A combination of these separated by commas.
Here are some examples:
\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]
% a 2px red border around the math 5px away
This extension is loaded automatically when the autoload extension
is used. To load the bbox extension explicitly, add
'[tex]/bbox'
to the load
array of the loader
block of
your MathJax configuration, and add 'bbox'
to the packages
array of the tex
block.
window.MathJax = {
loader: {load: ['[tex]/bbox']},
tex: {packages: {'[+]': ['bbox']}}
};
Alternatively, use \require{bbox}
in a TeX expression to load it
dynamically from within the math on the page, if the require
extension is loaded.
boldsymbolÂ¶
The boldsymbol extension defines the \boldsymbol
LaTeX macro
that produces a bold version of its argument, provided bold versions
of the required characters are available.
This extension is loaded automatically when the autoload extension
is used. To load the boldsymbol extension explicitly (when using
input/texbase
for example), add '[tex]/boldsymbol'
to the
load
array of the loader
block of your MathJax configuration,
and add 'boldsymbol'
to the packages
array of the tex
block.
window.MathJax = {
loader: {load: ['[tex]/boldsymbol']},
tex: {packages: {'[+]': ['boldsymbol']}}
};
Alternatively, use \require{boldsymbol}
in a TeX expression to load it
dynamically from within the math on the page, if the require
extension is loaded.
braketÂ¶
The braket extension defines the following macros for producing the braket notation and set notation used in quantum mechanics
\bra{math}
\ket{math}
\braket{math}
\set{math}
\Bra{math}
\Ket{math}
\Braket{math}
\Set{math}
and the nonstandard macros
\ketbra{math}
\Ketbra{math}
See the documentation for the LaTeX braket package for details of how these are used.
This extension is loaded automatically when the autoload extension
is used. To load the braket extension explicitly (when using
input/texbase
for example), add '[tex]/braket'
to the
load
array of the loader
block of your MathJax configuration,
and add 'braket'
to the packages
array of the tex
block.
window.MathJax = {
loader: {load: ['[tex]/braket']},
tex: {packages: {'[+]': ['braket']}}
};
Alternatively, use \require{braket}
in a TeX expression to load it
dynamically from within the math on the page, if the require
extension is loaded.
cancelÂ¶
The cancel extension defines the following macros:

\cancel{math}
Strikeout
math
from lower left to upper right.

\bcancel{math}
Strikeout
math
from upper left to lower right.

\xcancel{math}
Strikeout
math
with an âXâ.

\cancelto{value}{math}
Strikeout
math
with an arrow going tovalue
.
This extension is loaded automatically when the autoload extension
is used. To load the cancel extension explicitly, add
'[tex]/cancel'
to the load
array of the loader
block of
your MathJax configuration, and add 'cancel'
to the packages
array of the tex
block.
window.MathJax = {
loader: {load: ['[tex]/cancel']},
tex: {packages: {'[+]': ['cancel']}}
};
Alternatively, use \require{cancel}
in a TeX expression to load it
dynamically from within the math on the page, if the require
extension is loaded.
colorÂ¶
The color extension defines the \color
macro as in the LaTeX
color package, along with \colorbox
, \fcolorbox
, and
\definecolor
. It declares the standard set of colors (Apricot,
Aquamarine, Bittersweet, and so on), and provides the RGB, rgb,
and greyscale color spaces in addition to named colors.
This extension is loaded automatically when the autoload extension
is used. To load the color extension explicitly, add
'[tex]/color'
to the load
array of the loader
block of
your MathJax configuration, and add 'color'
to the packages
array of the tex
block.
window.MathJax = {
loader: {load: ['[tex]/color']},
tex: {packages: {'[+]': ['color']}}
};
Alternatively, use \require{color}
in a TeX expression to load it
dynamically from within the math on the page, if the require
extension is loaded.
Note
In version 2, a nonstandard \color
macro was the default
implementation, but in version 3, the standard LaTeX one is now the
default. The difference between the two is that the standard
\color
macro is a switch (everything that follows it is in the
new color), whereas the nonstandard version 2 \color
macro
takes an argument that is the mathematics to be colored. That is,
in version 2, you would do
\color{red}{x} + \color{blue}{y}
to get a red x added to a blue y. But in version 3 (and in LaTeX itself), you would do
{\color{red} x} + {\color{blue} y}
If you want the old version 2 behavior, use the colorV2 extension instead.
colorV2Â¶
The colorV2 extension defines the \color
macro to be the
nonstandard macro that is the default in MathJax version 2, namely,
it takes two arguments, one the name of the color (or an HTML color of
the form #RGB
or #RRGGBB
), and the second the math to be
colored. This is in contrast to the standard LaTeX \color
command, which is a switch that changes the color of everything that
follows it.
This extension is not loaded automatically when the autoload
extension is used. To load the color extension explicitly, add
'[tex]/color'
to the load
array of the loader
block of
your MathJax configuration, and add 'color'
to the packages
array of the tex
block.
window.MathJax = {
loader: {load: ['[tex]/colorV2']},
tex: {packages: {'[+]': ['color']}}
};
or, use \require{colorV2}
in a TeX expression to load it
dynamically from within the math on the page, if the require
extension is loaded.
Alternatively, you can configure the autoload package to load
colorV2 when \color
is used rather than the (LaTeXcompatible)
color extension:
window.MathJax = {
tex: {
autoload: {
color: [], // don't autoload the color extension
colorV2: ['color'] // autoload colorV2 on the first use of \color
}
}
};
configMacrosÂ¶
The configMacros extension provides the macros
configuration
option for the tex
block of your MathJax configuration. This
allows you to predefine custom macros for your page using javascript.
For example,
window.MathJax = {
tex: {
macros: {
RR: "{\\bf R}",
bold: ["{\\bf #1}", 1]
}
}
};
defines a macro \RR
that produces a bold âRâ, while
\bold{math}
typesets the math
using the bold font. See
Defining TeX macros for more information.
This extension is already loaded in all the components that
include the TeX input jax, other than input/texbase
. To load the
configMacros extension explicitly (when using input/texbase
for
example), add '[tex]/configMacros'
to the load
array of the
loader
block of your MathJax configuration, and add
'configMacros'
to the packages
array of the tex
block.
window.MathJax = {
loader: {load: ['[tex]/configMacros']},
tex: {packages: {'[+]': ['configMacros']}}
};
encloseÂ¶
The enclose extension gives you access to the MathML <menclose>
element for adding boxes, ovals, strikethroughs, and other marks over
your mathematics. It defines the following nonstandard macro:

\enclose{notation}[attributes]{math}
Where
notation
is a commaseparated list of MathML<menclose>
notations (e.g.,circle
,left
,updiagonalstrike
,longdiv
, etc.),attributes
are MathML attribute values allowed on the<menclose>
element (e.g.,mathcolor="red"
,mathbackground="yellow"
), andmath
is the mathematics to be enclosed. See the MathML 3 specification for more details on<menclose>
.
For example
\enclose{circle}[mathcolor="red"]{x}
\enclose{circle}[mathcolor="red"]{\color{black}{x}}
\enclose{circle,box}{x}
\enclose{circle}{\enclose{box}{x}}
This extension is loaded automatically when the autoload extension
is used. To load the enclose extension explicitly, add
'[tex]/enclose'
to the load
array of the loader
block of
your MathJax configuration, and add 'enclose'
to the packages
array of the tex
block.
window.MathJax = {
loader: {load: ['[tex]/enclose']},
tex: {packages: {'[+]': ['enclose']}}
};
Alternatively, use \require{enclose}
in a TeX expression to load it
dynamically from within the math on the page, if the require
extension is loaded.
extpfeilÂ¶
The extpfeil extension adds more macros for producing extensible
arrows, including \xtwoheadrightarrow
, \xtwoheadleftarrow
,
\xmapsto
, \xlongequal
, \xtofrom
, and a nonstandard
\Newextarrow
for creating your own extensible arrows. The latter
has the form

\Newextarrow{\cs}{lspace,rspace}{unicodechar}
where
\cs
is the new control sequence name to be defined,lspace
andrspace
are integers representing the amount of space (in suitably small units) to use at the left and right of text that is placed above or below the arrow, andunicodechar
is a number representing a unicode character position in either decimal or hexadecimal notation.
For example
\Newextarrow{\xrightharpoonup}{5,10}{0x21C0}
defines an extensible right harpoon with barb up. Note that MathJax knows how to stretch only a limited number of characters, so you may not actually get a stretchy character this way. The characters that can be stretched may also depend on the font you have selected.
This extension is loaded automatically when the autoload extension
is used. To load the extpfeil extension explicitly, add
'[tex]/extpfeil'
to the load
array of the loader
block of
your MathJax configuration, and add 'extpfeil'
to the packages
array of the tex
block.
window.MathJax = {
loader: {load: ['[tex]/extpfeil']},
tex: {packages: {'[+]': ['extpfeil']}}
};
Alternatively, use \require{extpfeil}
in a TeX expression to load it
dynamically from within the math on the page, if the require
extension is loaded.
htmlÂ¶
The html extension gives you access to some HTML features like styles, classes, element IDâs, and clickable links. It defines the following nonstandard macros:

\href{url}{math}
Makes
math
be a link to the page given byurl
.

\class{name}{math}
Attaches the CSS class
name
to the output associated withmath
when it is included in the HTML page. This allows your CSS to style the element.

\cssId{id}{math}
Attaches an id attribute with value
id
to the output associated withmath
when it is included in the HTML page. This allows your CSS to style the element, or your javascript to locate it on the page.

\style{css}{math}
Adds the give
css
declarations to the element associated withmath
.
For example:
x \href{whyequal.html}{=} y^2 + 1
(x+1)^2 = \class{hidden}{(x+1)(x+1)}
(x+1)^2 = \cssId{step1}{\style{visibility:hidden}{(x+1)(x+1)}}
This extension is loaded automatically when the autoload extension
is used. To load the html extension explicitly, add
'[tex]/html'
to the load
array of the loader
block of
your MathJax configuration, and add 'html'
to the packages
array of the tex
block.
window.MathJax = {
loader: {load: ['[tex]/html']},
tex: {packages: {'[+]': ['html']}}
};
Alternatively, use \require{html}
in a TeX expression to load it
dynamically from within the math on the page, if the require
extension is loaded.
mhchemÂ¶
The mhchem extensions implements the \ce
and \pu
chemical equation macros of the LaTeX mhchem package. See the
mhchem CTAN page for more
information and a link to the documentation for mhchem.
For example
\ce{C6H5CHO}
\ce{$A$ >[\ce{+H2O}] $B$}
\ce{SO4^2 + Ba^2+ > BaSO4 v}
This extension is loaded automatically when the autoload extension
is used. To load the mhchem extension explicitly, add
'[tex]/mhchem'
to the load
array of the loader
block of
your MathJax configuration, and add 'mhchem'
to the packages
array of the tex
block.
window.MathJax = {
loader: {load: ['[tex]/mhchem']},
tex: {packages: {'[+]': ['mhchem']}}
};
Alternatively, use \require{mhchem}
in a TeX expression to load it
dynamically from within the math on the page, if the require
extension is loaded.
Note
The implementation of the mhchem extension was completely rewritten for MathJax by the author of the original LaTeX package. The older version was still available MathJax version 2.7, but it is no longer part of MathJax version 3. Only the newer version of mhchem is available.
newcommandÂ¶
The newcommand extension provides the \def
, \newcommand
,
\renewcommand
, \let
, \newenvironment
, and
\renewenvironment
macros for creating new macros and environments
in TeX. For example,
\(
\def\RR{{\bf R}}
\def\bold#1{{\bf #1}}
\)
defines a macro \RR
that produces a bold âRâ, while
\bold{math}
typesets its argument using a bold font. See
Defining TeX macros for more information.
This extension is already loaded in all the components that
include the TeX input jax, other than input/texbase
. To load the
newcommand extension explicitly (when using input/texbase
for
example), add '[tex]/newcommand'
to the load
array of the
loader
block of your MathJax configuration, and add
'newcommand'
to the packages
array of the tex
block.
window.MathJax = {
loader: {load: ['[tex]/newcommand']},
tex: {packages: {'[+]': ['newcommand']}}
};
Alternatively, use \require{newcommand}
in a TeX expression to load it
dynamically from within the math on the page, if the require
package is loaded.
noerrorsÂ¶
The noerrors extension prevents TeX error messages from being displayed and shows the original TeX code instead.
Note
In version 2 of MathJax, you could configure the CSS that applied to the display of the original TeX. In version 3, the original TeX is shown via an merror MathML element instead.
Note
In version 2, this extension was included in all the combined configuration files that contain the TeX input jax, but in MathJax version 3, you must load it explicitly if you want to use it.
To load the noerrors extension, add '[tex]/noerrors'
to the
load
array of the loader
block of your MathJax configuration,
and add 'noerrors'
to the packages
array of the tex
block.
window.MathJax = {
loader: {load: ['[tex]/noerrors']},
tex: {packages: {'[+]': ['noerrors']}}
};
noundefinedÂ¶
The noundefined extension causes undefined control sequences to be
shown as their macro names rather than generating error messages. So
$X_{\xyz}$
would display as an âXâ with a subscript consisting of the
text \xyz
in red.
Note
In version 2, the styling for the undefined macro could be configured. In version 3, this is not yet implemented.
This extension is already loaded in all the components that
include the TeX input jax, other than input/texbase
. To load the
ams extension explicitly (when using input/texbase
for
example), add '[tex]/noundefined'
to the load
array of the loader
block of your MathJax configuration, and add 'noundefined'
to the
packages
array of the tex
block.
window.MathJax = {
loader: {load: ['[tex]/noundefined']},
tex: {packages: {'[+]': ['noundefined']}}
};
physicsÂ¶
The physics extension implements much of the LaTeX physics package, which defines simple, yet flexible macros for typesetting equations via:
 Automatic bracing
 Vector notation
 Derivatives
 Dirac braket notation
 Matrix macros
 Additional trig functions and other convenient operators
 Flat fractions and other useful miscellaneous math macros
See the documentation for the LaTeX package for more information.
This package is not autoloaded, due to the fact that it redefines many
standard macros, so you must request it explicitly if you want to use
it. To load the physics extension, add '[tex]/physics'
to the
load
array of the loader
block of your MathJax configuration,
and add 'physics'
to the packages
array of the tex
block.
window.MathJax = {
loader: {load: ['[tex]/physics']},
tex: {packages: {'[+]': ['physics']}}
};
Alternatively, use \require{physics}
in a TeX expression to load it
dynamically from within the math on the page, if the require
package is loaded.
requireÂ¶
The require extension defines the nonstandard \require
macro
that allows you to load extensions from within a math expression in a
web page. For example:
\(\require{enclose} \enclose{circle}{x}\)
would load the enclose extension, making the following
\enclose
command available for use.
An extension only needs to be loaded once, and then it is available for all subsequent typeset expressions.
This extension is already loaded in all the components that
include the TeX input jax, other than input/texbase
. To load the
require extension explicitly (when using input/texbase
for
example), add '[tex]/require'
to the load
array of the
loader
block of your MathJax configuration, and add 'require'
to the packages
array of the tex
block.
window.MathJax = {
loader: {load: ['[tex]/require']},
tex: {packages: {'[+]': ['require']}}
};
tagFormatÂ¶
The tagFormat extension provides the ability to customize the format
of the equation tags and automatic equation numbers. You do this by
providing functions in the tagFormat
object of the tex
block
of your MathJax configuration. The functions you can provide are
listed in the TagFormat Options section.
For example,
MathJax = {
section: 1,
tex: {
tagFormat: {
number: (n) => MathJax.section + '.' + n,
id: (n) => 'eqnid' + n
}
}
};
arranges for automatic equation numbers to be of the form 1.n
, and
uses ids of the form eqnid1.n
as the id
attribute of the
tags within the web page. This example uses the modern function
notation (using =>
), but you could also use function (n) {return
...}
.
This extension is already loaded in all the components that
include the TeX input jax, other than input/texbase
. To load the
tagFormat extension explicitly (when using input/texbase
for
example), add '[tex]/tagFormat'
to the load
array of the
loader
block of your MathJax configuration, and add
'tagFormat'
to the packages
array of the tex
block.
window.MathJax = {
loader: {load: ['[tex]/tagFormat']},
tex: {packages: {'[+]': ['tagFormat']}}
};
unicodeÂ¶
The unicode extension implements a (nonstandard) \unicode{}
macro that allows arbitrary unicode code points to be entered in your
mathematics. You can specify the height and depth of the character
(the width is determined by the browser), and the default font from
which to take the character.
Examples:
\unicode{65} % the character 'A'
\unicode{x41} % the character 'A'
\unicode[.55,0.05]{x22D6} % lessthan with dot, with height .55em and depth 0.05em
\unicode[.55,0.05][Geramond]{x22D6} % same taken from Geramond font
\unicode[Garamond]{x22D6} % same, but with default height, depth of .8em,.2em
Once a size and font are provided for a given unicode point, they need
not be specified again in subsequent \unicode{}
calls for that
character.
The result of \unicode{...}
will have TeX class ORD (i.e., it
will act like a variable). Use \mathbin{...}
, \mathrel{...}
,
etc., to specify a different class.
Note that a font list can be given in the \unicode{}
macro. If
not is provided, MathJax will use its own fonts, if possible, and then
the default font list for unknown characters if not.
Note
In version 2, you could configure the default font to be used for
\unicode
characters if one wasnât given explicitly. This has
not been implemented in version 3.
This extension is loaded automatically when the autoload extension
is used. To load the unicode extension explicitly, add
'[tex]/unicode'
to the load
array of the loader
block of
your MathJax configuration, and add 'unicode'
to the packages
array of the tex
block.
window.MathJax = {
loader: {load: ['[tex]/unicode']},
tex: {packages: {'[+]': ['unicode']}}
};
Alternatively, use \require{unicode}
in a TeX expression to load it
dynamically from within the math on the page, if the require
extension is loaded.
verbÂ¶
The verb extension defines the \verb
LaTeX macro that typesets
its argument âverbatimâ (without further processing) in a monospaced
(typewriter) font. The first character after the \verb
command is
used as a delimiter for the argument, which is everything up to the
next copy of the delimiter character). E.g.
\verb\sqrt{x}
will typeset \sqrt{x}
as a literal string.
Note that, due to how MathJax locates math strings within the
document, the argument to \verb
must have balanced braces, so
\verb{
is not valid in a web page (use \mathtt{\{}
instead).
If you are passing TeX strings to MathJax.tex2svg()
or
MathJax.tex2chtml()
, however, braces donât have to be balanced. So
const html = MathJax.tex2chtml('\\verb{');
is valid.
This extension is loaded automatically when the autoload extension
is used. To load the verb extension explicitly (when using
input/texbase
for example), add '[tex]/verb'
to the
load
array of the loader
block of your MathJax configuration,
and add 'verb'
to the packages
array of the tex
block.
window.MathJax = {
loader: {load: ['[tex]/verb']},
tex: {packages: {'[+]': ['verb']}}
};
Alternatively, use \require{verb}
in a TeX expression to load it
dynamically from within the math on the page, if the require
extension is loaded.
These extensions have not yet been ported to version 3:
autoloadallÂ¶
The autoloadall extension has been replaced by the autoload extension, which is more easily configurable.
begingroupÂ¶
The begingroup extension has not yet been translated to version 3, so currently it is not available. It should be included in a future release of MathJax.
mediawikitexvcÂ¶
The mediawikitexvc extension predefines macros that match the behavior of the MediaWiki Math Extension.
This extension has not yet been translated to version 3, so currently it is not available. It should be included in a future release of MathJax.
See the A Custom Extension section for how to create your own TeX extension.
Supported TeX/LaTeX commandsÂ¶
This is a long list of the TeX macros supported by MathJax. If the macro is defined in an extension, the name of the extension follows the macro name. If the extension is in brackets, the extension will be loaded automatically when the macro or environment is first used.
More complete details about how to use these macros, with examples and explanations, is available at Carol Fisherâs TeX Commands Available in MathJax page.
In the following tables, the first column lists the macro (or
character, or environment), and the second column indicates which
package(s) defines the macro. If none is listed, then it is in the
base package. If the package name is in bold, then it is preloaded by
the components that include the TeX input jax (except for
input/texbase
, which only includes the base package). If the
package name is in italics, then the package is not autoloaded by
the autoload extension.
SymbolsÂ¶
& 

# 

% 

^ 

~ 

_ 

' 

â 

{ 

} 

\ (backslashspace) 

\_ 

\, 

\; 

\: 

\! 

\{ 

\} 

\\ 

\& 

\# 

\% 

\> 

\ 

\$ 
AÂ¶
\above 

\abovewithdelims 

\abs 
physics 
\absolutevalue 
physics 
\acomm 
physics 
\acos 
physics 
\acosecant 
physics 
\acosine 
physics 
\acot 
physics 
\acotangent 
physics 
\acsc 
physics 
\acute 

\admat 
physics 
\aleph 

\alpha 

\amalg 

\And 

\angle 

\anticommutator 
physics 
\antidiagonalmatrix 
physics 
\approx 

\approxeq 
ams 
\arccos 
base, physics 
\arccosecant 
physics 
\arccosine 
physics 
\arccot 
physics 
\arccotangent 
physics 
\arccsc 
physics 
\arcsec 
physics 
\arcsecant 
physics 
\arcsin 
base, physics 
\arcsine 
physics 
\arctan 
base, physics 
\arctangent 
physics 
\arg 

\array 

\Arrowvert 

\arrowvert 

\asec 
physics 
\asecant 
physics 
\asin 
physics 
\asine 
physics 
\ast 

\asymp 

\atan 
physics 
\atangent 
physics 
\atop 

\atopwithdelims 
BÂ¶
\backepsilon 
ams 
\backprime 
ams 
\backsim 
ams 
\backsimeq 
ams 
\backslash 

\bar 

\barwedge 
ams 
\Bbb 

\Bbbk 
ams 
\bbFont 

\bbox 
bbox 
\bcancel 
cancel 
\because 
ams 
\begin 

\beta 

\beth 
ams 
\between 
ams 
\bf 

\Big 

\big 

\bigcap 

\bigcirc 

\bigcup 

\Bigg 

\bigg 

\Biggl 

\biggl 

\Biggm 

\biggm 

\Biggr 

\biggr 

\Bigl 

\bigl 

\Bigm 

\bigm 

\bigodot 

\bigoplus 

\bigotimes 

\Bigr 

\bigr 

\bigsqcup 

\bigstar 
ams 
\bigtriangledown 

\bigtriangleup 

\biguplus 

\bigvee 

\bigwedge 

\binom 
ams 
\blacklozenge 
ams 
\blacksquare 
ams 
\blacktriangle 
ams 
\blacktriangledown 
ams 
\blacktriangleleft 
ams 
\blacktriangleright 
ams 
\bmod 

\bmqty 
physics 
\boldsymbol 
boldsymbol 
\bot 

\bowtie 

\Box 
ams 
\boxdot 
ams 
\boxed 
ams 
\boxminus 
ams 
\boxplus 
ams 
\boxtimes 
ams 
\Bqty 
physics 
\bqty 
physics 
\Bra 
braket 
\bra 
braket, physics 
\brace 

\bracevert 

\brack 

\Braket 
braket 
\braket 
braket, physics 
\breve 

\buildrel 

\bullet 

\Bumpeq 
ams 
\bumpeq 
ams 
CÂ¶
\cal 

\cancel 
cancel 
\cancelto 
cancel 
\Cap 
ams 
\cap 

\cases 

\cdot 

\cdotp 

\cdots 

\ce 
mhchem 
\centerdot 
ams 
\cfrac 
ams 
\check 

\checkmark 
ams 
\chi 

\choose 

\circ 

\circeq 
ams 
\circlearrowleft 
ams 
\circlearrowright 
ams 
\circledast 
ams 
\circledcirc 
ams 
\circleddash 
ams 
\circledR 
ams 
\circledS 
ams 
\class 
html 
\clubsuit 

\colon 

\color 
color, colorV2 
\colorbox 
color 
\comm 
physics 
\commutator 
physics 
\complement 
ams 
\cong 

\coprod 

\cos 
base, physics 
\cosecant 
physics 
\cosh 
base, physics 
\cosine 
physics 
\cot 
base, physics 
\cotangent 
physics 
\coth 
base, physics 
\cp 
physics 
\cr 

\cross 
physics 
\crossproduct 
physics 
\csc 
base, physics 
\csch 
physics 
\cssId 
html 
\Cup 
ams 
\cup 

\curl 
physics 
\curlyeqprec 
ams 
\curlyeqsucc 
ams 
\curlyvee 
ams 
\curlywedge 
ams 
\curvearrowleft 
ams 
\curvearrowright 
ams 
DÂ¶
\dagger 

\daleth 
ams 
\dashleftarrow 
ams 
\dashrightarrow 
ams 
\dashv 

\dbinom 
ams 
\dd 
physics 
\ddagger 

\ddddot 
ams 
\dddot 
ams 
\ddot 

\ddots 

\DeclareMathOperator 
ams 
\def 
newcommand 
\definecolor 
color 
\deg 

\Delta 

\delta 

\derivative 
physics 
\det 
base, physics 
\determinant 
physics 
\dfrac 
ams 
\diagdown 
ams 
\diagonalmatrix 
physics 
\diagup 
ams 
\Diamond 
ams 
\diamond 

\diamondsuit 

\differential 
physics 
\digamma 
ams 
\dim 

\displaylines 

\displaystyle 

\div 
base, physics 
\divergence 
physics 
\divideontimes 
ams 
\dmat 
physics 
\dot 

\Doteq 
ams 
\doteq 

\doteqdot 
ams 
\dotplus 
ams 
\dotproduct 
physics 
\dots 

\dotsb 

\dotsc 

\dotsi 

\dotsm 

\dotso 

\doublebarwedge 
ams 
\doublecap 
ams 
\doublecup 
ams 
\Downarrow 

\downarrow 

\downdownarrows 
ams 
\downharpoonleft 
ams 
\downharpoonright 
ams 
\dv 
physics 
\dyad 
physics 
EÂ¶
\ell 

\emptyset 

\enclose 
enclose 
\end 

\enspace 

\epsilon 

\eqalign 

\eqalignno 

\eqcirc 
ams 
\eqref 
ams 
\eqsim 
ams 
\eqslantgtr 
ams 
\eqslantless 
ams 
\equiv 

\erf 
physics 
\eta 

\eth 
ams 
\ev 
physics 
\eval 
physics 
\evaluated 
physics 
\exists 

\exp 
base, physics 
\expectationvalue 
physics 
\exponential 
physics 
\expval 
physics 
FÂ¶
\fallingdotseq 
ams 
\fbox 

\fcolorbox 
color 
\fderivative 
physics 
\fdv 
physics 
\Finv 
ams 
\flat 

\flatfrac 
physics 
\forall 

\frac 
ams, base 
\frak 

\frown 

\functionalderivative 
physics 
GÂ¶
\Game 
ams 
\Gamma 

\gamma 

\gcd 

\ge 

\genfrac 
ams 
\geq 

\geqq 
ams 
\geqslant 
ams 
\gets 

\gg 

\ggg 
ams 
\gggtr 
ams 
\gimel 
ams 
\gnapprox 
ams 
\gneq 
ams 
\gneqq 
ams 
\gnsim 
ams 
\grad 
physics 
\gradient 
physics 
\gradientnabla 
physics 
\grave 

\gt 

\gtrapprox 
ams 
\gtrdot 
ams 
\gtreqless 
ams 
\gtreqqless 
ams 
\gtrless 
ams 
\gtrsim 
ams 
\gvertneqq 
ams 
HÂ¶
\hat 

\hbar 

\hbox 

\hdashline 

\heartsuit 

\hfil 

\hfill 

\hfilll 

\hline 

\hom 

\hookleftarrow 

\hookrightarrow 

\hphantom 

\href 
html 
\hskip 

\hslash 
ams 
\hspace 

\Huge 

\huge 

\hypcosecant 
physics 
\hypcosine 
physics 
\hypcotangent 
physics 
\hypsecant 
physics 
\hypsine 
physics 
\hyptangent 
physics 
IÂ¶
\identitymatrix 
physics 
\idotsint 
ams 
\iff 

\iiiint 
ams 
\iiint 

\iint 

\Im 
base, physics 
\imaginary 
physics 
\imat 
physics 
\imath 

\impliedby 
ams 
\implies 
ams 
\in 

\inf 

\infty 

\injlim 
ams 
\innerproduct 
physics 
\int 

\intercal 
ams 
\intop 

\iota 

\it 
JÂ¶
\jmath 

\Join 
ams 
KÂ¶
\kappa 

\ker 

\kern 

\Ket 
braket 
\ket 
braket, physics 
\Ketbra 
braket 
\ketbra 
braket, physics 
LÂ¶
\label 

\Lambda 

\lambda 

\land 

\langle 

\laplacian 
physics 
\LARGE 

\Large 

\large 

\LaTeX 

\lbrace 

\lbrack 

\lceil 

\ldotp 

\ldots 

\le 

\leadsto 
ams 
\left 

\Leftarrow 

\leftarrow 

\leftarrowtail 
ams 
\leftharpoondown 

\leftharpoonup 

\leftleftarrows 
ams 
\Leftrightarrow 

\leftrightarrow 

\leftrightarrows 
ams 
\leftrightharpoons 
ams 
\leftrightsquigarrow 
ams 
\leftroot 

\leftthreetimes 
ams 
\leq 

\leqalignno 

\leqq 
ams 
\leqslant 
ams 
\lessapprox 
ams 
\lessdot 
ams 
\lesseqgtr 
ams 
\lesseqqgtr 
ams 
\lessgtr 
ams 
\lesssim 
ams 
\let 
newcommand 
\lfloor 

\lg 

\lgroup 

\lhd 
ams 
\lim 

\liminf 

\limits 

\limsup 

\ll 

\llap 

\llcorner 
ams 
\Lleftarrow 
ams 
\lll 
ams 
\llless 
ams 
\lmoustache 

\ln 
base, physics 
\lnapprox 
ams 
\lneq 
ams 
\lneqq 
ams 
\lnot 

\lnsim 
ams 
\log 
base, physics 
\logarithm 
physics 
\Longleftarrow 

\longleftarrow 

\Longleftrightarrow 

\longleftrightarrow 

\longleftrightarrows 
mhchem 
\longLeftrightharpoons 
mhchem 
\longmapsto 

\Longrightarrow 

\longrightarrow 

\longRightleftharpoons 
mhchem 
\longrightleftharpoons 
mhchem 
\looparrowleft 
ams 
\looparrowright 
ams 
\lor 

\lower 

\lozenge 
ams 
\lrcorner 
ams 
\Lsh 
ams 
\lt 

\ltimes 
ams 
\lVert 
ams 
\lvert 
ams 
\lvertneqq 
ams 
MÂ¶
\maltese 
ams 
\mapsto 

\mathbb 

\mathbf 

\mathbin 

\mathcal 

\mathchoice 

\mathclose 

\mathfrak 

\mathinner 

\mathit 

\mathop 

\mathopen 

\mathord 

\mathpunct 

\mathrel 

\mathring 
ams 
\mathrm 

\mathscr 

\mathsf 

\mathstrut 

\mathtip 
action 
\mathtt 

\matrix 

\matrixdeterminant 
physics 
\matrixel 
physics 
\matrixelement 
physics 
\matrixquantity 
physics 
\max 

\mbox 

\mdet 
physics 
\measuredangle 
ams 
\mel 
physics 
\mho 
ams 
\mid 

\middle 

\min 

\minCDarrowheight 
amsCd 
\minCDarrowwidth 
amsCd 
\mit 

\mkern 

\mmlToken 

\mod 

\models 

\moveleft 

\moveright 

\mp 

\mqty 
physics 
\mskip 

\mspace 

\mu 

\multimap 
ams 
NÂ¶
\nabla 

\natural 

\naturallogarithm 
physics 
\ncong 
ams 
\ne 

\nearrow 

\neg 

\negmedspace 
ams 
\negthickspace 
ams 
\negthinspace 

\neq 

\newcommand 
newcommand 
\newenvironment 
newcommand 
\Newextarrow 
extpfeil 
\newline 

\nexists 
ams 
\ngeq 
ams 
\ngeqq 
ams 
\ngeqslant 
ams 
\ngtr 
ams 
\ni 

\nLeftarrow 
ams 
\nleftarrow 
ams 
\nLeftrightarrow 
ams 
\nleftrightarrow 
ams 
\nleq 
ams 
\nleqq 
ams 
\nleqslant 
ams 
\nless 
ams 
\nmid 
ams 
\nobreakspace 
ams 
\nolimits 

\nonumber 

\norm 
physics 
\normalsize 

\not 

\notag 
ams 
\notChar 

\notin 

\nparallel 
ams 
\nprec 
ams 
\npreceq 
ams 
\nRightarrow 
ams 
\nrightarrow 
ams 
\nshortmid 
ams 
\nshortparallel 
ams 
\nsim 
ams 
\nsubseteq 
ams 
\nsubseteqq 
ams 
\nsucc 
ams 
\nsucceq 
ams 
\nsupseteq 
ams 
\nsupseteqq 
ams 
\ntriangleleft 
ams 
\ntrianglelefteq 
ams 
\ntriangleright 
ams 
\ntrianglerighteq 
ams 
\nu 

\nVDash 
ams 
\nVdash 
ams 
\nvDash 
ams 
\nvdash 
ams 
\nwarrow 
OÂ¶
\odot 

\oint 

\oldstyle 

\Omega 

\omega 

\omicron 

\ominus 

\op 
physics 
\operatorname 
ams 
\oplus 

\order 
physics 
\oslash 

\otimes 

\outerproduct 
physics 
\over 

\overbrace 

\overleftarrow 

\overleftrightarrow 

\overline 

\overparen 

\overrightarrow 

\overset 

\overwithdelims 

\owns 
PÂ¶
\parallel 

\partial 

\partialderivative 
physics 
\paulimatrix 
physics 
\pb 
physics 
\pderivative 
physics 
\pdv 
physics 
\perp 

\phantom 

\Phi 

\phi 

\Pi 

\pi 

\pitchfork 
ams 
\pm 

\pmat 
physics 
\pmatrix 

\pmb 

\pmod 

\Pmqty 
physics 
\pmqty 
physics 
\pod 

\poissonbracket 
physics 
\pqty 
physics 
\Pr 
base, physics 
\prec 

\precapprox 
ams 
\preccurlyeq 
ams 
\preceq 

\precnapprox 
ams 
\precneqq 
ams 
\precnsim 
ams 
\precsim 
ams 
\prime 

\principalvalue 
physics 
\Probability 
physics 
\prod 

\projlim 
ams 
\propto 

\Psi 

\psi 

\pu 
mhchem 
\PV 
physics 
\pv 
physics 
QÂ¶
\qall 
physics 
\qand 
physics 
\qas 
physics 
\qassume 
physics 
\qc 
physics 
\qcc 
physics 
\qcomma 
physics 
\qelse 
physics 
\qeven 
physics 
\qfor 
physics 
\qgiven 
physics 
\qif 
physics 
\qin 
physics 
\qinteger 
physics 
\qlet 
physics 
\qodd 
physics 
\qor 
physics 
\qotherwise 
physics 
\qq 
physics 
\qqtext 
physics 
\qquad 

\qsince, 
physics 
\qthen 
physics 
\qty 
physics 
\quad 

\quantity 
physics 
\qunless 
physics 
\qusing 
physics 
RÂ¶
\raise 

\rangle 

\rank 
physics 
\rbrace 

\rbrack 

\rceil 

\Re 
base, physics 
\real 
physics 
\ref 

\renewcommand 
newcommand 
\renewenvironment 
newcommand 
\require 
require 
\Res 
physics 
\restriction 
ams 
\rfloor 

\rgroup 

\rhd 
ams 
\rho 

\right 

\Rightarrow 

\rightarrow 

\rightarrowtail 
ams 
\rightharpoondown 

\rightharpoonup 

\rightleftarrows 
ams 
\rightleftharpoons 
ams, base 
\rightrightarrows 
ams 
\rightsquigarrow 
ams 
\rightthreetimes 
ams 
\risingdotseq 
ams 
\rlap 

\rm 

\rmoustache 

\root 

\Rrightarrow 
ams 
\Rsh 
ams 
\rtimes 
ams 
\Rule 

\rule 

\rVert 
ams 
\rvert 
ams 
SÂ¶
\S 

\sbmqty 
physics 
\scr 

\scriptscriptstyle 

\scriptsize 

\scriptstyle 

\searrow 

\sec 
base, physics 
\secant 
physics 
\sech 
physics 
\Set 
braket 
\set 
braket 
\setminus 

\sf 

\sharp 

\shortmid 
ams 
\shortparallel 
ams 
\shoveleft 
ams 
\shoveright 
ams 
\sideset 
ams 
\Sigma 

\sigma 

\sim 

\simeq 

\sin 
base, physics 
\sine 
physics 
\sinh 
base, physics 
\skew 

\SkipLimits 
ams 
\small 

\smallfrown 
ams 
\smallint 

\smallmatrixquantity 
physics 
\smallsetminus 
ams 
\smallsmile 
ams 
\smash 

\smdet 
physics 
\smile 

\smqty 
physics 
\Space 

\space 

\spadesuit 

\sphericalangle 
ams 
\sPmqty 
physics 
\spmqty 
physics 
\sqcap 

\sqcup 

\sqrt 

\sqsubset 
ams 
\sqsubseteq 

\sqsupset 
ams 
\sqsupseteq 

\square 
ams 
\stackrel 

\star 

\strut 

\style 
html 
\Subset 
ams 
\subset 

\subseteq 

\subseteqq 
ams 
\subsetneq 
ams 
\subsetneqq 
ams 
\substack 
ams 
\succ 

\succapprox 
ams 
\succcurlyeq 
ams 
\succeq 

\succnapprox 
ams 
\succneqq 
ams 
\succnsim 
ams 
\succsim 
ams 
\sum 

\sup 

\Supset 
ams 
\supset 

\supseteq 

\supseteqq 
ams 
\supsetneq 
ams 
\supsetneqq 
ams 
\surd 

\svmqty 
physics 
\swarrow 
TÂ¶
\tag 
ams 
\tan 
base, physics 
\tangent 
physics 
\tanh 
base, physics 
\tau 

\tbinom 
ams 
\TeX 

\text 

\textbf 

\textcolor 
color 
\textit 

\textrm 

\textsf 

\textstyle 

\texttip 
action 
\texttt 

\tfrac 
ams 
\therefore 
ams 
\Theta 

\theta 

\thickapprox 
ams 
\thicksim 
ams 
\thinspace 

\tilde 

\times 

\Tiny 

\tiny 

\to 

\toggle 
action 
\top 

\Tr 
physics 
\tr 
physics 
\Trace 
physics 
\trace 
physics 
\triangle 

\triangledown 
ams 
\triangleleft 

\trianglelefteq 
ams 
\triangleq 
ams 
\triangleright 

\trianglerighteq 
ams 
\tripledash 
mhchem 
\tt 

\twoheadleftarrow 
ams 
\twoheadrightarrow 
ams 
UÂ¶
\ulcorner 
ams 
\underbrace 

\underleftarrow 

\underleftrightarrow 

\underline 

\underparen 

\underrightarrow 

\underset 

\unicode 
unicode 
\unlhd 
ams 
\unrhd 
ams 
\Uparrow 

\uparrow 

\Updownarrow 

\updownarrow 

\upharpoonleft 
ams 
\upharpoonright 
ams 
\uplus 

\uproot 

\Upsilon 

\upsilon 

\upuparrows 
ams 
\urcorner 
ams 
VÂ¶
\va 
physics 
\var 
physics 
\varDelta 
ams 
\varepsilon 

\varGamma 
ams 
\variation 
physics 
\varinjlim 
ams 
\varkappa 
ams 
\varLambda 
ams 
\varliminf 
ams 
\varlimsup 
ams 
\varnothing 
ams 
\varOmega 
ams 
\varPhi 
ams 
\varphi 

\varPi 
ams 
\varpi 

\varprojlim 
ams 
\varpropto 
ams 
\varPsi 
ams 
\varrho 

\varSigma 
ams 
\varsigma 

\varsubsetneq 
ams 
\varsubsetneqq 
ams 
\varsupsetneq 
ams 
\varsupsetneqq 
ams 
\varTheta 
ams 
\vartheta 

\vartriangle 
ams 
\vartriangleleft 
ams 
\vartriangleright 
ams 
\varUpsilon 
ams 
\varXi 
ams 
\vb 
physics 
\vcenter 

\Vdash 
ams 
\vDash 
ams 
\vdash 

\vdot 
physics 
\vdots 

\vec 

\vectorarrow 
physics 
\vectorbold 
physics 
\vectorunit 
physics 
\vee 

\veebar 
ams 
\verb 
verb 
\Vert 

\vert 

\vmqty 
physics 
\vphantom 

\vqty 
physics 
\vu 
physics 
\Vvdash 
ams 
WÂ¶
\wedge 

\widehat 

\widetilde 

\wp 

\wr 
XÂ¶
\xcancel 
cancel 
\Xi 

\xi 

\xleftarrow 
ams, mhchem 
\xleftrightarrow 
mhchem 
\xLeftrightharpoons 
mhchem 
\xlongequal 
extpfeil 
\xmapsto 
extpfeil 
\xmat 
physics 
\xmatrix 
physics 
\xrightarrow 
ams, mhchem 
\xRightleftharpoons 
mhchem 
\xrightleftharpoons 
mhchem 
\xtofrom 
extpfeil 
\xtwoheadleftarrow 
extpfeil 
\xtwoheadrightarrow 
extpfeil 
YÂ¶
\yen 
ams 
ZÂ¶
\zeromatrix 
physics 
\zeta 

\zmat 
physics 
EnvironmentsÂ¶
LaTeX environments of the form \begin{NAME} ... \end{NAME}
are
provided where NAME
is one of the following:
align 
ams 
align* 
ams 
alignat 
ams 
alignat* 
ams 
aligned 
ams 
alignedat 
ams 
array 

Bmatrix 
ams 
bmatrix 
ams 
cases 
ams 
CD 
amsCd 
eqnarray 

eqnarray* 
ams 
equation 

equation* 

gather 
ams 
gather* 
ams 
gathered 
ams 
matrix 
ams 
multline 
ams 
multline* 
ams 
pmatrix 
ams 
smallmatrix 
ams, physics 
split 
ams 
subarray 
ams 
Vmatrix 
ams 
vmatrix 
ams 
MathML SupportÂ¶
The support for MathML in MathJax involves two functions: the first
looks for <math>
tags within your document and marks them for
later processing by MathJax, and the second converts the MathML to the
internal format used by MathJax, where one of MathJaxâs output
processors then displays it in the web page.
In addition, MathJaxâs internal format is essentially MathML (with a few additions), implemented as javascript objects rather than DOM elements. MathJaxâs various input processors all convert their original format into this internal MathML format, and its output processors take this MathML and produce the proper output from it. Because the internal format is MathMLbased, MathJax provides the ability to convert to and from MathML notation.
Although some browsers have native support for rendering MathML, not all do, and so MathJax makes it possible to view MathML notation in all browsers. Even for those that do support MathML, it may be valuable to use MathJax, since that will produce consistent output across all browsers, and MathJax implements features and functionality that is not available in some native MathML implementations.
MathML in HTML pagesÂ¶
For MathML that is handled via the preprocessor, you should not use
named MathML entities, but rather use numeric entities like
√
or unicode characters embedded in the page itself. The
reason is that entities are replaced by the browser before MathJax
runs, and some browsers report errors for unknown entities. For
browsers that are not MathMLaware, that will cause errors to be
displayed for the MathML entities. While that might not occur in the
browser you are using to compose your pages, it can happen with other
browsers, so you should avoid the named entities whenever possible.
If you must use named entities, you may need to declare them in the
DOCTYPE declaration by hand.
When you use MathML in an HTML document rather than an XHTML one (MathJax will work with both), you should not use the âselfclosingâ form for MathML tags with no content, but should use separate open and close tags. That is, use
<mspace width="thinmathspace"></mspace>
rather than <mspace width="thinmathspace" />
. This is because
HTML does not have selfclosing tags, and some browsers will get the
nesting of tags wrong if you attempt to use them. For example, with
<mspace width="1em" />
, since there is no closing tag, the rest of
the mathematics will become the content of the <mspace>
tag; but
since <mspace>
should have no content, the rest of the mathematics
will not be displayed. This is a common error that should be avoided.
Modern browsers that support HTML5 should be able to handle
selfclosing tags, but older browsers have problems with them, so if
you want your mathematics to be visible to the widest audience, do not
use the selfclosing form in HTML documents.
Supported MathML tagsÂ¶
MathJax supports the MathML3.0 mathematics tags, with some limitations. The MathML support is still under active development, so some tags are not yet implemented, and some features are not fully developed, but are coming.
The deficiencies include:
 No support for alignment groups in tables.
 Not all attributes are supported for tables. E.g.,
columnspan
androwspan
are not implemented yet.  Experimental support for the elementary math tags:
mstack
,mlongdiv
,msgroup
,msrow
,mscarries
, andmscarry
(via themml3
extension, see below).  Experimental support for bidirectional mathematics (via the
mml3
extension, see below).
See the results of the MathML3.0 test suite for details.
Content MathMLÂ¶
The version 2 contentmathml
extension is not yet available in
version 3.
Experimental mml3 extensionÂ¶
The version 2 mml3
extension is not yet available in version 3.
Semantics and AnnotationsÂ¶
Some popular annotation formats like TeX, Maple, or Content MathML are
often included in the MathML source via the semantics
element.
This is particularly true of MathML that is generated by other
software, such as editors or computational tools.
MathJax provides access to these annotations through the "Show Math
As"
menu, via the Annotations
submenu. See the MathML Annotation Framework and
the Contextual Menu Options documentation for details.
AsciiMath SupportÂ¶
The support for AsciiMath in MathJax involves two functions: the first
looks for mathematics within your web page (indicated by delimiters
like `...`
) and marks the mathematics for later processing by
MathJax, and the second is what converts the AsciiMath notation into
MathJaxâs internal format, where one of MathJaxâs output processors
then displays it in the web page. In MathJax version 2, these were
separated into distinct components (the asciimath2jax
preprocessor
and the AsciiMath input jax), but in version 3, the asciimath2jax
functions have been folded into the AsciiMath input jax.
The AsciiMath input jax actually includes a copy of ASCIIMathML.js
itself (see the AsciiMath home page for
details). This means that the results of MathJaxâs AsciiMath
processing should be the same as using the actual ASCIIMathML.js
package (at least as far as the MathML that it generates is
concerned). Thanks go to David Lippman for writing the initial
version of the AsciiMath preprocessor and input jax and for the
ongoing improvements from the AsciiMath community.
The AsciiMath input jax handles only the original ASCIIMathML notation (from ASCIIMathML v1.4.7), not the extended LaTeXMathML notation added in version 2.0 of ASCIIMathML, though the AsciiMath input jax does expose the tables that define the symbols that AsciiMath processes, and so it would be possible to extend them to include additional symbols. In general, it is probably better to use MathJaxâs TeX input jax to handle LaTeX notation.
AsciiMath can be configured to look for whatever markers you want to use for your math delimiters. See the AsciiMath configuration options section for details on how to customize the action of the AsciiMath input jax.
Loading the AsciiMath ComponentÂ¶
The AsciiMath input jax has not yet been fully ported to version 3. Instead, the AsciiMath component uses the version 2 AsciiMath input jax together with some of the legacy version 2 code patched into the version 3 framework. This is less efficient, and somewhat larger, than a pure version3 solution would be, and it can complicate the configuration process. A full version3 port of AsciiMath is planned for a future release.
Because AsciiMath hasnât been fully ported to version 3, none of the
combined components include it. So in order to use AsciiMath
notation, you will need to configure MathJax to load it yourself by
adding input/asciimath
to the load
array in the loader
block of your MathJax configuration. For example,
<script>
MathJax = {
loader: {load: ['input/asciimath', 'output/chtml', 'ui/menu']},
};
</script>
<script type="text/javascript" id="MathJaxscript" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/startup.js">
</script>
would load the AsciiMath input jax, the CommonHTML output jax, and the contextual menu component.
AsciiMath delimitersÂ¶
By default, the AsciiMath processor defines the backtick
(`
) as the delimiters for mathematics in AsciiMath format. It
does not define $...$
as math delimiters. That is because
dollar signs appear too often in nonmathematical settings, which
could cause some text to be treated as mathematics unexpectedly. For
example, with singledollar delimiters, ââŠ the cost is $2.50 for the
first one, and $2.00 for each additional one âŠâ would cause the
phrase â2.50 for the first one, andâ to be treated as mathematics
since it falls between dollar signs. For this reason, if you want to
use singledollars for AsciiMath notation, you must enable that
explicitly in your configuration:
window.MathJax = {
loader: {
load: ['input/asciimath']
},
asciimath: {
delimiters: [['$','$'], ['`','`']]
}
});
Note that the dollar signs are frequently used as a delimiter for mathematics in the TeX format, and you can not enable the dollarsign delimiter for both. It is probably best to leave dollar signs for TeX notation.
See the AsciiMath Input Processor Options page, for additional configuration parameters that you can specify for the AsciiMath input processor.
AsciiMath in HTML documentsÂ¶
The AsciiMath syntax is described in the ASCIIMathML syntax page.
Keep in mind that your mathematics is part of an HTML document, so you
need to be aware of the special characters used by HTML as part of its
markup. There cannot be HTML tags within the math delimiters (other
than <br>
, <wbr>
, and HTML comments) as AsciiMathformatted
math does not include HTML tags. Also, since the mathematics is
initially given as text in the page, you need to be careful that your
mathematics doesnât look like HTML tags to the browser, which parses
the page before MathJax gets to see it. In particular, that means
that you have to be careful about things like lessthan and
greaterthan signs (<
and >
), and ampersands (&
), which
have special meaning to web browsers. For example,
... when `x<y` we have ...
will cause a problem, because the browser will think <y
is the
beginning of a tag named y
(even though there is no such tag in
HTML). When this happens, the browser will think the tag continues up
to the next >
in the document (typically the end of the next
actual tag in the HTML file), and you may notice that you are missing
part of the text of the document. In the example above, the â<y
â
and âwe have ...
â will not be displayed because the browser thinks
it is part of the tag starting at <y
. This is one indication you
can use to spot this problem; it is a common error and should be
avoided.
Usually, it is sufficient simply to put spaces around these symbols to cause the browser to avoid them, so
... when `x < y` we have ...
should work. Alternatively, you can use the HTML entities <
,
>
and &
to encode these characters so that the browser
will not interpret them, but MathJax will. E.g.,
... when `x < y` we have ...
Keep in mind that the browser interprets your text before MathJax does.
MathJax Output FormatsÂ¶
Currently, MathJax can render math in three ways:
 Using HTML and CSS to lay out the mathematics,
 Using Scalable Vector Graphics (SVG) to lay out the mathematics, or
 As a serialized MathML string.
The first two are implemented by the CommonHTML
and SVG
output
processors. The third is a consequence of the fact that MathJax uses
MathML as its internal format. While MathJax version 2 included a
NativeMML
output processor that produced MathML notation for those
browsers that support it, this has been dropped from version 3. See
the MathML Support section for more information on how to get
MathML output.
If you are using one of the combined component files, then this will
select one of these output processors for you. If the component file
ends in chtml
, then it is the CommonHTML output processor, while
if it ends in svg
then the SVG output processor will be used.
If you are performing your own inline or filebased configuration,
you select which one you want to use by including either
'output/chtml'
or 'output/svg'
in the load
array of the
loader
section of your MathJax configuration. For example
window.MathJax = {
loader: {load: ["input/tex", "output/ctml"]}
};
would specify TeX input and CommonHTML output for the mathematics in your document.
Warning
The PreviewHTML
, PlainSource
, and NativeMML
output
formats from version 2 are not available in version 3. These may
be available in future releases if there is demand for them.
Also, the AssistiveMML
extension has not been ported to version
3, and is unlikely to be in the future. Support for assistive
technology is provided through the assistive explorer, available in
the contextual menu.
HTML SupportÂ¶
The CommonHTML output processor renders your mathematics using HTML
with CSS styling. It produces highquality output in all modern
browsers, with results that are consistent across browsers and
operating systems. This is MathJaxâs primary output mode since
MathJax version 2.6. Its major advantage is its quality, consistency,
and the fact that its output is independent of the browser, operating
system, and user environment. This means you can preprocess
mathematics on a server, without needing to know the browser, what
fonts are available, and so on. (In version 2, both the HTMLCSS
and NativeMML
processors produced different output for different
browsers and user environments.)
The CommonHTML output uses webbased fonts so that users donât have to have math fonts installed on their computers, but will use locally installed ones if they are available. It currently only supports MathJaxâs default TeX fonts (see the MathJax Font Support section for more information).
See CommonHTML Output Processor Options for information about the options that control the CommonHTML output.
SVG SupportÂ¶
The SVG
output processor uses Scalable Vector Graphics to render
the mathematics on the page. SVG is supported in all the major
browsers and most mobile devices; note, however, that Internet
Explorer prior to IE9 does not support SVG (MathJax version 3 doesnât
support these in any case), and IE9 only does in âIE9 standards modeâ,
not its emulation modes for earlier versions. The SVG output mode is
high quality, and displays and prints well in all browsers. Since it
uses SVG data instead of font files, it is not affected by userbased
webfont blocking, or other character placement issues that sometimes
occur with the HTMLbased output.
One advantage to the SVG output is that it is relatively selfcontained (it does not relay heavily on CSS, though it does use some in certain circumstances), so it can be saved and used as an independent image. One disadvantage of this mode is that its variablewidth tables become fixed size once they are typeset, and donât rescale if the window size changes (for example).
In version 2, equation tags and numbers where produced using a fixed width as well, so the equation number would not change with changes in window size. In version 3, however, equation numbers now are based on the container size, and move with changes in its size, just as they do with CommonHTML output.
Finally, because mathematical characters in SVG output are produced by SVG paths, not characters in a font, they canât be copy and pasted, as the output of the CommonHTML processor can.
See SVG Output Processor Options for information about the options that control the SVG output.
MathML SupportÂ¶
MathJax uses MathML as the basis for its internal format for
mathematical expressions, so MathML support is built into MathJax at a
fundamental level. There is a MathML input jax
for converting from MathML elements into the internal format
(javascript objects representing the MathML elements), and there is a
mechanism that can convert the internal format into a serialized
MathML string provided by MathJax.startup.toMML()
(if you are
using MathJax components).
While MathJax version 2 included a NativeMML output jax for producing MathML output in the web page, because MathML is not available in the Chrome, Edge, and IE browsers, because the MathML support in Safari and Firefox donât include all the features needed by MathJax (e.g., the <mlabeledtr> element needed for labeled equations), and because the quality of the results in Safari and Firefox are not always comparable to the output from MathJax, the NativeMML output jax is no longer provided in MathJax version 3.
You can, however, use MathJaxâs MathML serialization features to implement your own native MathML output if you wish. Here is one example that does so for TeX input to MathML output.
<style>
mjxcontainer[display="block"] {
display: block;
margin: 1em 0;
}
</style>
<script>
MathJax = {
//
// Load only TeX input and the contextual menu
//
loader: {load: ['input/tex', 'ui/menu']},
//
// When page is ready, render the math in the document
//
startup: {pageReady: () => MathJax.startup.document.render()},
//
// Override the usual typeset render action with one that generates MathML output
//
options: {
renderActions: {
typeset: [150,
//
// The function for rendering a document's math elements
//
(doc) => {
const toMML = MathJax.startup.toMML;
for (math of doc.math) {
math.typesetRoot = document.createElement('mjxcontainer');
math.typesetRoot.innerHTML = toMML(math.root);
math.display && math.typesetRoot.setAttribute('display', 'block');
}
},
//
// The function for rendering a single math expression
//
(math, doc) => {
math.typesetRoot = document.createElement('mjxcontainer');
math.typesetRoot.innerHTML = MathJax.startup.toMML(math.root);
math.display && math.typesetRoot.setAttribute('display', 'block');
}
]
}
}
};
</script>
<script type="text/javascript" id="MathJaxscript" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/startup.js">
</script>
This example uses the startup component to load just
the input/tex and contextual menu components, and defines a new render action that
replaces the standard typeset
action with one that creates a
MathJax container element and stores it in math.typesetRoot
,
then converts the internal format to a MathML string (via
MathJax.startup.toMML()
) and has the browser parse that into
DOM element (via innerHTML
). A later render action will move
the container and its MathML contents into the DOM at the proper
location. For math that is in display style, the container is marked
with an attribute so that CSS can be used to make the container be a
blocklevel element with some top and bottom margin.
Note
MathJaxâs version 2 NativeMML output processor worked around various limitations of Firefox/Gecko and Safari/WebKit (e.g., to provide support for equation labels), but this approach does not, as it just uses the generic MathML.
MathJax version 2 also included an AssistiveMML extension that would insert hidden MathML that could be read by screen readers. This is no longer part of MathJax version 3. You can, however, implement your own version of this, as in the example below:
<style>
/*
* The MathML will be hidden from view for visual users, but available to
* assistive technology, like screen readers.
*/
mjxassistivemml {
position: absolute !important;
top: 0px; left: 0px;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0px 0px 0px !important;
border: 0px !important;
display: block !important;
width: auto !important;
overflow: hidden !important;
/*
* Don't allow the assistive MathML become part of the selection
*/
webkittouchcallout: none;
webkituserselect: none;
khtmluserselect: none;
mozuserselect: none;
msuserselect: none;
userselect: none;
}
mjxassistivemml[display="block"] {
width: 100% !important
}
</style>
<script>
function addAssistiveMML(math, doc) {
const adaptor = doc.adaptor;
//
// Get the serialized MathML
//
const mml = MathJax.startup.toMML(math.root).replace(/\n */g, '').replace(/<!.*?>/g, '');
//
// Parse is as HTML and retrieve the <math> element
//
const mmlNodes = adaptor.firstChild(adaptor.body(adaptor.parse(mml, 'text/html')));
//
// Create a container for the hidden MathML
//
const node = adaptor.node('mjxassistivemml', {
role: 'presentation', unselectable: 'on', display: (math.display ? 'block' : 'inline')
}, [mmlNodes]);
//
// Hide the typeset math from assistive technology and append the MathML that is visually
// hidden from other users
//
adaptor.setAttribute(math.typesetRoot, 'role', 'presentation');
adaptor.setAttribute(adaptor.firstChild(math.typesetRoot), 'ariahidden', 'true');
adaptor.setStyle(math.typesetRoot, 'position', 'relative');
adaptor.append(math.typesetRoot, node);
}
MathJax = {
//
// Use dollar signs for inline delimiters in addition to the usual ones
//
tex: {inlineMath: {'[+]': [['$', '$']]}},
//
// Add a render action for adding the assistive MathML
//
options: {
renderActions: {
assistiveMML: [155, (doc) => {for (math of doc.math) addAssistiveMML(math, doc)}, addAssistiveMML]
}
}
};
</script>
<script type="text/javascript" id="MathJaxscript" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/texchtml.js">
This example creates a function that adds the assistive MathML to a math expression, and creates a new render action that causes the function to be called as part of the MathJax rendering process.
Automatic Line BreakingÂ¶
Automatic line breaking has not yet been implemented in MathJax version 3, but is high on our list for inclusion in a future release.
MathJax Font SupportÂ¶
MathJax version 3 currently supports only one font, the MathJax TeX font. Version 2 provides the following fonts:
 MathJax TeX (default)
 STIX General
 Asana Math
 Neo Euler
 Gyre Pagella
 Gyre Termes
 Latin Modern
MathJax contains customized webfont versions of these fonts. In particular, these customized versions are split over several files to minimize the page load.
MathJax 3 will support these fonts in a future version.
Use of Other FontsÂ¶
In version 2 of MathJax, it was difficult to adjust the fonts in use (once loaded), or to replace individual or collections of characters being used. For example, switching the variables and function names to use a sansserif font rather than the standard serifed font is quite difficult in version 2. The structure of the font data in version 3 has been completely redesigned to help make such changes easier to make.
Since browsers do not provide APIs to access font metrics, MathJax has to ship with the necessary font data; this font data is generated during development and cannot be determined easily on the fly. The tools for creating the data needed by MathJax have not yet been created for version 3 (the data for the MatahJax TeX font was converted from the version 2 format by hand). These tools are high on the list for inclusion in the next version of MathJax, which should provide the additional fonts missing from the initial release of version 3. At that point, the details of how to mixandmatch font characters, and how to create the data files for your own fonts for use in MathJax, will be provided.
Character fallbacksÂ¶
No font contains a suitable glyph for every character specified in the Unicode standard. When MathJax encounters a character that isnât in the font that it is using, it will fall back to other fonts in a variety of ways.
First, MathJax enhances Unicode coverage of its default TeX fonts,
e.g., combining two double integrals U+222C
when a quadruple
integral U+2A0C
is used. However, this cannot create every
character specified in Unicode. Next, MathJax will run through a
fallback chain within the configured fonts (e.g., upright Greek will
be substituted with italic Greek).
Finally, when all else fails, MathJax will ask the browser to provide the glyph from a system font. Since in that final case, MathJax will not have the necessary data on the glyphâs bounding box, MathJax will guess these metrics. When run in a browser, MathJax will be able to determine the characterâs width, but not its height and depth, so it will use default values these metrics. Measuring the width can negatively affect the rendering speed, and guessing the height and depth can reduce the quality of the resulting output. When used on a server or in a commandline application, MathJax wonât even be able to determine the width, and that has an even more serous consequences for the layout, in general. Thus it is best to use only the characters that are in the MathJax fonts when using serverside rendering.
Browser CompatibilityÂ¶
Extensive browser support is an important goal for MathJax; at the same time, MathJax does require a certain minimum level of browser functionality. While MathJax version 2 went to great lengths to remain compatible with early versions of most browsers (even back to IE6), MathJax version 3 relies on more modern browser features, and so older browsers are no longer supported.
The CommonHTML and SVG output supports all modern browsers (Chrome, Safari, Firefox, Edge), and most mobile browsers. Include the polyfill library in order to support earlier browser versions (see their browser support page for details). In particular, to allow MathJax version 3 to work with IE11, include the line
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
before the script that loads MathJax.
Please file issues on GitHub if you notice inaccuracies or problems. It may help to add a screenshot; we suggest services such as browsershots.org, saucelabs.com, or browserstack.com for obtaining them.
Viewport meta tagÂ¶
The viewport meta tag provides the browser with instructions regarding viewports and zooming. This way, web developers can control how a webpage is displayed on a mobile device.
Incorrect or missing viewport information can confuse MathJaxâs layout process, leading to very small font sizes. We recommend that you use standard values such as the following:
<meta name="viewport" content="width=devicewidth, initialscale=1">
Internet Explorer Emulation modesÂ¶
Internet Explorer provides socalled emulation modes for backward compatibility to its legacy versions. These emulation modes have been deprecated since Internet Explorer 11, cf. Microsoft documentation.
MathJax is fastest when in the standards mode of each IE version, so it is best to force the highest mode possible. That can be accomplished by adding
<meta httpequiv="XUACompatible" content="IE=edge">
at the top of the <head>
section of your HTML documents.
Note
This line must come at the beginning of the <head>
, before
any stylesheets, scripts, or other content are loaded.
Note that versions of IE prior to 11 are no longer supported in MathJax version 3.
Configuring MathJaxÂ¶
The various components of MathJax, including its input and output
processors, its extensions, and the MathJax core,
all can be configured though a MathJax
global object that
specifies the configuration you want to use. The MathJax
object consists of subobjects that configure the individual
components of MathJax. For example, the input/tex
component is configured through a tex
block within the
MathJax
object, while the startup component
is configured through the startup
block.
These blocks are javascript objects that includes name: value
pairs giving the names of parameters and their values, with pairs
separated by commas. Be careful not to include a comma after the last
value, however, as some browsers will fail to process the
configuration if you do.
Some blocks may contain further subblocks. For example, the tex
block can have a macros
subblock that predefines macros, and a
tagFormat
block (when the tagFormat component is used)
to define how equation tags are displayed and handled.
For example,
window.MathJax = {
loader: {
load: ['[tex]/tagFormat']
},
startup: {
pageReady: () => {
alert('Running MathJax')l;
return MathJax.startup.defaultPageReady();
}
},
tex: {
packages: {'[+]': ['tagFormat']},
tagSide: 'left',
macros: {
RR: '{\\bf R}',
bold: ['{\\bf #1}',1]
},
tagFormat: {
tag: (n) => '[' + n + ']'
}
}
};
is a configuration that asks for the tagFormat extension to
be loaded, sets up the startup component to have a
function that it runs when the page (and MathJax) are ready (the
function issues an alert and then does the usual pageReady()
function, which typesets the page), configures the TeX input component to use the tagFormat extension, asks for
displayed equations to be typeset to the left (rather than centered),
defines two macros, and finally set the tagging so that it uses square
brackets rather than parentheses for equation numbers and tags.
Note the special notation used with the packages
option above.
The packages
property is an array of extension names, but the
configuration uses a special object to add to that array rather than
replace it. If the option you are setting is an array, and you
provide an object that has a single properly whose name is '[+]'
and whose value is an array, then that array will be appended to the
default value for the option you are setting. So in the example
above, the 'tagFormat'
string is added to the default packages
array (without your needing to know what that default value is).
Similarly, if you use an object with a single property whose name is
'[]'
and whose value is an array, the elements in that array are
removed from the default value of the option you are setting. For
example,
packages: {'[]': ['autoload', 'require']}
would remove the autoload and require packages from the default
packages
array.
Finally, you can combine '[+]'
and '[]'
in one object to do
both actions. E.g.,
packages: {'[+]': ['enclose'], '[]': ['autoload', 'require']}
would remove the autoload and require packages from the default
packages
array, and add enclose to the result.
In the links below, the various options are first listed with their default values as a complete configuration block, and then each option is explained further below that.
Input Processor OptionsÂ¶
TeX Input Processor OptionsÂ¶
The options below control the operation of the TeX input
processor that is run when you include 'input/tex'
,
'input/texfull'
, or 'input/texbase'
in the load
array of
the loader
block of your MathJax configuration, or if you load a
combined component that includes the TeX input jax. They are listed
with their default values. To set any of these options, include a
tex
section in your MathJax
global object.
The Configuration BlockÂ¶
MathJax = {
tex: {
packages: ['base'], // extensions to use
inlineMath: [ // start/end delimiter pairs for inline math
['\\(', '\\)']
],
displayMath: [ // start/end delimiter pairs for display math
['$$', '$$'],
['\\[', '\\]']
],
processEscapes: true, // use \$ to produce a literal dollar sign
processEnvironments: true, // process \begin{xxx}...\end{xxx} outside math mode
processRefs: true, // process \ref{...} outside of math mode
skipHtmlTags: [ // HTML tags that won't be searched for math
'script', 'noscript', 'style', 'textarea', 'pre',
'code', 'annotation', 'annotationxml'
],
includeHtmlTags: { // HTML tags that can appear within math
br: '\n', wbr: '', '#comment': ''
},
ignoreHtmlClass: 'tex2jax_ignore', // class that marks tags not to search
processHtmlClass: 'tex2jax_process', // class that marks tags that should be searched
digits: /^(?:[09]+(?:\{,\}[09]{3})*(?:\.[09]*)?\.[09]+)/,
// pattern for recognizing numbers
tags: 'none', // or 'ams' or 'all'
tagSide: 'right', // side for \tag macros
tagIndent: '0.8em', // amount to indent tags
useLabelIds: true, // use label name rather than tag for ids
multlineWidth: '85%', // width of multline environment
maxMacros: 1000, // maximum number of macro substitutions per expression
maxBuffer: 5 * 1024, // maximum size for the internal TeX string (5K)
baseURL: // URL for use with links to tags (when there is a <base> tag in effect)
(document.getElementsByTagName('base').length === 0) ?
'' : String(document.location).replace(/#.*$/, ''))
}
};
Note that some extensions make additional options available. See the TeX Extension Options section below for details.
Option DescriptionsÂ¶

packages: ['base']
This array lists the names of the packages that should be initialized by the TeX input processor. The input/tex and input/texfull components automatically add to this list the packages that they load. If you explicitly load addition tex extensions, you should add them to this list. For example:
MathJax = { loader: {load: ['[tex]/enclose']}, tex: { packages: {'[+]': ['enclose']} } };

inlineMath: [['\(','\)']]
This is an array of pairs of strings that are to be used as inline math delimiters. The first in each pair is the initial delimiter and the second is the terminal delimiter. You can have as many pairs as you want. For example,
inlineMath: [ ['$','$'], ['\\(','\\)'] ]
would cause MathJax to look for
$...$
and\(...\)
as delimiters for inline mathematics. (Note that the single dollar signs are not enabled by default because they are used too frequently in normal text, so if you want to use them for math delimiters, you must specify them explicitly.)Note that the delimiters canât look like HTML tags (i.e., canât include the lessthan sign), as these would be turned into tags by the browser before MathJax has the chance to run. You can only include text, not tags, as your math delimiters.

displayMath: [ ['$$','$$'], ['\[','\]'] ]
This is an array of pairs of strings that are to be used as delimiters for displayed equations. The first in each pair is the initial delimiter and the second is the terminal delimiter. You can have as many pairs as you want.
Note that the delimiters canât look like HTML tags (i.e., canât include the lessthan sign), as these would be turned into tags by the browser before MathJax has the chance to run. You can only include text, not tags, as your math delimiters.

processEscapes: false
When set to
true
, you may use\$
to represent a literal dollar sign, rather than using it as a math delimiter. Whenfalse
,\$
will not be altered, and its dollar sign may be considered part of a math delimiter. Typically this is set totrue
if you enable the$ ... $
inline delimiters, so you can type\$
and MathJax will convert it to a regular dollar sign in the rendered document.

processRefs: true
When set to
true
, MathJax will process\ref{...}
outside of math mode.

processEnvironments: true
When
true
, tex2jax looks not only for the inline and display math delimiters, but also for LaTeX environments (\begin{something}...\end{something}
) and marks them for processing by MathJax. Whenfalse
, LaTeX environments will not be processed outside of math mode.

digits: /^(?:[09]+(?:{,}[09]{3})*(?:.[09]*)?.[09]+)/
This gives a regular expression that is used to identify numbers during the parsing of your TeX expressions. By default, the decimal point is
.
and you can use{,}
between every three digits before that. If you want to use{,}
as the decimal indicator, useMathJax = { tex: { digits: /^(?:[09]+(?:\{,\}[09]*)?\{,\}[09]+)/ } };

tags: 'none'
This controls whether equations are numbered and how. By default it is set to
'none'
to be compatible with earlier versions of MathJax where autonumbering was not performed (so pages will not change their appearance). You can change this to'ams'
for equations numbered as the AMSmath package would do, or'all'
to get an equation number for every displayed equation.

tagSide: 'right'
This specifies the side on which
\tag{}
macros will place the tags, and on which automatic equation numbers will appear. Set it to'left'
to place the tags on the lefthand side.

tagIndent: "0.8em"
This is the amount of indentation (from the right or left) for the tags produced by the
\tag{}
macro or by automatic equation numbers.

useLabelIds: true
This controls whether element IDs for tags use the
\label
name or the equation number. Whentrue
, use the label, whenfalse
, use the equation number.

multlineWidth: "85%"
The width to use for the multline environment that is part of the ams extension. This width gives room for tags at either side of the equation, but if you are displaying mathematics in a small area or a thin column of text, you might need to change the value to leave sufficient margin for tags.

maxMacros: 10000
Because a definition of the form
\def\x{\x} \x
would cause MathJax to loop infinitely, themaxMacros
constant will limit the number of macro substitutions allowed in any expression processed by MathJax.

maxBuffer: 5 * 1024
Because a definition of the form
\def\x{\x aaa} \x
would loop infinitely, and at the same time stack up lots of aâs in MathJaxâs equation buffer, themaxBuffer
constant is used to limit the size of the string being processed by MathJax. It is set to 5KB, which should be sufficient for any reasonable equation.

baseURL: (document.getElementsByTagName('base').length === 0) ?

'' : String(document.location).replace(/#.*$/, ''))
This is the base URL to use when creating links to tagged equations (via
\ref{}
or\eqref{}
) when there is a<base>
element in the document that would affect those links. You can set this value by hand if MathJax doesnât produce the correct link.
The remaining options are described in the Options Common to All Input Processors section.
Developer OptionsÂ¶
In addition to the options listed above, lowlevel options intended for developers include the following:

FindTeX: null
The
FindTeX
object instance that will override the default one. This allows you to create a subclass ofFindTeX
and pass that to the TeX input jax. Anull
value means use the defaultFindTeX
class and make a new instance of that.
TeX Extension OptionsÂ¶
Several of the TeX extensions make additional options available in the
tex
block of your MathJax configuration. These are described
below. Note that the input/tex component, and the
combined components that load the TeX input jax, include a number of
these extensions automatically, so some these options will be
available by default.
ConfigMacros OptionsÂ¶
The configMacros extension adds a macros
option to the
tex
block that lets you predefine macros.

macros: {}
This lists macros to define before the TeX input processor begins. These are name: value pairs where the name gives the name of the TeX macro to be defined, and value gives the replacement text for the macro. The value can be a simple replacement string, or an array of the form [value, n], where value is the replacement text and n is the number of parameters for the macro. The array can have a third entry: either a string that is the default value to give for an optional (bracketed) parameter when the macro is used, or an array consisting of template strings that are used to separate the various parameters. The first template must precede the first parameter, the second must precede the second, and so on until the final which must end the last parameter to the macro. See the examples below.
Note that since the value is a javascript string, backslashes in the replacement text must be doubled to prevent them from acting as javascript escape characters.
For example,
macros: { RR: '{\\bf R}', // a simple string replacement bold: ['\\boldsymbol{#1}',1] , // this macro has one parameter ddx: ['\\frac{d#2}{d#1}', 2, 'x'], // this macro has an optional parameter that defaults to 'x' abc: ['(#1)', 1, [null, '\\cba']] // equivalent to \def\abc#1\cba{(#1)} }
would ask the TeX processor to define four new macros:
\RR
, which produces a boldface âRâ, and\bold{...}
, which takes one parameter and sets it in the boldface font,\ddx
, which has an optional (bracketed) parameter that defaults tox
, so that\ddx{y}
produces\frac{dy}{dx}
while\ddx[t]{y}
produces\frac{dy}{dt}
, and\abc
that is equivalent to\def\abc#1\cba{(#1)}
.
Require OptionsÂ¶
The require extension defines the (nonstandard)
\require{}
macro for loading TeX extensions. Adding it to the
packages
array defines a require
subblock of the tex
configuration block with the following values:
MathJax = {
tex: {
require: {
allow: {
base: false,
'allpackages': false
},
defaultAllow: true
}
};

allow: {...}
This subobject indicates which extensions can be loaded by
\require
. The keys are the package names, and the value istrue
to allow the extension to be loaded, andfalse
to disallow it. If an extension is not in the list, the default value is given bydefaultAllow
, described below.

defaultAllow: true
This is the value used for any extensions that are requested, but are not in the
allow
object described above. If set totrue
, any extension not listed inallow
will be allowed; iffalse
, only the ones listed inallow
(with valuetrue
) will be allowed.
Autoload OptionÂ¶
The autoload extension creates macros that cause the
packages that define them to be loaded automatically when they are
first used. Adding it to the packages
array defines an
autoload
subblock to the tex
configuration block. This block
contains key: value pairs where the key is a TeX package name, and
the value is an array of macros that cause that package to be loaded,
or an array consisting of two arrays, the first giving names of macros
and the second names of environments; the first time any of them are
used, the extension will be loaded automatically.
The default autoload definitions are the following:
MathJax = {
tex: {
autoload: expandable({
action: ['toggle', 'mathtip', 'texttip'],
amsCd: [[], ['CD']],
bbox: ['bbox'],
boldsymbol: ['boldsymbol'],
braket: ['bra', 'ket', 'braket', 'set', 'Bra', 'Ket', 'Braket', 'Set', 'ketbra', 'Ketbra'],
cancel: ['cancel', 'bcancel', 'xcancel', 'cancelto'],
color: ['color', 'definecolor', 'textcolor', 'colorbox', 'fcolorbox'],
enclose: ['enclose'],
extpfeil: ['xtwoheadrightarrow', 'xtwoheadleftarrow', 'xmapsto',
'xlongequal', 'xtofrom', 'Newextarrow'],
html: ['href', 'class', 'style', 'cssId'],
mhchem: ['ce', 'pu'],
newcommand: ['newcommand', 'renewcommand', 'newenvironment', 'renewenvironment', 'def', 'let'],
unicode: ['unicode'],
verb: ['verb']
}
}
};
To prevent an extension from autoloading, set its value to an empty array. E.g., to not autoload the color extension, use
MathJax = {
tex: {
autoload: expandable({
color: []
}
}
};
If you define your own extensions, and they have a prefix other than
[tex]
, then include that in the extension name. For instance,
MathJax = {
tex: {
autoload: expandable({
'[extensions]/myExtension' : ['myMacro', 'myOtherMacro']
}
}
};
See the Loader Options section for details about how to define
your own prefixes, like the [extensions]
prefix used here.
TagFormat OptionsÂ¶
The tagFormat extension allows you to control the display
and linking of equation tags and numbers. Adding this to the
packages
array adds a tagFormat
subobject to the tex
configuration block with the following values:
tagFormat: {
number: (n: number) => n.toString(),
tag: (tag: string) => '(' + tag + ')',
id: (id: string) => 'mjxeqn' + id.replace(/\s/g, '_'),
url: (id: string, base: string) => base + '#' + encodeURIComponent(id),
}

number: function (n) {return n.toString()}
A function that tells MathJax what tag to use for equation number
n
. This could be used to have the equations labeled by a sequence of symbols rather than numbers, or to use section and subsection numbers instead.

tag: function (n) {return '(' + n + ')'}
A function that tells MathJax how to format an equation number for displaying as a tag for an equation. This is what appears in the margin of a tagged or numbered equation.

id: function (n) {return 'mjxeqn' + n.replace(/\s/g, '_')}
A function that tells MathJax what ID to use as an anchor for the equation (so that it can be used in URL references).

url: function (id, base) {return base + '#' + encodeURIComponent(id)}
A function that takes an equation ID and base URL and returns the URL to link to it. The
base
value is taken from the baseURL value, so that links can be make within a page even if it has a<base>
element that sets the base URL for the page to a different location.
Color OptionsÂ¶
The color extension defines the LaTeXcompatible \color
macro. Adding it to the packages
array defines a color
subblock of the tex
configuration block with the following values:
MathJax = {
tex: {
color: {
padding: '5px',
borderWidth: '2px'
}
}
};

padding: '5px'
This gives the padding to use for color boxes with background colors.

borderWidth: '2px'
This gives the border width to use with framed color boxes produced by
\fcolorbox
.
AmsCD OptionsÂ¶
The amsCd extension defines the CD environment for
commutative diagrams. Adding it to the packages
array defines an
amsCd
subblock of the tex
configuration block with the
following values:
MathJax = {
tex: {
amsCd: {
colspace: '5pt',
rowspace: '5pt',
harrowsize: '2.75em',
varrowsize: '1.75em',
hideHorizontalLabels: false
}
}
};

colspace: '5pt'
This gives the amount of space to use between columns in the commutative diagram.

rowspace: '5pt'
This gives the amount of space to use between rows in the commutative diagram.

harrowsize: '2.75em'
This gives the minimum size for horizontal arrows in the commutative diagram.

varrowsize: '1.75em'
This gives the minimum size for vertical arrows in the commutative diagram.

hideHorizontalLabels: false
This determines whether horizontal arrows with labels above or below will use
\smash
in order to hide the height of the labels. (Labels above or below horizontal arrows can cause excess space between rows, so setting this totrue
can improve the look of the diagram.)
MathML Input Processor OptionsÂ¶
The options below control the operation of the MathML input
processor that is run when you include
'input/mathml'
in the load
array of the loader
block of
your MathJax configuration, or if you load a combined component that
includes the MathML input jax. They are listed with their default
values. To set any of these options, include an mml
section in
your MathJax
global object.
The Configuration BlockÂ¶
MathJax = {
mml: {
parseAs: 'html', // or 'xml'
forceReparse: false, // true to serialize and reparse all MathML
parseError: function (node) { // function to process parsing errors
this.error(this.adaptor.textContent(node).replace(/\n.*/g, ''));
}
}
};
Option DescriptionsÂ¶

parseAs: 'html'
Specifies how MathML strings should be parsed: as XML or as HTML. When set to
'xml'
, the browserâs XML parser is used, which is more strict about format (e.g., matching end tags) than the HTML parser, which is the default. In node application (where theliteDOM
is used), these both use the same parser, which is not very strict.

forceReparse: false
Specifies whether MathJax will serialize and reparse MathML found in the document. This can be useful if you want to do XML parsing of the MathML from an HTML document.

parseError: (node) => {...}
Specifies a function to be called when there is a parsing error in the MathML (usually only happens with XML parsing). The
node
is a DOM node containing the error text. Your function can process that in any way it sees fit. The default is to call the MathML input processorâs error function with the text of the error (which will create anmerror
node with the error message). Note that this function runs withthis
being the MathML input processor object.
Developer OptionsÂ¶
In addition to the options listed above, lowlevel options intended for developers include the following:

FindMathML: null
The
FindMathML
object instance that will override the default one. This allows you to create a subclass ofFindMathML
and pass that to the MathML input jax. Anull
value means use the defaultFindMathML
class and make a new instance of that.

MathMLCompile: null
The
MathMLCompile
object instance that will override the default one. This allows you to create a subclass ofMathMLCompile
and pass that to the MathML input jax. Anull
value means use the defaultMathMLCompile
class and make a new instance of that.
AsciiMath Input Processor OptionsÂ¶
The options below control the operation of the AsciiMath input
processor that is run when you include
'input/asciimath'
in the in the load
array of the loader
block of your MathJax configuration, or if you load a combined
component that includes the AsciiMath input jax (none currently do,
since the AsciiMath input has not been fully ported to version 3).
They are listed with their default values. To set any of these
options, include an asciimath
section in your MathJax
global
object.
The Configuration BlockÂ¶
MathJax = {
asciimath: {
fixphi: true, // true for TeX mapping, false for unicode mapping
displaystyle: true, // true for displaystyle typesetting, false for inline
decimalsign: '.' // character to use for decimal separator
skipHtmlTags: [ // HTML tags that won't be searched for math
'script', 'noscript', 'style', 'textarea', 'pre',
'code', 'annotation', 'annotationxml'
],
includeHtmlTags: { // HTML tags that can appear within math
br: '\n', wbr: '', '#comment': ''
},
ignoreHtmlClass: 'mathjax_ignore', // class that marks tags not to search
processHtmlClass: 'mathjax_process' // class that marks tags that should be searched
}
};
Option DescriptionsÂ¶

fixphi: true
Determines whether MathJax will switch the Unicode values for
phi
andvarphi
. If set totrue
MathJax will use the TeX mapping, otherwise the Unicode mapping.

displaystyle: true
Determines whether operators like summation symbols will have their limits above and below the operators (true) or to their right (false). The former is how they would appear in displayed equations that are shown on their own lines, while the latter is better suited to inline equations so that they donât interfere with the line spacing so much.

decimalsign: "."
This is the character to be used for decimal points in numbers. If you change this to
','
, then you need to be careful about entering points or intervals. E.g., use(1, 2)
rather than(1,2)
in that case.
The remaining options are described in the Options Common to All Input Processors section.
Developer OptionsÂ¶
In addition to the options listed above, lowlevel options intended for developers include the following:

FindAsciiMath: null
The
FindAsciiMath
object instance that will override the default one. This allows you to create a subclass ofFindAsciiMath
and pass that to the AsciiMath input jax. Anull
value means use the defaultFindAsciiMath
class and make a new instance of that.
Options Common to All Input ProcessorsÂ¶
The following options are common to all the input processors listed
above. They are given here with their default values, using the
tex
block as an example.
MathJax = {
tex: {
skipHtmlTags: [ // HTML tags that won't be searched for math
'script', 'noscript', 'style', 'textarea', 'pre',
'code', 'annotation', 'annotationxml'
],
includeHtmlTags: { // HTML tags that can appear within math
br: '\n', wbr: '', '#comment': ''
},
ignoreHtmlClass: 'mathjax_ignore', // class that marks tags not to search
processHtmlClass: 'mathjax_process' // class that marks tags that should be searched
}
};
Option DescriptionsÂ¶

skipHtmlTags: ['script', 'noscript', 'style', 'textarea',

'pre', 'code', 'annotation', 'annotationxml']
This array lists the names of the tags whose contents should not be processed by MathJaX (other than to look for ignore/process classes as listed below). You can add to (or remove from) this list to prevent MathJax from processing mathematics in specific contexts. E.g.,
skipHtmlTags: {'[]': ['code', 'pre'], '[+]': ['li']}
would remove
'code'
and'pre'
tags from the list, while adding'li'
tags to the list.

includeHtmlTags: {br: 'n', wbr: '', '#comment': ''}
This object specifies what tags can appear within a math expression, and what text to replace them by within the math. The default is to allow
<br>
, which becomes a newline, and<wbr>
and HTML comments, which are removed entirely.

ignoreHtmlClass: 'mathjax_ignore'
This is the class name used to mark elements whose contents should not be processed by MathJax (other than to look for the
processHtmlClass
pattern below). Note that this is a regular expression, and so you need to be sure to quote any regexp special characters. The pattern is inserted into one that requires your pattern to match a complete word, so settingignoreHtmlClass: 'class2'
would cause it to match an element withclass='class1 class2 class3'
but notclass='myclass2'
. Note that you can assign several classes by separating them by the vertical line character (
). For instance, withignoreHtmlClass: 'class1class2'
any element assigned a class of eitherclass1
orclass2
will be skipped. This could also be specified byignoreHtmlClass: 'class[12]'
, which matchesclass
followed by either a1
or a2
.

processHtmlClass: 'mathjax_process'
This is the class name used to mark elements whose contents should be processed by MathJax. This is used to restart processing within tags that have been marked as ignored via the
ignoreHtmlClass
or to cause a tag that appears in theskipHtmlTags
list to be processed rather than skipped. Note that this is a regular expression, and so you need to be sure to quote any regexp special characters. The pattern is inserted into one that requires your pattern to match a complete word, so settingprocessHtmlClass: 'class2'
would cause it to match an element withclass='class1 class2 class3'
but notclass='myclass2'
. Note that you can assign several classes by separating them by the vertical line character (
). For instance, withprocessHtmlClass: 'class1class2'
any element assigned a class of eitherclass1
orclass2
will have its contents processed. This could also be specified byprocessHtmlClass: 'class[12]'
, which matchesclass
followed by either a1
or a2
.
Output Processor OptionsÂ¶
There are a number of configuration options that are common to all the output processors. These are described following the links below, which give the options that are specific to the particular output jax.
CommonHTML Output Processor OptionsÂ¶
The options below control the operation of the CommonHTML output
processor that is run when you include
'output/chtml'
in the load
array of the loader
block of
your MathJax configuration, or if you load a combined component that
includes the CommonHTML output jax. They are listed with their default
values. To set any of these options, include a chtml
section in
your MathJax
global object.
The Configuration BlockÂ¶
MathJax = {
chtml: {
scale: 1, // global scaling factor for all expressions
minScale: .5, // smallest scaling factor to use
matchFontHeight: true, // true to match exheight of surrounding font
mtextInheritFont: false, // true to make mtext elements use surrounding font
merrorInheritFont: true, // true to make merror text use surrounding font
mathmlSpacing: false, // true for MathML spacing rules, false for TeX rules
skipAttributes: {}, // RFDa and other attributes NOT to copy to the output
exFactor: .5, // default size of ex in em units
displayAlign: 'center', // default for indentalign when set to 'auto'
displayIndent: '0', // default for indentshift when set to 'auto'
fontURL: '[mathjax]/components/output/chtml/fonts/woffv2', // The URL where the fonts are found
adaptiveCSS: true // true means only produce CSS that is used in the processed equations
}
};
Option DescriptionsÂ¶

fontURL: '[mathjax]/components/output/chtml/fonts/woffv2'
This is the URL to the location where the MathJax fonts are stored. In the default,
[mathjax]
is replaced by the location from which you have loaded MathJax. You should include a complete URL to the location of the fonts you want to use.

adaptiveCSS: true
This setting controls how the CommonHTML output jax handles the CSS styles that it generates. When true, this means that only the CSS needed for the math that has been processed on the page so far is generated. When false, the CSS needed for all elements and all characters in the MathJax font are generated. This is an extremely large amount of CSS, and that can have an effect on the performance of your page, so it is best to leave this as
true
. You can reset the information about what CSS is needed by using the commandMathJax.startup.document.output.clearCache();
to clear the font cache.
The remaining options are described in the Options Common to All Output Processors section.
SVG Output Processor OptionsÂ¶
The options below control the operation of the SVG output
processor that is run when you include 'output/svg'
in the load
array of the loader
block of your MathJax
configuration, or if you load a combined component that includes the
CommonHTML output jax. They are listed with their default values. To
set any of these options, include an svg
section in your
MathJax
global object.
The Configuration BlockÂ¶
MathJax = {
svg: {
scale: 1, // global scaling factor for all expressions
minScale: .5, // smallest scaling factor to use
matchFontHeight: true, // true to match exheight of surrounding font
mtextInheritFont: false, // true to make mtext elements use surrounding font
merrorInheritFont: true, // true to make merror text use surrounding font
mathmlSpacing: false, // true for MathML spacing rules, false for TeX rules
skipAttributes: {}, // RFDa and other attributes NOT to copy to the output
exFactor: .5, // default size of ex in em units
displayAlign: 'center', // default for indentalign when set to 'auto'
displayIndent: '0', // default for indentshift when set to 'auto'
fontCache: 'local', // or 'global' or 'none'
localID: null, // ID to use for local font cache (for single equation processing)
internalSpeechTitles: true, // insert <title> tags with speech content
titleID: 0 // initial id number to use for arialabeledby titles
}
};
Option DescriptionsÂ¶

fontCache: 'local'
This setting determines how the SVG output jax manages characters that appear multiple times in an equation or on a page. The SVG processor uses SVG paths to display the characters in your math expressions, and when a character is used more than once, it is possible to reuse the same path description; this can save space in the SVG image, as the paths can be quite complex. When set to
'local'
, MathJax will cache font paths on an expressbyexpression (each expression has its own cache within the SVG image itself), which makes the SVG selfcontained, but still allows for some savings if characters are repeated. When set to'global'
, a single cache is used for all paths on the page; this gives the most savings, but makes the images dependent on other elements of the page. When set to'none'
, no caching is done and explicit paths are used for every character in the expression.

internalSpeechTitles: true
This tells the SVG output jax whether to put speech text into
<title>
elements within the SVG (when set to'true'
), or to use anarialabel
attribute instead. Neither of these control whether speech strings are generated (that is handled by the SemanticEnrich Extension Options settings); this setting only tells what to do with a speech string when it has been generated or included as an attribute on the root MathML element.
The remaining options are described in the Options Common to All Output Processors section.
Developer OptionsÂ¶
In addition to the options listed above, lowlevel options intended for developers include the following:

localID: null
This gives the ID prefix to use for the paths stored in a local font cache when
fontCache
is set to'local'
. This is useful if you need to process multiple equations by hand and want to generate unique ids for each equation, even if MathJax is restarted between equations. If set tonull
, no prefix is used.

titleID: 0
This gives the initial number used to make unique
<title>
ids wheninternalSpeechTitles
istrue
. This is useful if you need to process multiple equations by hand and want to generate unique ids for each equation, even if MathJax is restarted between equations.
Options Common to All Output ProcessorsÂ¶
The following options are common to all the output processors listed
above. They are given here with their default values, using the
chtml
block as an example.
MathJax = {
chtml: {
scale: 1, // global scaling factor for all expressions
minScale: .5, // smallest scaling factor to use
matchFontHeight: true, // true to match exheight of surrounding font
mtextInheritFont: false, // true to make mtext elements use surrounding font
merrorInheritFont: true, // true to make merror text use surrounding font
mathmlSpacing: false, // true for MathML spacing rules, false for TeX rules
skipAttributes: {}, // RFDa and other attributes NOT to copy to the output
exFactor: .5, // default size of ex in em units
displayAlign: 'center', // default for indentalign when set to 'auto'
displayIndent: '0' // default for indentshift when set to 'auto'
}
};
Option DescriptionsÂ¶

scale: 1
The scaling factor for math compaired to the surrounding text. The CommonHTML output processor tries to match the exsize of the mathematics with that of the text where it is placed, but you may want to adjust the results using this scaling factor. The user can also adjust this value using the contextual menu item associated with the typeset mathematics.

minScale: .5
This gives a minimum scale factor for the scaling used by MathJax to match the equation to the surrounding text. This will prevent MathJax from making the mathematics too small.

matchFontHeight: true
This setting controls whether MathJax will scale the mathematics so that the exheight of the math fonts matches the exheight of the surrounding fonts. This makes the math match the surroundings better, but if the surrounding font doesnât have its exheight set properly (and not all fonts do), it can cause the math to not match the surrounding text. While this will make the lowercase letters match the surrounding fonts, the upper case letters may not match (that would require the font height and exheight to have the same ratio in the surrounding text as in the math fonts, which is unlikely).

mtextInheritFont: false
This setting controls whether
<mtext>
elements will be typeset using the math fonts or the font of the surrounding text. Whenfalse
, the math fonts will be used, as they are for other token elements; whentrue
, the font will be inherited from the surrounding text, when possible, depending on themathvariant
for the element (some math variants, such asfraktur
canât be inherited from the surroundings).

merrorInheritFont: false
This setting controls whether the text for
<merror>
elements will be typeset using the math fonts or the font of the surrounding text. Whenfalse
, the math fonts will be used, as they are for other token elements; whentrue
, the font will be inherited from the surrounding text, when possible, depending on themathvariant
for the element (some math variants, such asfraktur
canât be inherited from the surroundings).

mathmlSpacing: false
This specifies whether to use TeX spacing or MathML spacing when typesetting the math. When
true
, MathML spacing rules are used; whenfalse
, the TeX rules are used.

skipAttributes: {}
This object gives a list of nonstandard attributes (e.g., RFDa attributes) that will not be transferred from MathML element to their corresponding DOM elements in the typeset output. For example, with
skipAttributes: { datamyattr: true }
a MathML element like
<mi datamyattr="some data">x</mi>
will not have thedatamyattr
attribute on the<mjxmi>
element created by the CommonHTML output processor to represent the<mi>
element (normally, any nonstandard attributes are retained in the output).

exFactor: .5
This is the size of an ex in comparison to 1 em that is to be used when the exsize canât be determined (e.g., when running in a Node application, where the size of DOM elements canât be determined).

displayAlign: 'center'
This determines how displayed equations will be aligned (left, center, or right). The default is
'center'
.

displayIndent: 0
This gives the amount of indentation that should be used for displayed equations. The default is
0
. A value of'1em'
, for example, would introduce an extra 1 em of space from whichever margin the equation is aligned to, or an offset from the center position if the expression is centered. Note that negative values are allowed.
Developer OptionsÂ¶
In addition to the options listed above, lowlevel options intended for developers include the following:

wrapperFactory: null
The
WrapperFactory
object instance to use for creating wrappers for the internal MathML objects. This allows you to create a subclass ofWrapperFactory
and pass that to the output jax. Anull
value means use the defaultWrapperFactory
class and make a new instance of that.

font: null
The
FontData
object instance to use for creating wrappers for the internal MathML objects. This allows you to create a subclass ofFontData
and pass that to the output jax. Anull
value means use the defaultFontData
class and make a new instance of that.

cssStyles: null
The
CssStyles
object instance to use for creating wrappers for the internal MathML objects. This allows you to create a subclass ofCssStyles
and pass that to the output jax. Anull
value means use the defaultCssStyles
class and make a new instance of that.
Document OptionsÂ¶
The options below control the operation of the MathDocument
object
created by MathJax to process the mathematics in your web page. They
are listed with their default values. To set any of these options,
include an options
section in your MathJax
global object.
The Configuration BlockÂ¶
MathJax = {
options: {
compileError: function (doc, math, err) {doc.compileError(math, err)},
typesetError: function (doc, math, err) {doc.typesetError(math, err)},
renderActions: {...}
}
};
Option DescriptionsÂ¶

compileError: function (doc, math, err) {doc.compileError(math, err)}
This is the function called whenever there is an uncaught error while an input jax is running (i.e., during the documentâs
compile()
call). The arguments are theMathDocument
in which the error occurred, theMathItem
for the expression where it occurred, and theError
object for the uncaught error. The default action is to call the documentâs defaultcompileError()
function, which setsmath.root
to a math element containing an error message (i.e.,<math><merror><mtext>Math input error<mtext></merror></math>
). You can replace this with your own function for trapping runtime errors in the input processors.

typesetError: function (doc, math, err) {doc.typesetError(math, err)}
This is the function called whenever there is an uncaught error while an output jax is running (i.e., during the documentâs
typeset()
call). The arguments are theMathDocument
in which the error occurred, theMathItem
for the expression where it occurred, and theError
object for the uncaught error. The default action is to call the documentâs defaulttypesetError()
function, which setsmath.typesetRoot
to a<span>
element containing the textMath output error
. You can replace this with your own function for trapping runtime errors in the output processors.

renderActions: {...}
This is an object that specifies the actions to take during the
MathJax.typeset()
(and its underlyingMathJax.startup.document.render()
call), and the various conversion functions, such asMathJax.tex2svg()
(and their underlyingMathJax.startup.document.convert()
call). The structure of the object isname: value
pairs separated by commas, where thename
gives an identifier for each action, and thevalue
is an array consisting of a number and zero, one, or two functions, followed optionally by a boolean value.The number gives the priority of the action (lower numbers are executed first when the actions are performed). The first function gives the action to perform when a document is rendered as a whole, and the second a function to perform when an individual expression is converted or rerendered. These can be given either as an explicit function, or as a string giving the name of a method to call (the first should be a method of a
MathDocument
, and the second of aMathItem
). If either is an empty string, that action is not performed. If the function is missing, the method name is taken from thename
of the action. The boolean value tells whether the second function should be performed during aconvert()
call (when true) or only during arerender()
call (when false).For example,
MathJax = { options: { renderActions: { compile: [MathItem.STATE.COMPILED], metrics: [MathItem.STATE.METRICS, 'getMetrics', '', false] } } };
specifies two actions, the first called
compile
that uses thecompile()
method of theMathDocument
andMathItem
, and the second calledmetrics
that uses thegetMetric()
call for theMathDocument
when the document is rendered, but does nothing during arerender()
orconvert()
call or an individualMathItem
.If the first function is given explicitly, it should take one argument, the
MathDocument
on which it is running. If the second function is given explicitly, it should take two arguments, theMathItem
that is being processed, and theMathDocument
in which it exists.The default value includes actions for the main calls needed to perform rendering of math:
find
,compile
,metrics
,typeset
,update
, andreset
. These find the math in the document, call the input jax on the math that was located, obtain the metric information for the location of the math, call the output jax to convert the internal format to the output format, insert the output into the document, and finally reset the internal flags so that a subsequent typesetting action will process properly.You can add your own actions by adding new named actions to the
renderActions
object, or override existing ones by reusing an existing name from above. See the MathML Support section for an example of doing this. The priority number tells where in the list your actions will be performed.Loading extensions may cause additional actions to be inserted into the list. For example, the ui/menu component inserts an action to add the menu event handlers to the math after it is inserted into the page.
Developer OptionsÂ¶

OutputJax: null
The
OutputJax
object instance to use for thisMathDocument
. If you are using MathJax components, the startup component will create this automatically. If you are writing a Node application accessing MathJax code directly, you will need to create the output jax yourself and pass it to the document through this option.

InputJax: null
The
InputJax
object instance to use for thisMathDocument
. If you are using MathJax components, the startup component will create this automatically. If you are writing a Node application accessing MathJax code directly, you will need to create the input jax yourself and pass it to the document through this option.

MmlFactory: null
The
MmlFactory
object instance to use for creating the internal MathML objects. This allows you to create a subclass ofMmlFactory
and pass that to the document. Anull
value means use the defaultMmlFactory
class and make a new instance of that.

MathList: DefaultMathList
The
MathList
object class to use for managing the list ofMathItem
objects associated with theMathDocument
. This allows you to create a subclass ofMathList
and pass that to the document.

MathItem: DefaultMathItem
The
MathItem
object class to use for maintaining the information about a single expression in aMathDocument
. This allows you to create a subclass ofMathItem
and pass that to the document. The documentHandler
object may define its own subclass ofMathItem
and use that as the default instead. For example, the HTML handler usesHTMLMathItem
objects for this option.
Accessibility Extensions OptionsÂ¶
MathJax contains several extensions meant to support those who need assistive technology, such as screen readers. See the Accessibility Components page for more details. The options that control these extensions are listed below.
SemanticEnrich Extension OptionsÂ¶
This extension coordinates the creation and embedding of semantic information generated by the enrichment process within the MathJax output for use by the other extensions.
The semanticenrich extension adds two actions to the documentâs
default renderActions object: an
enrich
action to perform the semantic enrichment, and an
attachSpeech
action to attach speech (if it is being generated) to
the output.
The Configuration BlockÂ¶
MathJax = {
options: {
enrichSpeech: 'none', // or 'shallow', or 'deep'
}
};
Option DescriptionsÂ¶

enrichSpeech: 'none'
This setting controls whether MathJax uses the SpeechRule Engine (SRE) to generate a speech string for the expressions on the page. If set to
'none'
(the default), no speech is generated. When set to'shallow'
, speech is generated only for the complete equation, and when set to'deep'
, every speakable element is marked with its speech string. These speech strings are put indatasemanticspeech
attributes, when generated. The output processors will find the topmost speech string and set the appropriate attributes on the output they generate so that screen readers can find it.
Complexity Extension OptionsÂ¶
This extension generates a complexity metric and inserts elements
that allow the expressions to be collapsed by the user by clicking
on the expression based on that metric. Use the 'a11y/complexity'
block of your MathJax configuration to configure the extension.
The complexity extension adds a complexity
action to the
documentâs default renderActions
object.
The Configuration BlockÂ¶
MathJax = {
options: {
makeCollapsible: true // insert maction to allow collapsing
}
};
Option DescriptionsÂ¶

makeCollapsible: true
This setting determines whether the extension will insert
<maction>
elements to allow complex expressions to be âcollapsedâ so that they take up less space, and produce condensed speech strings that are simpler to listen to. When false, the expression is not altered, but elements are marked (internally) if they would be collapsible.
Developer OptionsÂ¶

identifyCollapsible: true
This setting determines whether the complexity numbers computed for each element in the expression should take collapsing into account. If true, parents of collapsible elements will get complexities that reflect the collapsible elements being collapsed. When false, the complexities assume no collapsing will take place.

Collapse: Collapse
The
Collapse
object class to use for creating the<maction>
elements needed for collapsing complex expressions. This allows you to create a subclass ofCollapse
and pass that to the document.

ComplexityVisitor: ComplexityVisitor
The
ComplexityVisitor
object class to use for managing the computations of complexity values. This allows you to create a subclass ofComplexityVisitor
and pass that to the document.
Explorer Extension OptionsÂ¶
This extension provides support for interactive exploration of expressions within the page. See the Accessibility Features page for details about how this works.
The explorer extension adds an explorable
action to the
documentâs default renderActions
object.
The Configuration BlockÂ¶
MathJax = {
options: {
a11y: {
speech: true, // switch on speech output
braille: true, // switch on Braille output
subtitles: true, // show speech as a subtitle
viewBraille: false, // display Braille output as subtitles
speechRules: 'mathspeakdefault', // speech rules as domainstyle pair
backgroundColor: 'Blue', // color for background of selected subexpression
backgroundOpacity: .2, // opacity for background of selected subexpression
foregroundColor: 'Black', // color to use for text of selected subexpression
foregroundOpacity: 1, // opacity for text of selected subexpression
highlight: 'None', // type of highlighting for collapsible subexpressions
flame: false, // color collapsible subexpressions
hover: false, // show collapsible subexpression on mouse hovering
treeColoring: false, // tree color expression
magnification: 'None', // type of magnification
magnify: '400%', // percentage of magnification of zoomed expressions
keyMagnifier: false, // switch on magnification via key exploration
mouseMagnifier: false, // switch on magnification via mouse hovering
align: 'top', // placement of magnified expression
infoType: false // show semantic type on mouse hovering
infoRole: false, // show semantic role on mouse hovering
infoPrefix: false, // show speech prefixes on mouse hovering
}
}
};
Option DescriptionsÂ¶
The a11y options belong roughly to one of the following four categories:
Speech OptionsÂ¶

speech: true
Sets if speech output is produced. By default speech is computed for every expression on the page and output once the explorer is started.

braille: true
Sets whether or not Braille is produced and output for an expression.

subtitles: true
This option indicates whether the speech string for the selected subexpression will be shown as a subtitle under the expression as it is explored.

viewBraille: false
This option indicates whether Braille output will be displayed under the expression as it is explored.

speechRules: 'mathspeakdefault'
This option selects the speech rules used for speech generation in a domainstyle pair. For a list of possible selections please see the documentation of the Speech Rule Engine, e.g., by running
npx speechruleengine options
Highlighting OptionsÂ¶

foregroundColor: 'Black'
This specifies the color to use for the text of the selected subexpression during expression exploration. The color should be chosen from among the following:
'Blue'
,'Red'
,'Green'
,'Yellow'
,'Cyan'
,'Magenta'
,'White'
, and'Black'
.

foregroundOpacity: 1
This indicates the opacity to use for the text of the selected subexpression.

backgroundColor: 'Blue'
This specifies the background color to use for the selected subexpression during expression exploration. The color should be chosen from among the following:
'Blue'
,'Red'
,'Green'
,'Yellow'
,'Cyan'
,'Magenta'
,'White'
, and'Black'
.

backgroundOpacity: .2
This indicates the opacity to use for the background color of the selected subexpression.

highlight: 'None'
Chooses a particular highlighter for showing collapsible subexpressions. Choices are
'None'
,'Flame'
, and'Hover'
.

flame: false
This flag switches on the Flame highligher, which permanently highlights collapsible subexpressions, with successively darkening background for nested collapsible expressions.

hover: false
This switches on the Hover highlighter that highlights collapsible subexpression when hovering over them with a the mouse pointer.
Note, that having both
'hover'
and'flame'
set to true can lead to unexpected sideeffects.

treeColoring: false
This setting enables tree coloring, by which expressions are visually distinguished by giving neighbouring symbols different, ideally contrasting foreground colors.
Magnification OptionsÂ¶

magnification: 'None'
This option specifies a particular magnifier for enlarging subexpressions. Choices are
'None'
,'Keyboard'
, and'Mouse'
.

magnify: '400%'
This gives the magnification factor (as a percent) to use for the zoomed subexpression when zoomed subexpressions are being displayed during expression exploration. The default is 400%.

keyMagnifier: false
Switches on zooming of subexpressions during keyboard exploration of an expression.

mouseMagnifier: false
Switches on zooming of subexpressions by hovering with the mouse pointer.
Note, using both
'keyMagnifier'
and'mouseMagnifier
together can lead to unwanted sideeffect.

align: 'top'
This setting tells where to place the zoomed version of the selected subexpression, when zoomed subexpressions are being displayed during expression exploration.
Semantic Info OptionsÂ¶
Semantic information explorers are a feature that displays some semantic information of a subexpression when hovering over it with the mouse pointer. Note, multiple information explorers work well together.

infoType: false
Activates an explorer that investigates the semantic type of subexpressions. The type is an immutable property of an expression, that is independent of its particular position in a formula. Note, however that types can change depending on subject area of a document.

infoRole: false
Activates an explorer to present the semantic role of a subexpression, which is dependent on its context in the overall expression.

infoPrefix: false
Activates explorer for prefix information, which pertains to the position of a subexpression. Examples are
'exponent'
,'radicand'
, etc. These would also be announced during interactive exploration with speech output.For more details on these concepts, see also the documentation of the Speech Rule Engine.
Note
While multiple keyboard based exploration techniques work well together and can be easily employed simultaneously, switching on multiple mouse based exploration tools can lead to unexpected interactions of the tools and often unpredictable side effects.
Startup and Loader OptionsÂ¶
MathJaxâs components system is based on two tools that handler loading the various components and setting up the objects and methods needed to use the loaded components. They both use options to control their actions, as described below.
Loader OptionsÂ¶
The loader component is the one responsible for loading the
requested MathJax components. It is configured using the loader
block in your MathJax configuration object. The loader
block can
also contain subblocks of configuration options for individual
components, as described below in Component Configuration.
The Configuration BlockÂ¶
In the example below, Loader
represents the
MathJax.loader
object, for brevity.
MathJax = {
loader: {
paths: {mathjax: Loader.getRoot()}, // the path prefixes for use in specifying components
source: {}, // the URLs for components, when defaults aren't right
dependencies: {}, // arrays of dependencies for each component
provides: {}, // components provided by each component
load: [], // array of components to load
ready: Loader.defaultReady.bind(Loader), // function to call when everything is loaded
failed: function (error) { // function to call if a component fails to load
console.log(`MathJax(${error.package  '?'}): ${error.message}`);
}
require: null // function to use for loading components
}
};
Option DescriptionsÂ¶

load: []
This array lists the components that you want to load. If you are using a combined component file, you may not need to request any additional components. If you are using using the startup component explicitly, then you will need to list all the components you want to load.

ready: MathJax.loader.defaultReady.bind(MathJax.loader)
This is a function that is called when all the components have been loaded successfully. By default, it simply calls the startup componentâs ready() function, if there is one. You can override this with your own function, can can call
MathJax.loader.defaultReady()
after doing whatever startup you need to do. See also the Component Configuration section for how to tie into individual components being loaded.

failed: (error) => console.log(`MathJax(${error.package  '?'}): ${error.message}`)}
This is a function that is called if one or more of the components fails to load properly. The default is to print a message to the console log, but you can override it to trap loading errors in MathJax components. See also the Component Configuration section below for how to trap individual component errors.

paths: {mathjax: Loader.getRoot()}
This object links path prefixes to their actual locations. By default, the
mathjax
prefix is predefined to be the location from which the MathJax file is being loaded. You can use[mathjax]/...
to identify a component, and this prefix is prepended automatically for any that doesnât already have a prefix. For example,input/tex
will become[mathjax]/input/jax
automatically.When the TeX require extension is loaded, an additional
tex
path is created in order to be able to load the various TeX extensions.You can define your own prefixes, for example,
MathJax = { loader: { paths: {custom: 'https://my.site.com/mathjax'}, load: ['[custom]/myComponent'] } };
which defines a
custom
prefix that you can used to access custom extensions. The URL can even be to a different server than where you loaded the main MathJax code, so you can host your own custom extensions and still use a CDN for the main MathJax code.You can define as many different paths as you need. Note that paths can refer to other paths, so you could do
MathJax = { loader: { paths: { custom: 'https://my.site.com/mathjax', extensions: '[custom]/extensions' }, load: ['[extensions]/myExtension'] } };
to define the
extensions
prefix in terms of thecustom
prefix.

source: {}
This object allows you to override the default locations of components and provide a specific location on a componentbycomponent basis. For example:
MathJax = { loader: { source: { 'special/extension': 'https://my.site.com/mathjax/special/extension.js' }, load: ['special/extension'] } };
gives an explicit location to obtain the
special/extension
component.

dependencies: {}
This object maps component names to arrays of names of components that must be loaded before the given one. The startup component prepopulates this object with the dependencies among the MathJax components, but you can add your own dependencies if you make custom components that rely on others. For example, if you make a custom TeX extension that relies on another TeX component, you would want to indicate that dependency so that if your extension is loaded via
\require
, for example, the loader will automatically load the dependencies first.MathJax = { loader: { source: { '[tex]/myExtension: 'https://my.site.com/mathjax/tex/myExtension.js'}, }, dependencies: { '[tex]/myExtension': ['input/texbase', '[tex]/newcommand', '[tex]/enclose'] } } };
This would cause the newcommand and enclose components to be loaded prior to loading your extension, and would load your extension from the given URL even though you may be getting MathJax from a CDN.

provides: {}
This object indicates the components that are provided by a component that may include several subcomponents. For example, the input/tex component loads the newcommand component (and several others), so the
provides
object indicates that vialoader: { provides: { 'input/tex': [ 'input/texbase', '[tex]/ams', '[tex]/newcommand', '[tex]/noundefined', '[tex]/require', '[tex]/autoload', '[tex]/configMacros' ] } }
The startup component prepopulates this object with the dependencies among the MathJax components, but if you define your own custom components that include other components, you may need to declare the components that it provides, so that if another component has one of them as a dependency, that dependency will not be loaded again (since your code already includes it).
For example, if your custom component [tex]/myExtension depends on the newcommand and enclose components, then
MathJax = { loader: { source: { '[tex]/myExtension: 'https://my.site.com/mathjax/tex/myExtension.js'}, }, dependencies: { '[tex]/myExtension': ['input/texbase', '[tex]/newcommand', '[tex]/enclose'] }, load: ['input/tex', '[tex]/myExtension'] } }; will load the `input/tex` component, which provides both `input/texbase` and `[tex]/newcommand`, and then load `[tex]/enclose` before loading your `[tex]/myExtension`.

require: null
This is a function to use for loading components. It should accept a string that is the location of the component to load, and should do whatever is needed to load that component. If the loading is asynchronous, it should return a promise that is resolved when the component is loaded, ortherwise it should return nothing. If there is an error loading the component, it should throw an error.
If set
null
, the default is to insert a<script>
tag into the document that loads the component.For use in node applications, set this value to
require
, which will use nodeâsrequire
command to load components. E.g.MathJax = { loader: { require: require } };
Component ConfigurationÂ¶
In addition to the options listed above, individual compoments can be
configured in the loader
block by using a subblock with the
componentâs name, and any of the options listed below. For example,
MathJax = {
loader: {
load: ['input/tex'],
'input/tex': {
ready: (name) => console.log(name + ' ready'),
failed: (error) => console.log(error.package + ' failed')
}
}
};
which sets up ready()
and failed()
functions to process when
the input/tex component is either loaded successfully or fails to load.

ready: undefined
This is a function that has an argument that is the name of the component being loaded, and is called when the component and all its dependencies are fully loaded.

failed: undefined
This is a function that has an argument that is a
PackageError
object (which is a subclass ofError
with an extra field, that beingpacakge
, the name of the component being loaded). It is called when the component fails to load (and that can be because one of its dependencies fails to load).

checkReady: undefined
This is a function that tages no argument and is called when the component is loaded, but before the
ready()
function is called. It can be used o do postprocessing after the component is loaded, but before other components are signaled that it is ready. For example, it could be used to load other components; e.g., the output/chtml component can use its configuration to determine which font to load, and then load that. If this function returns a promise object, theready()
function will not be called until the promise is resolved.
Startup OptionsÂ¶
The startup component is responsible for creating the objects needed
by MathJax to perform the mathematical typesetting of your pages, and
for setting up the methods you may need to call in order to do that.
It is configured using the startup
block in your configuration
object.
The Configuration BlockÂ¶
In the example below, Startup
represents the
MathJax.startup
object, for brevity.
MathJax = {
loader: {
elements: null, // The elements to typeset (default is document body)
typeset: true, // Perform initial typeset?
ready: Startup.defaultReady.bind(Startup), // Called when components are loaded
pageReady: Startup.defaultPageReady.bind(Startup), // Called when MathJax and page are ready
document: document, // The document (or fragment or string) to work in
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
}
};
Option DescriptionsÂ¶

elements: null
This is either
null
or an array of DOM elements whose contents should be typeset. The elements can either be actual DOM elements, or strings that give CSS selectors for the elements to typeset.

typeset: true
This determines whether the initial typesetting action should be performed when the page is ready.

ready: Startup.defaultReady.bind(Startup)
This is a function that is called when MathJax is loaded and ready to go. It is called by the loader when all the components are loaded. The default action is to create all the objects needed for MathJax, and set up the call to the
pageReady()
function below. You can override this function if you want to modify the setup process; see Performing Actions During Startup for more details. Note that this function may be called before the page is complete, so unless you are modifying the objects created by the startup module, replacingpageReady()
may be the better choice.

pageReady: Startup.defaultPageReady.bind(Startup)
This is a function that is called when MathJax is ready to go and the page is ready to be processed. The default action is to perform the initial typesetting of the page, but you can override it to do whatever you would like. See Performing Actions During Startup for more details and examples of how to do this.

document: document
This is the document (or fragment or string of serialized HTML) that you want to process. By default (for inbrowser use) it is the browser document. When there is no global
document
variable, it is an empty HTML document.

input: []
This is an array of names of input processors that you want to use, from among the ones that have been loaded. So if you have loaded the code for several input jax, but only want to use the
tex
input jax, for example, set this to['tex']
. If set to an empty array, then all loaded input jax are used.

output: null
This is the name of the output processor that you want to use, from among the ones that have been loaded. So if you have loaded the code for several output jax, but only want to use the
svg
output jax, for example, set this to'svg'
. If set tonull
or an empty string, then the first output jax that is loaded will be used.

handler: null
This is the name of the document handler that you want to use, from among the ones that have been loaded. Currently, there is only one handler, the HTML handler, so unless you are creating your own handlers, leave this as
null
.

adaptor: null
This is the name of the DOM adaptor that you want to use, from among the ones that have been loaded. By default the components load the
browser
adaptor, but you can load theliteDOM
adaptor for use in node applications; if you do, it will set this value so that it will be used automatically.
These modules use the global MathJax
object to determine what
you want loaded, and alter that object to include the methods and
objects that they set up. The initial value of MathJax
is
saved as MathJax.config
, and other properties are added to
MathJax
depending on the components that get loaded. For
example, the startup component adds MathJax.startup()
, which
contains the objects that the startup module creates, like the input
and output jax, the math ocument object, the DOM adaptor, and so on.
See the MathJax API documentation for more
information.
The MathJax
variable can also contain configuration blocks
intended for individual components when they are loaded. For example,
it can have a tex
block to configure the input/tex component. See Configuring MathJax for more details.
Note that you must set up the global MathJax
object before
loading MathJax itself. If you try to that afterward, you will
overwrite the MathJax
variable, and all the values that
MathJax has set in them. See the Configuring MathJax After it is Loaded section
for more about how to change the configuration after MathJax is loaded
if you need to do that.
MathJax in Dynamic ContentÂ¶
This page is under construction
If you are writing a dynamic web page where content containing
mathematics may appear after MathJax has already typeset the rest of
the page, then you will need to tell MathJax to look for mathematics
in the page again when that new content is produced. To do that, you
need to use the MathJax.typeset()
method. This will cause
MathJax to look for unprocessed mathematics on the page and typeset
it, leaving unchanged any math that has already been typeset.
This command runs synchronously, but if the mathematics on the page
uses \require
or causes an extension to be autoloaded (via the
autoload component), this will cause the typeset call to
fail. In this case, you should use MathJax.typesetPromise()
instead. This returns a promise that is resolves when the typesetting
is complete.
You should not start more than one typesetting operation at a time, so
if you are using MathJax.typesetPromise()
and will be calling
it more than once, you may want to retain the promise it returns and
chain your subsequent typeset calls to it. See the
Handling Asynchronous Typesetting section for more details.
More information will be coming to this section in the future.
Custom ExtensionsÂ¶
This page is uncer construction
See the Building a Custom Component section for an example of building custom extensions to MathJax.
See also the MathJax Web Demos repository for some customization examples for use in the browser, and the MathJax Node Demos for a custom extension in node.
More information will be coming to this section in the future.
Synchronizing your code with MathJaxÂ¶
This page is under construction
MathJax version 2 used queues, callbacks, and signals as a means of coordinating your code with the actions of MathJax. Version 3 uses the more modern tool know as a promise to synchronize your code with MathJax. See the Handling Asynchronous Typesetting section for examples of typesetting using promises.
In addition to promises, MathJax version 3 introduces a rednderActions configuration option that provides a means of linking into MathJaxâs processing pipeline. This is a priorities list of functions to call during processing, which includes the default actions of finding the math in the page, compiling it into the internal format, getting font metrics for the surrounding text, typesetting the mathematics, inserting the math into the page, adding menu actions, and so on. You can insert your own functions into this chain to add more functionality, or even remove the existing steps to trim down what MathJax does.
More information will be coming to this section in the future.
MathJax Frequently Asked QuestionsÂ¶
 Which license is MathJax distributed under?
 Will MathJax make my page load slower even if thereâs no math?
 Mathematics is not rendering properly in IE. How do I fix that?
 What should IEâs XUACompatible meta tag be set to?
 Some of my mathematics is too large or too small. How do I get it right?
 My mathematics is private. Is it safe to use MathJax?
 Does MathJax support Presentation and/or Content MathML?
 How do I create mathematical expressions for display with MathJax?
 I ran into a problem with MathJax. How do I report it?
 Why doesnât the TeX macro \something work?
 Does MathJax support userdefined TeX macros?
Which license is MathJax distributed under?Â¶
MathJax is distributed under the Apache License, Version 2.0.
Will MathJax make my page load slower even if thereâs no math?Â¶
It depends on how you have configured and loaded MathJax. The combined component files like texchtml.js contain a full copy of MathJax and all the components needed for it to process the given input and output format, including all the font data (but not the actual fonts themselves). So these files can be quite large, and can take some time to download. On the other hand, it is a single file (unlike in version 2, where multiple files needed to be loaded), so there should not be the delays associated with establishing multiple connections to a server. If you use the async attribute on the script that loads MathJax, that allows the browser to put off loading MathJax until the rest of the page is ready, so that can help speed up your initial page loading as well.
Mathematics is not rendering properly in IE. How do I fix that?Â¶
Currently, MathJax version 3 only supports IE11, sop if you are using an earlier version, you will need to update your copy, or use a different browser.
If you are using IE11, then please open the MathJax homepage at www.mathjax.org in IE to see if that loads correctly. If the MathJax website does not display mathematics properly, there may be an issue with your security settings in Internet Explorer. Please check the following settings:
 âActive Scriptingâ under the Scripting section should be enabled, as it allows JavaScript to run.
 âRun ActiveX controls and Pluginsâ should be enabled (or prompted) in the âActiveX Controls and Pluginsâ section.
 âScript ActiveX controls marked safe for scriptingâ needs to be enabled (or prompted) in the same âActiveX Controls and Pluginsâ section. Note that it requires a restart of IE if you change this setting.
 âFont Downloadâ has to be enabled (or prompted) in the âDownloadsâ section. This is required for MathJax to use webbased fonts for optimal viewing experience.
You may need to select Custom Level security to make these changes. If
you have verified that the above settings are correct, tried clearing
your cache and restarting IE. If you are still experiencing problems
with displaying mathematics on www.mathjax.org
, we would
appreciate it if you reported the problem to the MathJax issue
tracker so we can look
into it. See the section on issue tracking for
details.
If the MathJax site does render properly, this indicates that there may be something wrong with the webpage you were trying to view initially. If you manage that website, then make sure that it is using the latest version of MathJax, and that you have included the line
<script src=âhttps://polyfill.io/v3/polyfill.min.js?features=es6â></script>
before the script that loads MathJax itself. If you donât manage the website yourself, you may have to report the issue to the maintainers of the site in order to have it resolved.
What should IEâs XUACompatible meta tag be set to?Â¶
We strongly suggest to follow Microsoftâs suggestion to use IE=edge
. That
is, in the document <head>
include
<meta httpequiv="XUACompatible" content="IE=edge">
before any other tags in the <head>
. This will force all IE
versions to use their latest engine which is the optimal setting for
MathJax. For more information, see the Microsoft documentation on
compatibility modes.
Some of my mathematics is too large or too small. How do I get it right?Â¶
MathJax renders mathematics dynamically so that formulas and symbols
are nicely integrated into the surrounding text â with matching font
size, margins, and baseline. In other words: it should look right. If
your mathematics is too large or too small in comparison to its
surroundings, you may be using the incorrect typesetting
style. Following LaTeX conventions, MathJax supports two typesetting
styles: inline and âdisplayâ equations (one set off from the
paragraph as a separate line). For inline equations, MathJax tries
hard to maintain the interline spacing. This means things like
fractions and roots are vertically compressed, and smaller fonts are
used. Display equations are shown as a separate paragraph and can be
rendered with more space and slightly larger fonts. The standard
delimiters for inline equations in TeX notation are \(...\)
,
while those for display equations are $$...$$
or \[...\]
, but
both types of delimiters can be customized. For how to configure
MathJax to scale all mathematics relative to the surrounding text,
check our documentation for Output Processor Options.
My mathematics is private. Is it safe to use MathJax?Â¶
Yes. MathJax is JavaScript code that is runs within the userâs
browser, so your siteâs actual content never leaves the browser while
MathJax is rendering. If you are using MathJax from a CDN, it
interacts with a web server to get font data and MathJax code, but
this is all put together in the browser of the reader. If you have
concerns about crosssite scripting, you can access the CDN service
using the secure https
protocol to prevent tampering with the code
between the CDN and a browser; or, if you prefer, you can install
MathJax on your own web server, or for offline use. MathJax does not
reference scripts from other websites. The MathJax code is, of course,
open source which means that you can review it and inspect its
integrity.
Does MathJax support Presentation and/or Content MathML?Â¶
MathML comes in two types: Presentation MathML, which describes what an equation looks like, and Content MathML, which describes what an equation means. By default, MathJax works with Presentation MathML and offers an extension for Content MathML, see the documentation on MathML support, which has not yet been converted to version 3.
You can also convert your Content MathML expressions to Presentation
MathML using xslt
, see for example David Carlisleâs webxslt
collection. A more
detailed explanation of the difference between Content and
Presentation MathML can be found in the module âPresentation MathML
Versus Content MathMLâ at
cnx.org
.
How do I create mathematical expressions for display with MathJax?Â¶
MathJax is a method to display mathematics. It is not an authoring environment, and so you will need another program to create mathematical expressions. The most common languages for mathematics on the computer are (La)TeX and MathML, and there are many authoring tools for these languages.
LaTeX code is essentially plain text, and so you do not need a special program to write it (although complete LaTeX authoring environments do exist). If you are not familiar with LaTeX, you will need some determination to learn and master the language due to its specialized nature and rich vocabulary of symbols. There are various good tutorials on the net, but there is no onesizefitsall best one. A good starting point is the TeX User Group, or have a look at the LaTeX Wiki book.
MathML is an XMLbased web format for mathematical expressions. MathML3, the latest version, has been an official W3C recommendation since October 2010. MathML is widely supported by Computer Algebra Systems and can be created with a choice of authoring tools, including Microsoft Office with the MathType equation editor. A list of software the supports MathML may be found in The W3C MathML software list.
I ran into a problem with MathJax. How do I report it?Â¶
See the section on Reporting Issues for the steps to take when you think you have found a bug in MathJax.
Why doesnât the TeX macro \something
work?Â¶
It really depends on what \something
is. We have a full list of
the supported TeX commands. If the command you want
to use is not in this list, you may be able to define a TeX macro for
it yourself, or if you want to get really advanced, you can define
custom JavaScript that implements it (see the Custom Extensions for details).
Keep in mind that MathJax is meant for typesetting math on the web. It only replicates the math functionality of LaTeX and not the text formatting capabilities. Any text formatting on the web should be done in HTML and CSS, not TeX. If you would like to convert full TeX documents into HTML to publish online, you should use a TeX to HTML converter like LaTeXML, Tralics, or tex4ht, but you should realize that TeX conversion tools are unlikely produce results as good as controlling the HTML and CSS source yourself.
Does MathJax support userdefined TeX macros?Â¶
Yes, you can define TeX macros in MathJax the same way you do in LaTeX
with \newcommand
, or \def
. An example is
\newcommand{\water}{{\rm H_{2}O}}
, which will output the chemical
formula for water when you use the \water
command. The
\renewcommand
command works as well. You can also store macros in
the MathJax configuration. For more information, see the
documentation.
MathJax BadgesÂ¶
We are proud of the work we have done on MathJax, and we hope you are proud to use it. If you would like to show your support for the MathJax project, please consider including one of our âPowered by MathJaxâ web badges on your pages that use it.
The MathJax BadgesÂ¶
Thanks to our friends at OER Glue for designing the last two badges.
The MathJax LogoÂ¶

<a href="https://www.mathjax.org"> <img title="Powered by MathJax" src="https://www.mathjax.org/badge/mj_logo.png" border="0" alt="Powered by MathJax" /> </a> 
Alternative versionsÂ¶
While we do not allow the modification of the badges or the logo, we are open to requests for different versions.
 An SVG version of the square badge is available.
 Smaller versions of the main logo are available
RulesÂ¶
We are committed to maintaining the highest standards of excellence for MathJax, and part of that is avoiding confusion and misleading impressions; therefore, if you do use our badge or logo, we ask that you observe these simple rules (for the fine print, see below):
Things You Can DoÂ¶
 Use the MathJax Logo or Badges in marketing, and other publicity materials related to MathJax.
 Distribute unchanged MathJax products (code, development tools, documentation) as long as you distribute them without charge.
 Describe your own software as âbased on MathJax technologyâ, or âincorporating MathJax source codeâ if your software includes modified MathJax products.
 Link to MathJaxâs website(s) by using the logos and badges we provide.
 Use MathJaxâs word marks in describing and advertising your services or products relating to a MathJax product, so long as you donât do anything that might mislead customers. For example, itâs OK if your website says, âCustomization services for MathJax available hereâ.
 Make tshirts, desktop wallpaper, or baseball caps though only for yourself and your friends (meaning people from whom you donât receive anything of value in return).
Things You Cannot DoÂ¶
 Alter our logo or badges in any way.
 Use our logo or badge online without including the link to the MathJax home page.
 Place our logo or badges in such close proximity to other content that it is indistinguishable.
 Make our logo or badges the most distinctive or prominent feature on your website, printed material or other content.
 Use our logo or badges in a way that suggests any type of association or partnership with MathJax or approval, sponsorship or endorsement by MathJax (unless allowed via a license from us).
 Use our logo or badges in a way that is harmful, deceptive, obscene or otherwise objectionable to the average person.
 Use our logo or badges on websites or other places containing content associated with hate speech, pornography, gambling or illegal activities.
 Use our logo or badges in, or in connection with, content that disparages us or sullies our reputation.
And now the fine print:Â¶
The words and logotype âMathJax,â the MathJax badges, and any combination of the foregoing, whether integrated into a larger whole or standing alone, are MathJaxâs trademarks. You are authorized to use our trademarks under the terms and conditions above, and only on the further condition that you download the trademarks directly from our website. MathJax retains full, unfettered, and sole discretion to revoke this trademark license for any reason whatsoever or for no specified reason.
Articles and PresentationsÂ¶
ArticlesÂ¶
 Towards Universal Rendering in MathJax (W4A 2016) by Davide Cervone, Peter Krautzberger, Volker Sorge, MathJax, 2016
 Towards ARIA Standards for Mathematical Markup (DEIMS 2016) by Davide Cervone, Peter Krautzberger, Volker Sorge, MathJax, 2016
 Employing Semantic Analysis for Enhanced Accessibility Features in MathJax (ADS, CCNC 2016) by Davide Cervone, Peter Krautzberger, Volker Sorge, MathJax, 2016
 Whitepaper: Towards MathJax v3.0 by Peter Krautzberger, Davide Cervone, Volker Sorge, MathJax, 2015
 Towards Meaningful Visual Abstraction of Mathematical Notation (MathUI, CICM 2015) by Davide Cervone, Peter Krautzberger, Volker Sorge, MathJax, 2016
 MathML forges on by Peter Krautzberger, MathJax, 2014
 MathJax: A Platform for Mathematics on the Webâ, Notices of the AMS by Davide Cervone, MathJax, 2012
 Accessible Pages with MathJax by Neil Soiffer Design Science, Inc., 2010
 Mathematics Elearning Community Benefits from MathJax by Hylke Koers, MathJax, 2010
PresentationsÂ¶
 Barrierereie Mathematik im Netz (in German) by Peter Krautzberger, MathJax, FernUni Hagen, Global Accessibility Awareness Day, 2016
 Evolving Math Web Standards from a Usability Perspective by Peter Krautzberger, Davide Cervone, Volker Sorge, MathJax, 2016 Joint Mathematics Meetings in Seattle
 MathJax â beautiful mathematics on the web by Peter Krautzberger, MathJax, 2014
 MathML: math made for the web and beyond by Peter Krautzberger, MathJax, 2013
 MathJax: The Past and the Future by Davide P. Cervone 2013 Joint Mathematics Meetings in San Diego
 MathJax from an Authorâs Point of View by Davide P. Cervone 2013 Joint Mathematics Meetings in San Diego
 MathJax: a JavaScriptbased engine for including TeX and MathML in HTML by Davide P. Cervone 2010 Joint Mathematics Meetings in San Francisco
 MathType, Math Markup, and the Goal of Cut and Paste by Robert Miner 2010 Joint Mathematics Meetings in San Francisco
Upgrading from v2 to v3Â¶
MathJax v3 is a complete rewrite of MathJax from the ground up (see Whatâs New in MathJax v3.0), and so its internal structure is quite different from that of version 2. That means MathJax v3 is not a dropin replacement for MathJax v2, and upgrading to version 3 takes some adjustment to your web pages. The sections below describe the changes you will need to make, and the most important differences between v2 and v3.
Warning
If you are using the latest.js
feature of MathJax v2 on a CDN,
note that this will not update to version 3 automatically,
since there are significant and potentially breaking changes in
version 3. There is, however, a bug in latest.js
in versions
2.7.5 and below; when the current version is 3.0 or higher,
latest.js
will not use the highest version of 2.x, but instead
will use the version from which latest.js
has been taken. For
example, if you load latest.js
from version 2.7.3, it currently
is giving you version 2.7.5 as the latest version, when version 3
is released to the CDN, your pages will revert to using version
2.7.3 again. This behavior has been corrected in version 2.7.6, so
if you change to loading latest.js
from version 2.7.6, you
should get the latest 2.x version regardless of the presence of
version 3 on the CDN.
MathJax v3 is still a work in progress; not all features of version 2 have been converted to version 3 yet, and some may not be. MathJax v2 will continue to be maintained as we work to move more features into version 3, but MathJax v2 likely will not see much further development, just maintenance, once MathJax v3 is fully converted.
 Configuration Changes
 Changes in Loading MathJax
 Changes in the MathJax API
 Changes in Input and Output Jax
 No Longer Applies to Version 3
 Not Yet Ported to Version 3
 Contextual Menu Changes
 MathJax in Node
 Version 2 Compatibility Example
Configuration ChangesÂ¶
There are a number of changes in version 3 that affect how MathJax is
configured. In version 2, there were several ways to provide
configuration for MathJax; in MathJax 3, when you are using
MathJax components, there is now only one,
which is to set the MathJax
global to contain the
configuration information prior to loading MathJax. In particular,
you no longer call MathJax.Hub.Config()
, and this function does
not exist in MathJax v3. See the section Configuring MathJax for
more details on how to configure MathJax.
In addition to requiring the use of the MathJax
global
variable for setting the configuration, the organization of the
configuration options have been changed to accommodate the new
internal structure of MathJax, and some of their names have changed as
well. To help you convert your existing version 2 configurations to
version 3, we provide a conversion tool
that you can use to obtain a version 3 configuration that is as close
as possible to your current one.
Not all configuration parameters can be converted directly, however. For some of these, it is because the version 2 features have not yet been ported to version 3, but for others, the version 2 feature may simply not exist in the new architecture of version 3. For example, MathJax v2 updates the page in phases, first removing the math source expressions (e.g., the TeX code), then inserts a preview expression (fast to create, but not as accurately laid out), and then goes back and produces highquality typeset versions, which it inserts in chunks between page updates. MathJax version 3 does not work that way (it does not change the page until the math is entirely typeset), and so the options that control the math preview and the chunking of the equations for display simply have no counterparts in version 3.
Finally, configurations that change the MathJax code via augmenting
the existing MathJax objects, or that hook into MathJaxâs processing
pipeline via MathJax.Hub.Register.StartupHook()
or one of the
other hook mechanisms will not carry over to version 3. MathJax v3
does not use the queues, signals, and callbacks that are central to
version 2, so code that relies on them will have to be updated. See
the Configuring and Loading MathJax section for some approaches to these
issues.
Changes in Loading MathJaxÂ¶
Just as there are changes in how MathJax is configured, there are also
changes in how MathJax is loaded. With version 2, you load
MathJax.js
and indicate a combined configuration file using
?config=
followed by the name of the configuration file. This
always required at least two files to be loaded (and often more than
that), and the second file was always loaded asynchronously, meaning
MathJax always operated asynchronously.
In version 3, there is no longer a MathJax.js
file, and you load a
combined component file directly. E.g., you load texchtml.js
to
get TeX with CommonHTML output. This reduces the number of files that
need to be requested, and improves performance. See
Loading MathJax for more details.
Just as there is no need to use ?config=
in version 3, the other
parameters that could be set in this way also are absent from
version 3. So, for example, you canât set delayStartupUntil
in
the script that loads MathJax.
The startup sequence operates fundamentally differently in version 3 from how it did in version 2. In version 2, MathJax would begin its startup process immediately upon MathJax being loaded, queuing action to perform configuration blocks, load extensions and jax, do the initial typesetting, and so on. It was difficult to insert your own actions into this sequence, and timing issues could occur if you didnât put your configuration in the right place.
In version 3, synchronization with MathJax is done through ES6 promises, rather than MathJaxâs queues and signals, and MathJaxâs startup process is more straightforward. You can insert your own code into the startup process more easily, and can replace the default startup actions entirely, if you wish. The actions Mathjax takes during startup are better separated so that you can pick and choose the ones you want to perform. See the Startup Actions section for more details on how to accomplish this.
Changes in the MathJax APIÂ¶
Because the internals have been completely redesigned, its API has changed, and so if you have been calling MathJax functions, or have modified MathJax internals by augmenting the existing MathJax objects, that code will no longer work with version 3, and will have to be modified. Some of the more important changes are discussed below.
 The
Mathjax.Hub.Typeset()
function has been replaced by theMathJax.typesetPromise()
andMathJax.typeset()
functions. In fact, theMathJax.Hub
has been removed entirely.
 The queues, signals, and callbacks that are central to version 2
have been replaced by ES6 promises in version 3. In particular, you
can use
MathJax.startup.promise
as a replacement forMathJax.Hub.Queue()
. See the Handling Asynchronous Typesetting section for how this is done. See the Version 2 Compatibility Example below for code that may make it possible for you to use your version 2 code in version 3.
 The
MathJax.Hub.Register.StartupHook()
and other related hooks have been replaced byready()
functions in the loader component. So code that relies on these hooks to alter MathJax need to be reworked. The Startup Actions section shows some mechanisms that can be used for this.
 Version 2 configurations could include an
Augment()
block that could be used to add (or override) methods and data in the main MathJax objects. In version 3, this should be handled through subclassing the MathJax object classes, and passing the new classes to the objects that use them. This can be done during the startup componentâsready()
function, when the MathJax classes are available, but before any of their instances have been created. See the Startup Actions section for some ideas on how this can be done.
 The
Augment
configuration blocks andStartupHooks()
function described above could be used in version 2 to extend MathJaxâs capabilities, and in particular, to extend the TeX input jax by adding new javascriptbased macros. These version2 mechanisms are not available in version 3; instead, TeX extensions are more formalized in version 3. See the Building a Custom Component section for an example of how this can be done.
In version 2, the mathematics that is located by MathJax is removed from the page and stored in special
<script>
tags within the page. These are not visible to the reader, but mark the location and content of the math on the page. It was possible in version 2 for programs to create these<script>
tags themselves, avoiding the need for MathJax to look for math delimiters, and for the page author to encode HTML special characters like<
,>
, and&
in their mathematics. Version 3 does not alter the document in this way, and does not store the math that it locates in tags in the page. Instead, it keeps an external list of math object (of theMathItem
class). So if you wish to use such scripts to store the math in the page initially, you can replace thefind
action in the renderActions list to use a function that locates the scripts and created the neededMathItem
objects. For exampleMathJax = { options: { renderActions: { find: [10, function (doc) { for (const node of document.querySelectorAll('script[type^="text/tex"]')) { const display = !!node.type.match(/; *mode=display/); const math = new doc.options.MathItem(node.textContent, doc.inputJax[0], display); const text = document.createTextNode(''); node.parentNode.replaceChild(text, node); math.start = {node: text, delim: '', n: 0}; math.end = {node: text, delim: '', n: 0}; doc.math.push(math); } }, ''] } } };
should find the scripts that MathJax version 2 normally would have created.
Changes in Input and Output JaxÂ¶
The input and output processors (called âjaxâ) are core pieces of MathJax. All three input processors from version 2 are present in version 3, but the AsciiMath processor has not been fully ported to version 3, and currently consists of the legacy version 2 code patched onto the version 3 framework. This is larger and less efficient than a full version 3 port, which should be included in a future release.
In version 2, MathJax used preprocessors (tex2jax, mml2jax,
asciimath2jax, and jsMath2jax) to locate the mathematics in the
page and prepare it for the input jax. There was really no need to
have these be separate pieces, so in version 3, these have been folded
into their respective input jax. That means that you donât load them
separately, and the configuration options of the preprocessor and
input jax have been combined. For example, the tex2jax
and
TeX
options now both occur in the tex
configuration block.
MathJax version 2 included six different output jax, which had been developed over time to server different purposes. The original HTMLCSS output jax had the greatest browser coverage, but its output was browserdependent, its font detection was fragile, and it was the slowest of the output processors. The CommonHTML output jax was a more modern remake of the HTML output that was both browser independent, and considerably faster. The SVG output jax produced SVG images rather than HTML DOM trees, and did not require web fonts in order to display the math, so the results could be made selfcontained. MathJax version 3 includes the CommonHTML and SVG output jax, but has dropped the older, slower HTMLCSS output format.
MathJax 2 also included an output format that produced MathML for those browsers that support it. Since only Firefox and Safari currently implement MathML rendering (with no support in IE, Edge, or Chrome), and because MathJax canât control the quality or coverage of the MathML support in the browser, MathJax version 3 has dropped the NativeMML output format for now. Should the browser situation improve in the future, it could be added again. See MathML Support for more on this, and for an example of how to implement MathML output yourself.
There are few changes within the supported input and output jax, as described below:
Input ChangesÂ¶
There are two changes in the TeX input jax that can affect backward compatibility with existing TeX content in your pages.
The first concerns the \color
macro; in version 2, \color
is a
nonstandard in that it takes two arguments (the color an the math to
be shown in that color), while the authentic LaTeX version is a switch
that changes the color of everything that follows it. The
LaTeXcompatible one was available as an extension. In version 3,
both versions are extensions (see ), with the LaTeXcompatible one
being autoloaded when \color
is first used. See the
color and colorV2 extensions for more
information, and how to configure MathJax to use the original
version2 \color
macro.
The other incompatibility is that the names of some extensions have
been changed in version 3. For example, AMScd in version 2 is now
amsCd in version 3. This means that you need to use
\require{amsCd}
rather than \require{AMScd}
to load the CD
environment. In order to support existing content that uses
\require
, you can use the code in the
Version 2 Compatibility Example section below.
Some other changes include:
 The autoloadall extension has been rename autoload, and is more flexible and configurable than the original.
 The configuration options for controlling the format of equation numbers have been moved to an extension; see the tagFormat documentation for details.
 The
useMathMLspacing
options for the various input jax have been moved to the output jax instead, as themathmlSpacing
option.
 The functionality of the MathChoice extension has been moved to the base TeX package.
 The nonstandard
UPDIAGONALARROW
andARROW
notations have been removed from themenclose
element. These have been replaced by the standardnortheastarrow
notation.
Output ChangesÂ¶
There are several important changes to the output jax in version 3, and several things that arenât yet implemented, but will be in a future version. One such feature is linebreaking, which hasnât been ported to version 3 yet. Another is that only the MathJax TeX font is currently available in version 3. See Not Yet Ported to Version 3 for a list of features that are still being converted.
In addition, there a few other changes of importance:
 There are no more image fonts. These were for use with the HTMLCSS output jax, and since that is not included in MathJax version 3, neither are the image fonts. Since those took up a lot of disk space, this should make locally hosted MathJax installations smaller.
 For expressions with equation numbers, the SVG output jax now has these expressions float with the size of the container element, just like they do in HTML output. This was not the case in version 2, so this is an important improvement for dynamic pages.
The font used for characters that arenât in the font used by MathJax used to be controlled by the
undefinedFont
configuration parameter in version 2, but in version 3, you should use CSS to set this instead. For example,mjxcontainer mjxutext { fontfamily: myfavoritefont; } mjxcontainer svg text { fontfamily: myfavoritefont; }
would select the
myfavoritefont
to be used for unknown characters. The first declaration is for the CommonHTML output, and the second for the SVG output. Once advantage of this approach is that you can specify the CSS separately for each variant; e.g.,mjxcontainer mjxutext[variant="sansserif"] { fontfamily: mysansseriffont; } mjxcontainer svg text[datavariant="sansserif"] { fontfamily: mysansseriffont; }
would set the font to use for characters that arenât in the MathJax fonts and that have requested the sansserif variant.
 Version 3 only implements the CommonHTML and SVG output jax. The original HTMLCSS output jax has been dropped, a has the NativeMML. The PreviewHTML and PlainSource output jax have not been ported to version 3, though they may be in the future, if there is interest.
No Longer Applies to Version 3Â¶
A number of version 2 features have been removed as part of the redesign of MathJax version 3. These are described below.
 In version 3, MathJax no longer updates the page in small âchunksâ, but instead updates the page as a whole (a future version may include an extension that updates in smaller pieces). This has an impact on a number of version 2 features. First, because there is no incremental update, the MathJax message bar (usually in the lower left corner) that indicated the progress of the typesetting is no longer needed, and is not part of MathJax version 3. Of course, the configuration options that control it have also been removed, as have the options for equation chunking (that controlled how many equations to process between screen updates.
 Similarly, since the page updating is done all at once, there is no need for the math preview versions that were displayed while the equations where being typeset. So the fastpreview extension and PreviewHTML output jax have been removed, along with the configuration options for them.
 The AssistiveMML extension from version 2 has not been included in version 3, but you can easily add similar functionality; an example demonstrating one way to do this is given in the MathML Support section.
 The PlainSource output jax has not be ported to version 3, though it may be in the future; it can be handled in other ways in version 3. As mentioned above, the NativeMML has been dropped from version 3, though it is not hard to implement a replacement if you want.
 The autobold TeX extension is no longer available in version 3, and is unlikely to be ported in the future.
 The mhchem TeX extension in version 2 came in two forms: the original extension that didnât match the LaTeX implementation perfectly, and a rewrite by the author of the original LaTeX package that made it compatible with LaTeX. The legacy version could be selected by a configuration option. This is no longer possible in version 3 (the legacy version is no longer provided).
 The handlefloats extension for HTML output has been removed, as its functionality is now part of the standard CommonHTML output.
 The jsMath2jax preprocessor has been dropped. This was used to help bridge jsMath users to MathJax, but since it has been a decade since MathJax was introduced, the need for jsMath conversion should be very small at this point.
 The MatchWebFonts extension is no longer available. This was sometimes needed for HTMLCSS output, which relied on the fonts being in place when it ran. The CommonHTML output is less susceptible to font issues, and this is no longer necessary.
 The FontWarnings extension is no longer available, since it was for the HTMLCSS output jax, which is not part of MathJax version 3.
 The HelpDialog extension is not included in version 3. Its functionality is incorporated into the ui/menu directly.
 The toMathML extension is no longer provided in version 3.
Instead, you can use
MathJax.startup.toMML()
if you are using MathJax components, or can use theSerializedMMLVisitor
object if you are calling MathJax modules directly.
 The configuration blocks no longer allow the
style
option that were available in version 2. Instead, you should use CSS stylesheets and CSS style files directly.
 Synchronization with MathJax in version 2 was handled via queues, signals, and callbacks. In version 3, these have been replaced by ES6 promises. See Synchronizing your code with MathJax for more details.
Not Yet Ported to Version 3Â¶
As MathJax 3 is still a work in progress, not all of the version 2 features have been converted to the new code base yet, though we hope to include them in version 3 in a future release. Among the most important ones are the following.
 Currently, automatic line breaking support is missing from version 3. This is a key feature to be included in a future release.
 The MathJax v3 output jax currently only support one font, the MathJax TeX fonts. Improved font support is an important goal for version 3, and this is one of the next features to be addressed. We will be rebuilding the fonts used for MathJax, and making additional web fonts available in a future release. We also plan to make the tools used for creating the necessary font data available for use in porting your own fonts for use with MathJax.
 The localization mechanism available in version 2 has not yet been incorporated into version 3, so currently MathJax v3 is available only in English. This is an important feature that will be added to MathJax v3 in a future release.
 The Safe extension has not yet been ported to version 3, but should be for a future release.
 The begingroup and mediawikitexvc TeX extensions havenât been ported to version 3 yet, but should be in the future.
 The mml3 and contentmml extensions for the MathML input jax are not yet available in version 3. We do hope to have these in a future release.
 The autocollapse assistive extension is not yet available for version 3. If there is enough interest, that will also be ported to the new code base.
MathJax in NodeÂ¶
Version 2 of MathJax was designed to work in a browser, and relied heavily on the presence of the browser window, document, DOM, and other browserspecific objects. Using MathJax on a server to preprocess mathematics (e.g., to convert a TeX string to an SVG image, for example), was not easy in version 2. The mathjaxnode <https://github.com/mathjax/mathjaxnode> project made that possible, but required a completely different way of interacting with MathJax, and was not as easy to use or as reliable as we would have liked.
Version 3 has serverside use as an important usecase to support, and so it is possible to use MathJax in a node application in essentially the same way as in a browser, with only a few minor adjustments to the configuration to allow for that. This should make it much easier to use MathJax on a server, as it will work the same there as for your webbased applications. It is also possible to link to MathJax at a lower level and access the MathJax modules directly. See the section on using MathJax in node, and the MathJax API for more information on these possibilities.
Version 2 Compatibility ExampleÂ¶
The following example causes the \color
macro to be the original
one from version 2, and sets up the \require
macro to translate
the old package names into the new ones. This should make MathJax v3
handle existing content properly.
Be sure to convert your version2 configuration to a version3 one via the conversion tool that we provide.
<script>
MathJax = {
startup: {
//
// Mapping of old extension names to new ones
//
requireMap: {
AMSmath: 'ams',
AMSsymbols: 'ams',
AMScd: 'amsCd',
HTML: 'html',
noErrors: 'noerrors',
noUndefined: 'noundefined'
},
ready: function () {
//
// Replace the require command map with a new one that checks for
// renamed extensions and converts them to the new names.
//
var CommandMap = MathJax._.input.tex.SymbolMap.CommandMap;
var requireMap = MathJax.config.startup.requireMap;
var RequireLoad = MathJax._.input.tex.require.RequireConfiguration.RequireLoad;
var RequireMethods = {
Require: function (parser, name) {
var required = parser.GetArgument(name);
if (required.match(/[^_azAZ09]/)  required === '') {
throw new TexError('BadPackageName', 'Argument for %1 is not a valid package name', name);
}
if (requireMap.hasOwnProperty(required)) {
required = requireMap[required];
}
RequireLoad(parser, required);
}
};
new CommandMap('require', {require: 'Require'}, RequireMethods);
//
// Do the usual startup
//
return MathJax.startup.defaultReady();
}
},
tex: {
autoload: {
color: [], // don't autoload the color extension
colorV2: ['color'], // do autoload the colorV2 extension
}
}
};
</script>
<script id="MathJaxscript" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/texchtml.js"></script>
This uses the texchtml.js
combined component, so change this to
whichever one you want.
If your website uses the MathJax API to queue typeset calls via
MathJax.Hub.Queue(['Typeset', MathJax.Hub]);
for example, these calls will need to be converted to use the
MathJax 3 API. You may be able to use the following code
to patch into MathJax version 3, which provides implementations for
MathJax.Hub.Typeset()
, and MathJax.Hub.Queue()
. It
also flags usages of MathJax.Hub.Register.StartupHook()
and
the other hookregistering commands, and that you have converted your
MathJax.Hub.Config()
and xmathjaxconfig
scripts to their
version 3 counterparts (use the conversion tool).
Add the following lines right after the new CommandMap()
call in
the code above:
//
// Add a replacement for MathJax.Callback command
//
MathJax.Callback = function (args) {
if (Array.isArray(args)) {
if (args.length === 1 && typeof(args[0]) === 'function') {
return args[0];
} else if (typeof(args[0]) === 'string' && args[1] instanceof Object &&
typeof(args[1][args[0]]) === 'function') {
return Function.bind.apply(args[1][args[0]], args.slice(1));
} else if (typeof(args[0]) === 'function') {
return Function.bind.apply(args[0], [window].concat(args.slice(1)));
} else if (typeof(args[1]) === 'function') {
return Function.bind.apply(args[1], [args[0]].concat(args.slice(2)));
}
} else if (typeof(args) === 'function') {
return args;
}
throw Error("Can't make callback from given data");
};
//
// Add a replacement for MathJax.Hub commands
//
MathJax.Hub = {
Queue: function () {
for (var i = 0, m = arguments.length; i < m; i++) {
var fn = MathJax.Callback(arguments[i]);
MathJax.startup.promise = MathJax.startup.promise.then(fn);
}
return MathJax.startup.promise;
},
Typeset: function (elements, callback) {
var promise = MathJax.typesetPromise(elements);
if (callback) {
promise = promise.then(callback);
}
return promise;
},
Register: {
MessageHook: function () {console.log('MessageHooks are not supported in version 3')},
StartupHook: function () {console.log('StartupHooks are not supported in version 3')},
LoadHook: function () {console.log('LoadHooks are not supported in version 3')}
},
Config: function () {console.log('MathJax configurations should be converted for version 3')}
};
//
// Warn about xmathjaxconfig scripts
//
if (document.querySelector('script[type="text/xmathjaxconfig"]')) {
throw Error('xmathjaxconfig scripts should be converted to MathJax global variable');
}
With this you may be able to get away with using your existing version 2 code to interact with version 3. But if not, either a more sophisticated compatibility module will be needed, or better yet, convert to the new version 3 API.
Whatâs New in MathJaxÂ¶
Whatâs New in MathJax v3.0Â¶
MathJax version 3 is a complete rewrite from the ground up, with the goal of modernizing MathJaxâs internal infrastructure, bringing it more flexibility for use with contemporary web technologies, making it easier to use with NodeJS for preprocessing and serverside support, and making it faster to render your mathematics.
Improved SpeedÂ¶
There were a number of design goals to the version 3 rewrite. A primary one was to improve the rendering speed of MathJax, and we feel we have accomplished that. Because the two versions operate so differently, it is difficult to make precise comparisons, but in tests that render a complete page with several hundred expressions, we see a reduction in rendering time of between 60 and 80 percent, depending on the browser and type of computer.
More FlexibilityÂ¶
Another goal was to make MathJax 3 more flexible for web developers using MathJax as part of a larger framework, while still keeping it easy to use in simple settings. To that end, we have broken down the actions that MathJax takes into smaller units than in version 2, and made it possible to call on them individually, or replace them with alternative versions of your own. For example, the typesetting process has been broken into a number of pieces, including finding the math in the page, compiling it into the internal format (MathML), getting metric data for the location of the math, converting the math into the output format, inserting it into the page, adding menu event handlers, and so on. You have control over which of these to perform, and can modify or remove the existing actions, or add new ones of your own. See the renderActions documentation for details.
Synchronous ConversionÂ¶
A key feature that we wanted to include in version 3 is the ability to run MathJax synchronously, and in particular, to provide a function that can translate an input string (say a TeX expression) into an output DOM tree (say an SVG image). This was not really possible in version 2, since its operation was inherently asynchronous at a fundamental level. With MathJax version 3, this is straightforward, as we provide a synchronous typesetting path, both within the page, and for individual expressions, provided you load all the components you need ahead of time. See Typesetting and Converting Mathematics for details.
No Queues, Signals, CallbacksÂ¶
One of the more difficult aspects of working with MathJax version 2
was having to synchronize your actions with those of MathJax. This
involved using queues, callbacks, and signals to mediate the
asynchronous actions of MathJax. Since these were not standard
javascript paradigms, they caused confusion (and headaches) for many
developers trying to use MathJax. With version 3, MathJax has the
option of working synchronously (as described above), but it still
allows for asynchronous operation (e.g., to allow TeXâs \require
command to load extensions dynamically) if you wish. This no longer
relies on queues, callbacks, and signals, however. Instead, these
actions are managed through the ES6 promise,
which is a javascript standard, and should make integrating MathJax
into your own applications more straightforward.
Package Manager SupportÂ¶
Because MathJax version 2 used its own loading mechanism for accessing
its components, and because there was no method for combining all the
pieces needed by MathJax into one file, MathJax did not work well with
javascript packaging systems like webpack
. Version 3 resolves
that problem, so it should interoperate better with modern web
workflows. You can make your own custom singlefile builds of MathJax
(see Making a Custom Build of MathJax) or can include it as one component of a
larger asset file.
MathJax ComponentsÂ¶
MathJax 3 still provides a loading mechanism similar to the one from
version 2, however, so you can still customize the extensions that is
loads, so that you only load the ones you need (though this does
require that you use MathJax in its asynchronous mode). The various
pieces of MathJax have been packaged into âcomponentsâ that can be
mixed and matched as needed, and which you configure through a global
MathJax
variable (see Examples in a Browser). This
is how MathJax is being distributed through the various CDNs that host
it. When loaded this way, MathJax will automatically set up all the
objects and functions that you need to use the components you have
loaded, giving you easy access to typesetting and conversion functions
for the input and output formats you have selected. See the section
on The MathJax Components for more information. You can also create
your own custom components to complement or replace the ones provided
on the CDN (see A Custom Extension for more).
Startup ActionsÂ¶
If you use any of the combined component
files, MathJax will perform a number of actions during its startup
process. In particular, it will create the input and output jax, math
document, DOM adaptor, and other objects that are needed in order to
perform typesetting in your document. You can access these through
the MathJax.startup
object, if you need to. MathJax will also
set up functions that perform typesetting for you, and conversion
between the various input and output formats that you have loaded.
This should make it easy to perform the most important actions
available in MathJax. See Typesetting and Converting Mathematics for more details.
ServerSide MathJaxÂ¶
While MathJax 2 was designed for use in a web browser, an important
use case that this left unaddressed is preprocessing mathematics on a
server. For version 2, we provided mathjaxnode to fill this gap, but it
is not as flexible or easy to use as many would have liked. MathJax 3
resolves this problem by being designed to work with node
applications in essentially the same way as in a browser. That is,
you can load MathJax components, configure them through the
MathJax
global variable, and call the same functions for
typesetting and conversion as you do within a browser. This makes
parallel development for both the browser and server much easier.
Moreover, node applications can access MathJax modules directly (without the packaging used for MathJax components). This gives you the most direct access to MathJaxâs features, and the most flexibility in modifying MathJaxâs actions. See Examples of MathJax in Node for examples of how this is done.
ES6 and TypescriptÂ¶
MathJax 3 is written using ES6 modules and the Typescript language. This means the source code includes type information (which improves the code reliability), and allows MathJax to be downcompiled to ES5 for older browsers while still taking advantage of modern javascript programming techniques. It also means that you can produce pure ES6 versions of MathJax (rather than ES5) if you wish; these should be smaller and faster than their ES5 equivalents, though they will only run in modern browsers that support ES6, and so limit your readership. We may provide both ES6 and ES5 versions on the CDN in the future.
New Features for Existing ComponentsÂ¶
In addition to the new structure for MathJax described above, some new features have been added to existing pieces of MathJax.
TeX Input ExtensionsÂ¶
There are two new TeX input extensions: braket and physics. Also, some functionality that was built into the TeX input jax in version 2 has been moved into extensions in version 3. This includes the macros configuration option, the tag formatting configuration options, and the require macro. The new autoload extension replaces the older autoloadall extension, is more configurable, and is included in the TeX input components by default. There a several extensions that are not yet ported to version 3, including the autobold, mediawikitexvc, and the thirdparty extensions.
SVG OutputÂ¶
The SVG output for equations with labels has been improved so that the positions of the labels now react to changes in the container width (just like they do in the HTML output formats).
Improved Expression ExplorerÂ¶
The interactive expression explorer has been improved in a number of ways. It now includes better heuristics for creating the speech text for the expressions you explore, provides more keboard control of the features in play during your exploration, adds suppot for braille output, adds support for zooming on subexpressions, and more. See the Accessibility Features page for more details.
Whatâs New inEarlier VersionsÂ¶
Whatâs New in MathJax v2.7Â¶
MathJax v2.7 is primarily a bugfix release with over 60 important bug fixes, in particular to the CommonHTML output. In addition, this release adds several new features as an optin. The following are some of the highlights.
FeaturesÂ¶
 Common HTML output improvements Several important bugs in the layout model have been fixed, in particular tabular layout is now much more robust.
 Accessibility improvements. After the completion of the MathJax
Accessibility Extensions, we are integrating the optin for the
MathJax menu into the core distribution. We are grateful to the web
accessibility community for their guidance, support, and feedback in
our efforts towards making MathJax completely accessible to all
users. This allows endusers to opt into the following features via
the MathJax Menu:
 Responsive Equations. An innovative responsive rendering of mathematical content through collapsing and exploration of subexpressions.
 Universal aural Rendering. An aural rendering tool providing onthefly speechtext for mathematical content and its subexpressions using various rule sets.
 Full Exploration. A fully accessible exploration tool, allowing for meaningful exploration of mathematical content including multiple highlighting features and synchronized aural rendering.
 For more information check the release announcement and the dedicated repository at mathjax/mathjaxa11y.
For a detailed listing please check the release milestone.
AccessibilityÂ¶
 mathajxdev/#20 Add the Menu extension from the MathJax Accessibility tools to all combined configuration files.
 #1465 CHTML and HTMLCSS output: do not add
role=math
by default.  #1483 Catch IE8 errors with inserting MathML from AssistiveMML extension.
 #1513 Disable the AssistiveMML extension when the output renderer is PlainSource.
InterfaceÂ¶
HTML/SVG/nativeMML displayÂ¶
 #1454 SVG output: Use full location URL for
xlink
references in SVG<use>
elements.  #1457 CommonHTML output: Fix problem with characters from Unicode Plane 1 not being mapped to the MathJax fonts properly
 #1458 SVG output: Fix problem with container width when math is scaled.
 #1459 CommonHTML output: Improve
getNode()
to fix processing errors when linebreaking.  #1460 HTMLCSS output: Adjust position of rule for square root when it is made via
createRule()
.  #1461 HTMLCSS output: Make sure
0
remains0
when rounding to pixels (plus a bit).  #1462 CommonHTML output: Bubble percentage widths up while line breaking.
 #1475 PreviewHTML: Avoid error when
\overset
or\underset
is empty.  #1479 All outputs: Properly determine (shrinkwrapping) container widths.
 #1503 CommonHTML output: Handle adjusting table cell heights properly.
 #1507 SVG output: Remove invalid
src
attribute from<mglyph>
output.  #1510 CommonHTML output: Prevent CSS bleedthrough for boxsizing.
 #1512 CommonHTML output: make
<mglyph>
scale image size by hand.  #1530 All outputs: Fix problem with Safari inserting line breaks before inline math.
 #1533 CommonHTML output: improve aligning labels with their table rows.
 #1534 CommonHTML output: ensure output stays a tablecell when focused.
 #1538 All outputs: Donât let preview width interfere with the determination of the container width.
 #1542 CommonHTML output: improve stretching
<mover>
in<mtd>
elements.  #1547 HTMLCSS output: improve line breaks within fractions.
 #1549 All outputs: Improve determination of linebreaking parent element.
 #1550 CommonHTML output: Improve vector arrow positioning.
 #1552 All outputs: Handle
href
correctly when line breaking.  #1574 HTMLCSS and SVG output: Use
currentColor
formenclose
with nomathcolor
.  #1595 CommonHTML output: Properly scale elements with
fontfamily
specified.
TeX emulationÂ¶
 #1455 Fix
TeX.Environment()
to use the correct end environment.  #1464 Make sure
resetEquationNumbers
is always defined.  #1484 Mark accented operators as not having movable limits.
 #1485 Allow line breaks within
TeXAtom
elements  #1508 Surround
\middle
withOPEN
andCLOSE
TeXAtoms to match TeX spacing  #1509 Make delimiters (in particular arrows) symmetric for
\left
and\right
.  #1514 Donât unwrap rows when creating fenced elements.
 #1523 Donât copy environment into
array
environments.  #1537 mhchem: add config parameter to select mhchem v3.0.
 #1596 Prevent
\require{mhchem}
to override one already loaded.  #1551 Allow
<wbr>
in TeX code.  #1565 Handle
\+SPACE
in macro definitions.  #1569 Treat control sequences as a unit when matching a macro template.
 #1587 Make sure
trimSpaces()
doesnât remove tailing space in\+SPACE
.  #1602 Handle
\ref
properly when there is a<base>
tag.
AsciimathÂ¶
 asciimath/f649ba4 Add
newsymbol
command for adding a new symbol object
MathMLÂ¶
FontsÂ¶
 #1521 STIX fonts: Make left arrow use combining left arrow for accents.
 #1092 STIX fonts: Make
U+222B
(integral) stretchy.  #1154 STIX fonts: Remap

to variant form (with descender) and map variant to original form.  #1175 Use
U+007C
andU+2016
for delimiters rather thanU+2223
andU+2225
.  #1421 MathJax TeX fonts: Fix SVG font data for stretchy characters.
 #1418 Alias
U+2206
toU+0394
and remove incorrectU+2206
from SVG font files.  #1187 Make height and depth of minus match that of plus (needed for TeXlayout super/subscript algorithm to work properly), and adjust for that when it is used as an extender in stretchy characters.
 #1546 MathJax TeX fonts: Add stretchy data for
U+20D7
.
LocalizationÂ¶
 #1604 Updated locales thanks to the contributors at Translatewiki.net; activate locale for Zazaki.
APIsÂ¶
Misc.Â¶
 #1456 Prevent removal of DOM elements while MathJax is running from stopping processing, or to leaving duplicate math in place.
 #1524 Prevent preprocessors from adding duplicate preview elements.
 #1554 Safe extension: Add filtering of CSS styles like
padding
,margin
.  #1590 Set previews to have
display:none
.  #1591 Change
rev=
toV=
in cache breaking code.
Whatâs New in MathJax v2.6Â¶
MathJax v2.6 includes a number of new features, as well a more than 30 important bug fixes. The following are some of the highlights.
FeaturesÂ¶
 Improved CommonHTML output. The CommonHTML output now provides the same layout quality and MathML support as the HTMLCSS and SVG output. It is on average 40% faster than the other outputs and the markup it produces are identical on all browsers and thus can also be pregenerated on the server via MathJaxnode. The fast preview mechanism introduced in v2.5 continues to develop as a separate output as PreviewHTML and the fastpreview extension.
 Accessibility improvements. We thank the AT community for their guidance, support, and feedback in our efforts towards making MathJax completely accessible to all users.
 Screenreader compatibility. The new
AssistiveMML
extension enables compatibility with most MathMLcapable screenreaders by inserting visuallyhidden MathML alongside MathJaxâs visual output. See screenreader support for details on the expected behavior as well as background on the limitations due to lack of web standards and browser/OS technology.  Accesssible UI. We have improved the accessibility of the MathJax menu to enable assistive technology users to easily access its features, cf. MathJax UI.
 Screenreader compatibility. The new
 PlainSource Output. The new PlainSource output will revert the rendering back to the input format; in the case of MathML, the output will prefer TeX and AsciiMath from
<annotationxml>
elements. This helps with accessibility and copy&paste of document fragments.  Semislim MathJax repository for bower. You can now use
bower install components/MathJax
to install a fork of MathJax without PNG fonts. Many thanks to @minrk from the IPython/Jupyter team and to the team at components!  MathJax via npm. You can now use
npm install mathjax
to install a copy of MathJax without PNG fonts.  Deprecated: MMLorHTML extension. We have deprecated the
MMLorHTML
extension. For a detailed guide on configuring MathJax to choose different outputs on different browsers, please see Automatic Selection of the Output Processor for more information.
Numerous bugs and issues have also been resolved; for a detailed listing please check the release milestone.
InterfaceÂ¶
HTML/SVG/nativeMML displayÂ¶
 #1095 HTMLCSS output: prevent collapse of table borders.
 #596 SVG Output: Fix overlapping equation labels in SVG output
 #994 SVG Output: Change default
blacker
setting to 1.  #995 SVG output: fix baseline alignment issues.
 #995 SVG output: fix failure to scale all but the first glyph in a fraction when
useFontCache=false
.  #1035 PreviewHTML output: fix fractions formatting in WebKit and IE.
 #1233 SVG output: make maligngroup and malignmark produce no output.
 #1282 HTMLCSS output: reduce âbumpinessâ of focus outline.
 #1314 HTMLCSS output: prevent clipping of extremely long strings.
 #1316 SVG output: preserve nonbreaking space in
mtext
elements.  #1332 HTMLCSS output: fix width calculations for mrows with embellished operators that could stretch but donât actually.
TeX emulationÂ¶
 #567 Add macro for
overparen
andunderparen
to provide stretchy arcs above/below  #956 Simplify the
mhchem
extension to use multiscripts, cf. #1072.  #1028 Fix spacing in
\alignedat
.  #1194 Fix problem where automatic numbering affects
\binom
and friends.  #1199 Fix problem with dot delimiter not being recognized as a delimiter.
 #1224 Handle braces properly in text mode when looking for matching math delimiters.
 #1225 Fix
\operatorname
not ignoring\limits
that follow immediately after.  #1229 Fix wrong spacing of trailing binary operators.
 #1272 Fix spacing of
\eqnarray
environment.  #1295 Handle
scriptlevel
set on arrays via anmstyle
node (affects\smallmatrix
).  #1312 Improve heuristics for adding U+2061 (invisible function application).
AsciimathÂ¶
 asciimath/#31 Add support for
overparen
,underparen
to producemover
andmunder
constructs.  asciimath/#35 Add support for
bowtie
,ltimes
andrtimes
.  asciimath/#40 Improve parsing of brackets within brackets.
 asciimath/#43 Improve detection of nonmatrices.
MathMLÂ¶
 #1072 Rightjustify prescripts in
mmultiscript
elements (after clarification in MathML 3 editorsâ draft); cf. #956.  #1089 Fix
toMathML
from changing<maligngroup>
to<malign>
 #1188 Fix
mmultiscripts
with odd number of postscripts not rendering correctly.  #1231 Fix
<math>
element not being treated as an<mrow>
for embellished operator spacing.  #1233 Make
<maligngroup>
and<malignmark>
be selfclosing in MathML input.  #1238 Fix Content MathML extension not handling namespace prefixes.
 #1257 Improve
mml3.js
: better RTL support in HTMLCSS; improved IE/Edge compatibility.  #1323 Contentmathml extension: improve handling of empty Presentation MathML nodes.
FontsÂ¶
 #928 Add data for stretchy
U+2322 (FROWN)
,U+2323 (SMILE)
, and alsoU+2312 (ARC)
to be aliases for the top and bottom parentheses. This enables stretchy constructions; cf. also #567.  #1211 Fix web font detection for GyrePagella etc. in IE10+.
 #1251 Fix primes in STIXweb font being too small in SVG output.
LocalizationÂ¶
 #1248 Updated locales thanks to the contributors at Translatewiki.net; activate locales for Bulgarian, Sicilian, Lithuanian, and Laki.
Misc.Â¶
 #1074 Fix regression in v2.5 regarding MathPlayer on IE9.
 #1036 Improve CDN rollover behavior.
 #1085 Fix detection of Windows Phone mobile IE.
 #1155 Work around websites using user agent filtering
 #1173 Avoid warning message in debug mode.
 #1208 Fix CHTML preview from setting chunking parameters even when disabled.
 #1214 semislim official MathJax repository for bower; use
bower install components/MathJax
for a copy without PNG fonts. Special thanks to @minrk from the IPython/Jupyter team and to the team at components!  #1254 Improve examples in
/test
: add viewport meta tags, improve dynamic examples.  #1328 Add package.json for publishing on npm, excluding PNG fonts.
Whatâs New in MathJax v2.5Â¶
MathJax v2.5 includes a number of new features, as well a more than 70 important bug fixes. The following are some of the highlights.
FeaturesÂ¶
 Speed improvements. The HTMLCSS output performance was improved by 3040% (depending on content complexity, with higher gains in more complex content such as very long documents).
 New output for fast preview. The new CommonHTML output provides a rough but 10xfaster rendering. The
CHTMLpreview
extension will use this fast output as a preview mode for HTMLCSS or SVG output.  Improved Content MathML support. Content MathML is now fully supported via a new extension, in particular this allows customization of the conversion process.
 Improved elementary math support The experimental support for elementary math elements has been significantly improved special thanks to David Carlisle.
 NodeJS compatibility. Enable the implementation of a NodeJS API (released as MathJaxnode).
Numerous display bugs, linebreaking problems, and interface issues have been resolved; for a detailed listing please check the release milestone.
InterfaceÂ¶
 #834 Fix incorrect linewidth when zooming which can cause linebreaking problems.
 #918 Fix zoom box size in NativeMML output.
 #835 Fix zoom for equations extending beyond their bounding box.
 #893 Fix outdated ARIA values for HTMLCSS and SVG output.
 #860, #502 Preserve RDFa, microdata, aria labels, and other attributes in HTMLCSS and SVG output.
 #935 Escape special characters in TeX annotations.
 #912 Fix missing
mstyle
attributes intoMathML
output.  #971 Fix lost attributes when
toMathML
is restarted.
HTMLCSS/SVG/nativeMML displayÂ¶
 #863 Fix broken MathML preview in MathML preprocessor.
 #891 Fix deprecated regexp affecting mtable alignment.
 #323 Improve MathPlayer compatibility on Internet Explorer 10+.
 #826 Scale content in fallback fonts.
 #898 Fix invalid SVG output when using fallback characters.
 #800 Fix misplaced background color for stretched mphantom elements in SVG output.
 #490 Fix
\overline
issues in combination with textstyle limits.  #829 Implement
\delimitershortfall
,\delimiterfactor
.  #775 Fix lost text content in SVG output.
 #917 Fix cases of incorrect bounding boxes in HTMLCSS output.
 #807 Fix clipping of table columns in HTMLCSS output.
 #804 Fix cases of uneven subscripts.
 #944 Fix rendering error when scalingallmath of labeled equations.
 #930 Fix SVG output failure when
<math>
element has inline styles with border or padding.  #931 Fix baseline alignment in Safari 6.2/7.1/8.0.
 #937 Fix incorrect width in MathJax font data affecting underlining.
 #966 Fix SVG output overlapping when using prefix notation.
 #993 Add workaround for Native MathML in Gecko to reenable
mlabeledtr
etc.  #1002 Enable SVG output to inherit surrounding text color.
TeX emulationÂ¶
 #881 Allow
\newenvironment
to process optional parameters.  #889 remove extra space around some parenthesis constructs.
 #856 Recognize comma as decimal delimiter in units.
 #877 Fix bug related to multiple accent having different width.
 #832 Fix multline environment not being centered in HTMLCSS output.
 #776 Fix stretchy delimiters of
binom
andchoose
.  #900 Fix
\buildrel
getting TeX class ORD instead of REL.  #890 Enable px as dimension in
\\[...]
.  #901 Allow
\limits
in more cases and add errors for some cases of multiple subscripts.  #903 Allow
\hfill
to set alignment in matrices and arrays (for old fashioned TeX layout).  #902 Convert
\eqalignno
and\leqalignno
intomlabeledtr
.  #906 Allow comma separated parameters in
\mmlToken
.  #913 Allow attributes in
\mmlToken
whose defaults are false or blank.  #972 Fix autoload of the
color
extension.  #375 Add
\{
,\}
, and\\
to macros working within\text{}
etc.  #969 Fix incorrect spacing with some
\frac
constructs.  #982 Fix incorrect spacing in
aligned
environments.  #1013 Fix processing error caused by
'
in commutative diagrams usingAMScd.js
.  #1005 Add
wikipediatexvc.js
extension.
AsciimathÂ¶
 #851 Prevent leading space in quote from causing processing errors.
 #431 Fix handling of special characters in exponents.
 #741 Add underbrace macro.
 #857 Update AsciiMathML to 2.2; changes include improve entity handling, add triangle macro, map ast to asterisk, allow input of row vectors, allow lamda, switch phi/varphi mapping, add underbrace macro, handle empty nodes better, add vector norm macro, improve @ macro.
MathML HandlingÂ¶
 #847 Fix linebreaks in annotation elements.
 #805 Prevent empty annotation elements from causing math processing errors.
 #769 Update
indentshift
implementation to meet clarified MathML specification.  #768 Fix processing of percentage values for
indenshift
.  #839 Update inheritance of
displaystyle
inmtable
to meet clarified MathML specification.  #695 Allow Content MathML converion to be customized.
 #964 Move experimental support for elementary math and RTL to its own extension.
LocalizationÂ¶
 #979 Updated locales thanks to Translatewiki.net; activate locales for Scots and Southern Balochi.
APIsÂ¶
Whatâs New in MathJax v2.4Â¶
MathJax v2.4 is primarily a bug fix release. Over 80 display bugs, linebreaking problems, and interface issues have been resolved; for a detailed listing please check the release milestone. The following are some of the highlights.
InterfaceÂ¶
 #240 prevent two
identical uses of
\tag
to cause identical element id.  #348 fix
Show Math as
window crashing in IE8.  #559 remove user cookie configuration.
 #821 resolve cookierelated error in sandboxed iframes on Chrome.
 #623 fix localization on IE6â8.
 #685 fix MathMenu
and MathZoom extensions loading when
showMathMenu
set to false.  #734 compress menu PNGs.
 #814 add TeX/Asciimath as annotationxml to MathML output.
LinebreakingÂ¶
HTMLCSS/SVG/nativeMML displayÂ¶
 #387 fix missing
styling for
merror
in SVG output.  #391 fix linebreaking within fractions in SVG output.
 #423,
#460,
#749,
#824 Zoom
improvements: fix zoom box overflow in mobile Safari, fix zoom box
for widths in
px
, fix zoom box overlay in Chrome.  #470 fix AMScd rendering in native MathML output.
 #473 override
textident
of enclosing paragraph.  #476 improve big /Downarrows.
 #580 prevent CSS from overriding MathJaxâs em/ex detection.
 #619 fix: vertical stretching arrows in table cells can cause extra space between rows.
 #699 fix table column spacing in NativeMathML output on Firefox.
 #701 fix clipping of stretched delimiters in HTMLCSS output.
 #703 fix math axis not scaled in script sizes.
 #715 fix hat
^
too large with local STIX fonts in HTMLCSS.  #744 improve root symbol rendering in everchanging but always buggy Chrome.
 #770 add support for dotted borders to SVG output.
 #820 fix integral overlapping with superscript using STIX fonts.
 #813 remove some redundant fixes for Native MML on Firefox 29+.
TeX emulationÂ¶
 #367 prevent
\mmltoken
from creatingannotation
elements.  #377 improve
handling.  #389 fix
operating spacing in
\split
and\multiline
environments.  #477,
#459 add
\textsf
and\texttt
macros and enablemtextInheritFont
for them.  #547 fix misalignment in nested fractions in HTMLCSS and SVG output.
 #624 fix AMScd on IE6â7.
 #632 fix
\Big
not accepting delimiters in braces  #667 fix loop in
bbox
.  #691 enable
multiple
\label
in multiline environments likealign
,eqnarray
, andgather
.  #719 empty array lines should get correct height.
 #739 fix
\operatorname*
and\DeclareMathOperator*
.  #746 fix spacing
for
\left ... \right
.  #793 allow
unmatched groups in
\begin
\end` substitutions.  #794 fix spacing
for
\bmod
.
AsciimathÂ¶
MathML HandlingÂ¶
 #328 remove
_moz*
attributes and improve MathML processing in Firefox.  #460 fix default
value of
mo@symmetric
.  #478 make
mfenced
element equivalent to its expanded form  #561 implement
menclose
notationphaseorangle
.  #578 fix quote
attributes for
ms
elements.  #614 handle
nested
math
elements better.  #684 fix handling of double primes in superscripts.
 #691, #692, update Content MathML extension: fix IE11, plus with leading negative number.
 #763 fix
mglyph
elements rendering too small.
FontsÂ¶
 #501 add workaround for broken Fedora STIX fonts configuration.
 #517 reset min/max width for MathJax font test.
 #576 improve font matching.
 #615 check validity of font names.
 #681 fix MathJax font test breaking responsive layout.
 #711 detect new webfonts when locally installed.
 #697 fix bolditalic for new webfonts.
LocalizationÂ¶
Misc.Â¶
 #586 add all
input processors to
default.js
.  #658 fix IE 11 recognized as Firefox.
 #730 ignore rendering targets that have been removed from document.
 #735 work around webfont bug in Chrome 32+.
 #738 improve workaround for fixed position bug in old IE versions.
 #737 add thirdparty path variable (for centralized custom extension hosting).
Whatâs New in MathJax v2.3Â¶
MathJax v2.3 includes a number of new features, as well a more than 30 important bug fixes.
Features:Â¶
 New webfonts: MathJax v2.3 adds new webfonts for
STIX
,Asana Math
,Neo Euler
,Gyre Pagella
,Gyre Termes
, andLatin Modern
.  Localization improvements: MathJax has been accepted into TranslateWiki.net. Thanks to the TWN community we could add 12 complete and over 20 partial translations.
 MathML improvements: MathJaxâs âShow Math asâ menu will now expose
the MathML annotation features. There are also two new preview
options for the MathML input mode:
mathml
(now the default), which uses the original MathML as a preview, andaltimage
, which uses the<math>
elementâsaltimg
(if any) for the preview.  Miscellaneous improvements: A new extension
MatchWebFonts
improves the interaction with the surrounding content when that uses a webfont. A new configuration method allows configurations to be specified using a regular JavaScript variablewindow.MathJax
.  MathJax is now available as a Bower package thanks to community contributions.
TeX input:Â¶
 Prevent the TeX preprocessor from rendering TeX in MathML annotationxml elements. (Issue #484)
 Fix sizing issue in
cases
environment (Issue #485)
Fonts:Â¶
 Fix blockletter capital I (U+2111) appearing as J in MathJax font (Issue #555)
MathML:Â¶
 Improved workarounds for MathML output on WebKit (Issue #482)
 Handle empty
multiscript
,mlabeledtr
, and other nodes in Native MathML output (Issue #486)  Replace nonstandard
MJXarrow
class by newmenclose
notation (Issue #481)  Fix incorrect widths in Firefox MathML output (Issue #558)
 Fix display math not being centered in XHTML (Issue #650)
 Fix problem when LaTeX code appears in
annotation
node (Issue #484)
HTMLCSS/SVG outputÂ¶
 Fix MathJax not rendering in Chrome when sessionStorage is disabled (Issue #584)
 Fix
\mathchoice
error with linebreaking in SVG output (Issue #604)  Fix poor linebreaking of âflatâ MathML with unmatched parentheses (Issue #523)
Interface:Â¶
 Fix DoubleClick zoom trigger (Issue #590)
Miscellaneous:Â¶
 Localization: improved fallbacks for IETF tags (Issue #492)
 Localization: support RTL in messages (Issue #627)
 Improve PNG compression (Issue #44)
Whatâs New in MathJax v2.2Â¶
MathJax v2.2 includes a number of new features, as well a more than 40 important bug fixes.
Features:Â¶
 Localization of MathJax user interface. (German and French translations currently available in addition to English.)
 Commutative diagrams via the
AMScd
extension.  New Safemode extension that allows you to restrict potentially dangerous features of MathJax when it is used in a shared environment (e.g., href to javascript, styles and classes, etc.)
 Improve MathML rendering for
mfenced
andmlabeldtr
elements in browsers that donât support them well.  Experimental Content MathML support.
TeX input:Â¶
 Avoid potential infinite loops in
\mathchoice
constructs. (Issue #373)  Add error message when an evironment closes with unbalanced braces. (Issue #454)
 Allow spaces in the RGB, rgb, and greyscale color specifications. (Issue #446)
 Process
\$
in\text
arguements. (ssue #349)  Preserve spaces within
\verb
arguments. (Issue #381)  Make
\smallfrown
and\smallsmile
come from the variant font so they have the correct size. (Issue #436)  Make the input TeX jax generate mrow plus mo elements rather than mfenced elements (for better compatibility with native MathML implementations).
 Make
\big
and its relatives use script or scriptscript fonts (although size is still absolute, as it is in TeX) so that it balances the text weight in scripts. (Issue #350)  Convert true and false attributes to booleans in
\mmlToken
. (Issue #451)
AsciiMath:Â¶
 Rename AsciiMath config option from
decimal
todecimalsign
. (Issue #384)
Fonts:Â¶
 Add Greek Delta to SVG fonts. (Issue #347)
 Fix monospace space character to be the same width as the other monospace characters. (Issue #380)
 Better handling of unknown or invalid values for mathvariant or values not supported by generic fonts.
MathML:Â¶
 Handle empty child nodes better.
 Improved MathML rendering for
mfenced
andmlabeldtr
elements.  Ignore
linebreak
attribute onmspace
when dimensional attributes are set. (Issue #388)  Implement
rowspacing
/columnspacing
formtable
in native MathML output in Firefox using cell padding.
HTMLCSS/SVG outputÂ¶
 Allow
\color
to override link color in SVG output. (Issue #427)  Add minwidth to displayed equations with labels so that they cause their containers to have nonzero width (like when they are in a table cell or an absolutlye positioned element). (Issue #428)
 Fix a processing error with elements that contain hyperlinks. (Issue #364)
 Try to isolate MathJax from CSS transitions. (Issue #449)
 Go back to using emâs (rounded to nearest pixel) for Chrome. Rounding makes the placement work more reliably, while still being in relative units. (Issue #443)
 Prevent error when math contains characters outside of the MathJax fonts. (Issue #441)
 Make final math size be in relative units so that it prints even if print media has a different font size. (Issue #386)
 Donât scale line thickness for
menclose
elements (so lines wonât disapear in scripts). (Issue #414)  Fix
fontdata.js
to allow it to be included in combined configuration files. (Issue #413)  Makes mathbased tooltips be spaced properly when rendered. (Issue #412)
 Fix Math Processing Error when
&ApplyFunction
; is used without preceeding content. (Issue #410)  Fix a problem using an empty table as a super or subscript. (Issue #392)
 Handle the case where selection in maction is invalid or out of range. (Issue #365)
 Add a pixel extra around the SVG output to accommodate antialiasing pixels. (Issue #383)
 Fix Math Processing Error for
msubsup
/msub
/msup
elements.  Limit the number of repetition to build stretchy chars in HTMLCSS. (Issue #366)
 Fix Math Processing Error in
mmultiscripts
/menclose
. (Issue 362)
Interface:Â¶
 Make zoom work properly with expressions that have full width (e.g., tagged equations).
 Handle zooming when it is inside a scrollable element when it is not the main body element. (Issue #435)
 Update math processing errors to include original format and actual error message in the âShow Math Asâ menu. (Issue #450)
 Add a Help dialog box (rather than link to mathjax.org).
 Remove the v1.0 configuration warning. (Issue #445)
 Trap errors while saving cookies (and go on silently). (Issue #374)
 Fix typo in IE warning message. (Issue #397)
 Use UA string sniffing for identifying Firefox and handle detecting mobile versions better.
 Make MathML source show nonBMP characters properly. (Issue #361)
 Make tool tips appear above zoom boxes. (Issue #351)
Miscellaneous:Â¶
 Allow preview for preprocessors to be just a plain string (rather
than requiring
[string]
).  Remap backtick to backquote. (Issue #402)
 Handle script tags in
HTML.Element()
so they work in IE. (Issue #342)  Add the
MathJax_Preview
class to theignoreClass
list so thattex2jax
andasciimath2jax
wonât process previews accidentally. (Issue #378)  Fix processing errors with various table and menclose attributes. (Issue #367)
 Use
hasOwnProperty()
when checking file specification objects (prevents problems whenObject.prototype
has been modified). (Issue #352)
Whatâs New in MathJax v2.1Â¶
MathJax v2.1 is primarily a bugfix release. Numerous display bugs, linebreaking problems, and interface issues have been resolved. The following lists indicate the majority of the bugs that have been fixed for this release.
InterfaceÂ¶
 Make NativeMML output properly handle iOS doubletapandhold, and issue warning message when switching to NativeMML output.
 Use
scrollIntoView
to handlepositionToHash
rather than setting the document location to prevent pages from refreshing after MathJax finishes processing the math.  Handle positioning to a hash URL when the link is to an element within SVG output.
 Make
href
âs work in SVG mode in all browsers.  Fix problem with opening the âShow Math Asâ window in WebKit (affected Chrome 18, and Safari 5.1.7).
 Use MathJax message area rather than window status line for
maction
withactiontype='statusline'
to avoid security restrictions in some browsers.  Fix issue where zoom box for math that has been wrapped to the beginning of a line would be positioned at the end of the previous line.
 Fix a problem where IE would try to typset the page before it was completely available, causing it to not typeset all the math on the page (or in some cases any of the math).
 Allow decimal scale values in the dialog for setting the scale.
 Fix SVG output so that setting the scale will rescale the existing mathematics.
 Add close button to About box and donât make clicking box close it (only clicking button).
 Make About box show âwoff or otfâ when otf fonts are used (since both are requested).
 Have output jax properly skip math when the input jax has had an internal failure and so didnât produce any element jax.
 Produce
MathJax.Hub
signal when[Math Processing Error]
is generated.
LinebreakingÂ¶
 Fix problem with SVG output disappearing during line breaks when equation numbers are also present.
 Fix problem with potential infinite loop when an
<mspace>
is an embellished operator that causes a linebreak to occur.  Allow line breaks within the base of
<msubsup>
to work so that the super and subscripts stay with the last line of the base.  Fix
<mfenced>
so that when it contains a line break the delimiters and separators are not lost.  Allow line breaks at delimiters and separators in <mfenced> elements.
 Fix issue with line breaking where some lines were going over the maximum width.
 Fix problem with line breaking inside
<semantics>
elements.  Fix problem with line breaking where the incorrect width was being used to determine breakpoint penalties, so some long lines were not being broken.
HTMLCSS/SVG displayÂ¶
 Fix several Chrome alignment and sizing issues, including problems with horizontal lines at the tops of roots, fraction bars being too long, etc.
 Resolve a problem with how much space is reserved for math equations when a minimum font size is set in the browser.
 Force final math span to be remeasured so that we are sure the container is the right size.
 Fix alignment problem in
<msubsup>
.  Fix processing error when rowalign has a bad value.
 Fix a vertical placement problem with stretched elements in mtables in HTMLCSS, and improve performace for placeing the extension characters.
 Handle spacing for U+2061 (function apply) better.
 Better handling of primes and other pseudo scripts in HTMLCSS and SVG output.
 Fixed a problem with
<mmultiscripts>
in SVG mode that caused processing error messages.  Fix misplaced
\vec
arrows in Opera and IE.  Make
<mi>
with more than one letter havetexClass
OP rather than ORD in certain cases so it will space as a function.  Make HTML snippet handler accept a string as contents, even if not enclosed in braces.
 Fix spacing for functions that have powers (e.g.,
\sin^2 x
).  Fix problem with SVG handling of
\liminf
and\limsup
where the second half of the function name was dropped.  Fixed a problem where HTMLCSS and SVG output could leave partial equations in the DOM when the equation processing was interrupted to load a file.
 Fix problems with
<mtable>
,<ms>
, and<mmultiscripts>
which werenât handling styles.  Make column widths and row heights take minsize into account in
<mtable>
.  Fix typo in
handlefloats.js
that caused it to not compile.  Fix problem in HTMLCSS output with
<msubsup>
when super or subscript has explicit style.