MathJax

The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

MathJax is a JavaScript display engine for mathematics that works in all browsers. It is able to parse TeX input in html files to produce svg output, amongst other supported formats. The higher-level Jupyter notebook depends on MathJax and other modules for plotting, running interactive code, etc.

MathJax can easily be embedded on any website to typeset your TeX. It is possible to quickly integrate MathJax with a distributed network service, see here for the currently available CDN.

This article assumes you want a hard copy of MathJax on your system.

Installation and Configuration

Install mathjax from the official repositories.

Local Usage

To have MathJax parse the TeX code in ~/equations.html and produce SVG output:

<head>
    ...
    <script src="/usr/share/mathjax/MathJax.js?config=TeX-AMS_SVG"></script>
    ...
</head>

Do not forget to include a configuration query string to tell MathJax about your desired i/o formats.

You can also configure MathJax inline, see here for more details and configuration options.

Your browser should now render the symbols at file:///home/user/equations.html.

Note that the TeX delimiters MathJax uses by default are $ ... $ for inline math and \[ ... \] , $$ ... $$ for outline math.

Server Usage

In order to serve your clients with MathJax processed documents, you need your scripts to access its main file: /usr/share/mathjax/MathJax.js.

Let us assume the server's root directory is set to /srv/http/, creating symlinks will grant your scripts access to the installed package:

$ cp -rs /usr/share/mathjax /srv/http/mathjax

You can now have MathJax parse the TeX code in, say, /srv/http/pages/equations.html by including in its head:

<script src="../mathjax/MathJax.js?config=TeX-AMS_SVG"></script>

Troubleshooting

MathJax and Plotly

If you are using plotly.js as well, loading MathJax before Plotly might fail to render TeX code. Loading Plotly before MathJax should work. For example:

<head>
     <script src="path-to-plotly/plotly-latest.min.js"></script>
     <script src="path-to-mathjax/MathJax.js?config=TeX-AMS_SVG"></script>
</head>

You may also try different MathJax output.

TeX raw code visible while page is loading

It can happen that MathJax takes some time to typeset and raw TeX code appears during the while, producing an unpleasant result.

You can fix this by setting visibility: hidden in some element's css properties, and catch the event MathJax emits after typesetting is done to show it:

MathJax.Hub.Queue( function () { 
    document.getElementById("myID").visibility = "visible";
});