Loading and Configuring MathJax¶
You load MathJax into a web page by including its main JavaScript file
into the page. That is done via a <script>
tag that links to the
MathJax.js
file. To do that, place the following line in the <head>
section of your document:
<script type="text/javascript" src="pathtoMathJax/MathJax.js"></script>
where pathtoMathJax
is replaced by the URL of the copy of MathJax
that you are loading. For example, if you are using the MathJax
distributed network service, the tag might be
<script type="text/javascript"
src="https://example.com/MathJax.js">
</script>
If you have installed MathJax yourself, pathtoMathJax
will be the
location of MathJax on your server, or (if you are using MathJax locally
rather than through a server) the location of that directory on your hard
disk. For example, if the MathJax directory is at the top level of your
web server’s directory hierarchy, you might use
<script type="text/javascript" src="/MathJax/MathJax.js"></script>
to load MathJax.
If you install MathJax on a server in a domain that is different from the one containing the page that will load MathJax, then there are issues involved in doing so that you need to take into consideration. See the Notes About Shared Servers for more details.
When you load MathJax, it is common to request a specific configuration file as discussed in the section on Using a Configuration File below, and in more detail in the Common Configurations section. A typical invocation of MathJax would be
<script type="text/javascript"
src="https://example.com/MathJax.js?config=TeXAMSMML_HTMLorMML">
</script>
which loads MathJax with a configuration file that includes everything you need in order to enter mathematics in either TeX, LaTeX, or MathML notation, and produces output using MathML if the browser supports that well enough, or HTMLwithCSS otherwise. If you don’t load an explicit configuration file, you will need to include an inline configuration block in order to tell MathJax how to read and display the mathematics on your pages. See the section below on Using Inline Configuration Options for details.
It is best to load MathJax in the document’s <head>
block, but it
is also possible to load MathJax into the <body>
section, if
needed. If you do this, load it as early as possible, as
MathJax will begin to load its components as soon as it is included in
the page, and that will help speed up the processing of the
mathematics on your page. MathJax does expect there to be a
<head>
section to the document, however, so be sure there is one
if you are loading MathJax in the <body>
.
It is also possible to load MathJax dynamically after the page has been prepared, for example, via a GreaseMonkey script, or using a specially prepared bookmarklet. This is an advanced topic, however; see Loading MathJax Dynamically for more details.
Loading MathJax from a CDN¶
MathJax is available as a web service from various free CDN providers, so you can obtain MathJax from there without needing to install it on your own server.
Warning
We retired our selfhosted CDN at cdn.mathjax.org in April, 2017.
We recommend using cdnjs.com which uses the same provider.
The use of cdn.mathjax.org
was governed by its terms of service.
A CDN is part of a distributed “cloud” network, so it is handled by servers around the world. That means that you should get access to a server geographically near you, for a fast, reliable connection.
Most CDN services offer several versions of MathJax. For example, cdnjs hosts all tagged versions since v1.1 so you can link to the version you prefer.
Note
There is currently no provider who offers a rolling release link, i.e, a link that updates to each newer version of MathJax upon release.
The URL that you use to obtain MathJax determines the version that you get. For example, cdnjs uses a URL that includes the version tag so you can load the current version via
https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.4.0/MathJax.js # the 2.4.0 release
Prereleases are also available on cdnjs.
Note
If you wish to use the development version of MathJax, you will need to install your own copy; see Installing and Testing MathJax for information on how to do that.
If you wish to use a CDN but use your own configuration file rather than one of the predefined ones, see the information at the end of the Using a Local Configuration File section below.
Configuring MathJax¶
There are two ways to configure MathJax: via a configuration file, or by including configuration commands within the web page itself. These can be used independently, or in combination. For example, you can load a main predefined configuration file, but include inline commands to adjust the configuration to your needs.
Note that you must use at least one of these two forms of configuration.
Unlike MathJax v1.0, version 1.1 and higher does not load a default
configuration file. If you have been using version 1.0’s
config/MathJax.js
for your configuration, you will need to load that
configuration file explicitly via a config
parameter, as described
below.
Using a configuration file¶
The first way to configure MathJax is to use a configuration file.
MathJax comes with a number of predefined configuration files, which are
stored in the MathJax/config
directory. Among these are the following

default.js
A file that contains nearly all the configuration options with comments describing them, which you can edit to suit your needs.

TeXAMSMML_HTMLorMML.js
Allows math to be specified in TeX, LaTeX, or MathML notation, with the AMSmath and AMSsymbols packages included, producing output using MathML if the browser supports it sufficiently, and HTMLwithCSS otherwise.

TeXAMS_HTML.js
Allows math to be specified in TeX or LaTeX notation, with the AMSmath and AMSsymbols packages included, and produces output using the HTMLCSS output processor.

MML_HTMLorMML.js
Allows math to be specified using MathML notation, and produces MathML output if the browser supports it sufficiently, or HTMLCSS output otherwise.

AM_HTMLorMML.js
Allows math to be specified using AsciiMath notation, producing output in MathML if the browser supports it sufficiently, or as HTMLwithCSS otherwise.

TeXAMSMML_SVG.js
Allows math to be specified in TeX, LaTeX, or MathML notation, with the AMSmath and AMSsymbols packages included, producing output using SVG.

TeXMMLAM_HTMLorMML.js
Allows math to be specified in TeX, LaTeX, MathML, or AsciiMath notation, with the AMSmath and AMSsymbols packages included, producing output using MathML if the browser supports it sufficiently, and HTMLwithCSS otherwise.
The first of these is a file that you can edit to suit your needs. It contains nearly all the configuration options that MathJax allows, and has comments explaining them. The others are what are called combined configuration files, which not only configure MathJax, but also preload the various files that the configuration requires. (The contents of these files are explained in more detail in the Common Configurations section.)
Usually, MathJax loads its components only when they are needed, but each component will require a separate file to be loaded, and that can cause delays before the mathematics is displayed. The combined configuration files load the majority of the needed files all as one large file, reducing the number of network requests that are needed. That means you will probably be getting the components that MathJax needs faster than you would without the combined file, but you may be loading components that are never actually used; that is the trade off.
Each of the combined configuration files comes in two flavors: the ones
listed above, which only configure the output processors but don’t include
the main code, and a “full” version, that also includes the complete
output processors. For example, with TeXAMS_HTML.js
and
TeXAMS_HTMLfull.js
, the latter includes the complete HTMLCSS output
processor. The “full” configuration files are substantially larger (on
the order of 70KB more), so you need to decide whether it is worth loading the
full configuration for your pages.
If most of your pages include mathematics, then it is to your advantage to load the full version, but if you are including MathJax in a theme file for a blog or wiki that only includes mathematics occasionally, then perhaps it is better to use the standard configuration instead, in which case the output processors are only loaded when they are actually needed, saving the loading of 70KB for pages that don’t. Of course, if your server is configured to compress the files it sends, the difference between the two is considerably reduced. Furthermore, most browsers will cache the javascript they receive, so the download cost should only occur on the first page a user views, so it may be best to use the “full” version after all. Note, however, that mobile devices sometimes have limits on the size of files that they cache, so they may be forced to download the configuration on every page. You need to keep these issues in mind as you decide on which configuration to use.
To load a configuration file, use config=filename
(where filename
is one of the names above without the .js
) as a parameter to the URL of
the MathJax.js
file. For example
<script type="text/javascript"
src="https://example.com/MathJax.js?config=TeXAMSMML_HTMLorMML">
</script>
loads the config/TeXAMSMML_HTMLorMML.js
configuration file from the
MathJax distributed network service.
You can include more than one configuration file by separating them with
commas. For example, if you have a locally defined configuration file
called MathJax/config/local/local.js
that modifies the settings for the
TeXAMS_HML
configuration, defines some new TeX macros, and so on, you
can use
<script type="text/javascript"
src="pathtoMathJax/MathJax.js?config=TeXAMS_HTML,local/local">
</script>
to first load the main configuration, then the local modifications.
Using a local configuration file with a cdn¶
You can load MathJax from a cdn server but still use a
configuration from your own local server. For example, suppose you
have a configuration file called local.js
on your own server, in a
directory called MathJax/config/local
. Then you can load MathJax
from a cdn and still use your configuration file as follows:
<script type="text/javascript"
src="https://example.com/MathJax.js?config=TeXAMS_HTML,http://myserver.com/MathJax/config/local/local.js">
</script>
Because the local.js
file is not on a cdn server, you must give
the complete URL to the local configuration file. Note that you also
have to edit the loadComplete()
call that is at the bottom of
the configuration file to change it from
[MathJax]/config/local/local.js
to the complete URL as you give it
in the config
parameter. In the example above, it would be
MathJax.Ajax.loadComplete("http://myserver.com/MathJax/config/local/local.js");
That is because the [MathJax]
in the original URL refers to the
root directory where MathJax.js
was loaded, which is on a cdn,
not your local server, and so you need to tell MathJax the actual
location of your configuration file.
Using inline configuration options¶
The second way to configure MathJax is through inline configuration,
which puts the configuration options within the web page itself. The use
of inline configuration with MathJax requires two separate <script>
tags: one for specifying the configuration settings and one for loading of
MathJax. Because MathJax starts its configuration process as soon as it is
loaded, the configuration script must come before the script tag that
loads MathJax.js
itself. You do this by including a <script>
with
type="text/xmathjaxconfig"
whose content will be run when
MathJax performs its configuration. Generally, this script will
include a MathJax.Hub.Config()
call to perform MathJax
configuration, but it can also include other MathJax commands, such as
registering signal actions, or any JavaScript commands that you want.
You can have as many such script tags as you need, and MathJax will
process them in the order in which they appear in the document.
For instance,
<script type="text/xmathjaxconfig">
MathJax.Hub.Config({
extensions: ["tex2jax.js"],
jax: ["input/TeX", "output/HTMLCSS"],
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
processEscapes: true
},
"HTMLCSS": { availableFonts: ["TeX"] }
});
</script>
<script type="text/javascript" src="pathtoMathJax/MathJax.js">
</script>
This example includes the tex2jax preprocessor and configures it to use
both the standard TeX and LaTeX math delimiters. It uses
the TeX input processor and the HTMLCSS output processor, and forces the
HTMLCSS processor to use the TeX fonts rather than other locally installed
fonts (e.g., STIX fonts). See the configuration options section (or the comments in the config/default.js
file) for more information about the configuration options that you can
include in the MathJax.Hub.Config()
call. This
configuration does not load any predefined configuration file.
Note that you can combine inline configuration with filebased
configuration; simply include text/xmathjaxconfig
scripts as above,
but also include config=filename
when you load the MathJax.js
file. For example, the tex2jax preprocessor does not enable the TeX
singledollar inline math delimiters by default. You can load one of the
predefined configuration files that includes the TeX preprocessor, and use
an inline configuration block to enable the singledollar signs, as
in this example:
<script type="text/xmathjaxconfig">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true
}
});
</script>
<script type="text/javascript" src="pathtoMathJax/MathJax.js?config=TeXAMS_HTML">
</script>
Starting with MathJax version 2.3, it is possible to set window.MathJax
to
a configuration object in any Javascript code before MathJax’s startup.
MathJax will then use that object for its initial configuration. For instance
the previous example becomes:
<script type="text/javascript">
window.MathJax = {
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true
}
};
</script>
<script type="text/javascript" src="pathtoMathJax/MathJax.js?config=TeXAMS_HTML">
</script>
Similarly to text/xmathjaxconfig
, you can enter arbitrary code to execute
during the configuration phase. You just need to put that code in an
AuthorInit
function:
<script type="text/javascript">
window.MathJax = {
AuthorInit: function () {
... initialization code ...
}
};
</script>
Note that this initialization code runs before the
MathJax.Hub.queue
is set up, so if you want to queue additional
actions during the AuthorInit function, use
<script type="text/javascript">
window.MathJax = {
AuthorInit: function () {
MathJax.Hub.Register.StartupHook("Begin",function () {
MathJax.Hub.Queue(
... your actions here ...
)
});
}
};
</script>
Configuring MathJax after it is loaded¶
Because MathJax begins its configuration process immediately after it is
loaded (so that it can start loading files as quickly as it can), the
configuration blocks for MathJax must come before MathJax.js
is loaded,
so they will be available to MathJax when it starts up. There are
situations, however, when you might want to put off configuring MathJax
until later in the page.
One such situation is when you have a site that loads MathJax as part of a
theme or template, but want to be able to modify the configuration on
specific pages of the site. To accomplish this, you need to ask MathJax
to delay its startup configuration until some later time. MathJax uses
the delayStartupUntil
parameter to control the timing of the startup
sequence. By default, it is set to none
, meaning there is no delay
and MathJax starts configuration right away.
You can set delayStartupUntil=onload
in order to prevent MathJax from
continuing its startup process until the page’s onLoad handler fires. This
allows MathJax to find the text/xmathjaxconfig
blocks that occur
anywhere on the page, not just the ones that appear above the <script>
that loads MathJax.js
. It also means that MathJax will not begin
loading any of the files that it needs until then as well, which may delay
the displaying of your mathematics, since the onLoad handler doesn’t
execute until all the images and other media are available. (If you have
used a combined configuration file, however, it already includes all the
main files that MathJax needs, so there is not much loss in delaying the
startup.)
You can set delayStartupUntil=configured
in order to delay the
startup configuration until the MathJax.Hub.Configured()
method is called. This allows you to delay startup until later on the
page, but then restart the MathJax configuration process as soon as
possible rather than waiting for the entire page to load. For
example, you could use
<script type="text/javascript"
src="pathtoMathJax/MathJax.js?config=TeXAMSMML_HTMLorMML&delayStartupUntil=configured">
</script>
in your theme’s header file, and
<script type="text/javascript">
MathJax.Hub.Configured()
</script>
in its footer, so that MathJax will delay setting up until the footer
is reached, but will not have to wait until images and other files are
loaded. In this way, if you have text/xmathjaxconfig
script
tags within the main body of the document, MathJax will read and
process those before continuing its startup. In this way you can use
a default configuration that can be modified on a pagebypage basis.
Note that MathJax.Hub.Configured()
is not called by MathJax;
you must make that call somewhere within the page yourself after the
configuration blocks are set up. If you do not execute this function,
MathJax will not process any of the math on the page.
Details of the MathJax configuration process¶
Since there are a number of different ways to configure MathJax, it is important to know how they interact. The configuration actions are the following:
 Execute
AuthorInit()
from inlineMathJax = {...}
.  Process any configuration file explicitly specified as a script parameter via config=.
 Perform author configuration from inline
MathJax = {...}
 Process the inline script body (deprecated), if present.
 If delayed startup is requested, wait for the indicated signal.
 Process
text/xmathjaxconfig
config blocks.  Process any config files queued in the configuration’s config array by earlier config code.
Note that text/xmathjaxconfig
script blocks must either precede
the MathJax.js
script element, or you must request a delayed
startup. Otherwise, blocks that follow the MathJax.js
script
element may or may not be available when MathJax runs, and
browserdependent erratic behavior will result. Similarly,
window.MathJax
must be created before MathJax.js
is loaded.
If you set the MathJax
variable afterward, you will disable
MathJax entirely!