Getting Started with MathJax Components — MathJax 4.0 documentation (original) (raw)

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 these 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 combined 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:

  1. Include a MathJax configuration in your page (this may be optional in some cases).
  2. Link to the CDN copy of MathJax in the web pages that are to include mathematics.
  3. 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

MathJax no longer provides a means of obtaining the latest version itself. This used to be done by loading the latest.js file, but that has been removed in version 4.

The following are some of the CDNs that offer MathJax:

To jump start using jsdelivr, you accomplish the first two steps by putting

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 4.x.y 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 onConfiguring 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, becausejsdelivr offers the mathjax@4 notation for obtaining thetex-mml-chtml.js file from the latest version (4.x.y) available on the CDN.

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:

will always load version 4.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:

to get the same file.

Browser Compatibility

MathJax supports all modern browsers (Chrome, Safari, Firefox, Edge), and most mobile browsers. We no longer test MathJax with IE11, so you should not expect it to work with any version of Internet Explorer. We used to recommend loading the polyfill library in order to help MathJax work with older browsers, but that is not necessary for modern browsers, and we no longer recommend it.

Warning

The original polyfill website was purchased by a Chinese company in 2024, and has been used to inject malware into pages that use it. You should NOT use the polyfill.io library any longer, and should either remove the reference entirely, or switch to a link from another source. See this post for more details.

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 50forthefirstone,and50 for the first one, and 50forthefirstone,and40 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

configures MathJax’s TeX input component to add $...$ as inline-math delimiters in addition to the default \(...\)delimiters (thus 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 instructions for Configuring MathJax for more details, and the section on MathJax Configuration Options 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 in your web page, and you should be able to use MathJax to write web pages that include mathematics. At this point, you can start making pages that contain mathematical content!

You could 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 MathJax in Dynamic Content, 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.