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 in-line and displayed math for the TeX input
component whether the TeX component was loaded individually, or as
part of the tex-chtml
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]
To jump start using jsdelivr
, you accomplish the first two steps by putting
<script type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.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 tex-mml-chtml.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 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
tex-mml-chtml.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
automatically, 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 automatically, so you can use
<script type="text/javascript" id="MathJax-script" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.0.0/es5/latest?tex-mml-chtml.js">
</script>
to obtain the latest (3.x.x) version of the tex-mml-chtml
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="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@3.0.0/es5/tex-mml-chtml.js">
</script>
will always load version 3.0.0 of the tex-mml-chtml.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="MathJax-script" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.0.0/es5/tex-mml-chtml.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 tex-mml-chtml.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
in-line 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 in-line 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="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
</script>
configures MathJax’s TeX input component to use $...$
and
\(...\)
as delimiters for inline-math (this enabling single
dollar signs as math delimiters), and then loads the tex-chtml.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 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.