Putting mathematics on the Web with MathJax

Version: July 7, 2011

What is MathJax?

MathJax is an open source JavaScript display engine for mathematics that works in virtually all modern web browsers including those on tablets and smartphones. For browsers without native MathML implementations, MathJax bridges the gap and offers a consistent interface for both users and software applications across viewing devices. MathJax can be configured to use native MathML rendering when available, allowing readers with MathML-enabled browsers to use that built-in functionality while providing an alternative to others. MathJax supports Presentational MathML, and also works with LaTeX input.

MathJax features advanced functionality beyond displaying formulas to make mathematics available to users and computers. Right-clicking on an equation opens up the MathJax menu, which offers the possibility to copy MathML code to the clipboard for pasting into other MathML-aware applications. For software applications, MathJax provides a rich API that can be used to access mathematical content. MathJax also helps to make mathematics better accessible to readers with print disabilities by supporting various zoom levels, and by working together with assistive technology to speak math aloud.

Using MathJax on web pages

1. Loading MathJax

The preferred way to use MathJax on a web page is by linking to the publicly available MathJax Content Delivery Network (CDN). This can be done by adding the following code snippet into the HTML header block (the code between <head> and </head> of your HTML or XHTML document:


  <script type="text/javascript"
 
     src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
 
  </script>


  <script type="text/javascript"
 
     src="https://d3eoax9i5htok0.cloudfront.net/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
 
  </script>

Currently, the Amazon Cloudfront service used by the MathJax CDN does not support the use of a more readable names for secure connections. However, this address is stable and safe to use.

Alternatively, it is possible to installl MathJax on a web server and use that local installation instead of the CDN. Instructions for setting up a local installation are available at the MathJax homepage.

2. Including MathML

With the link to MathJax in the HTML header in place, MathJax will recognize and render MathML elements that are included in the document with the standard <math> tags. A minimal example of a fully functional HTML page with embedded MathML using MathJax from the CDN could be the following:


<!DOCTYPE html>
 
<html>
 
<head>
 
  <script type="text/javascript"
 
     src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
 
  </script>
 
</head>
 
<body>
 
Let's consider
<math><mi>a</mi><mo>≠</mo><mn>0</mn></math>.
 
</body>
 
</html>

There are some things to keep in mind when using MathJax to display MathML in HTML pages:

Configuration options

MathJax is organized in a modular way and it is important to configure it correctly and load all the relevant modules. Configuration can be done through a configuration file, by including configuration commands in the HTML document, or a combination of the two. A number of preset configurations are available, and these can be further customized if desired.

To use MathJax with HTML documents including MathML, both the MathML input and MathML output modules need to be loaded. This will be done automatically by using the preset configuration TeX-AMS-MML_HTMLorMML.js, as in the above examples. For more information and instructions on customizing your configuration, please refer to the documentation on the MathJax website.

More information

More information can be found on the MathJax homepage at mathjax.org. Specific resources include: