# Difference between revisions of "MathJax"

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.

## 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 ="/usr/share/mathjax/MathJax.js?config=TeX-AMS_SVG"></script>
...


Don't 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>


You may also try different MathJax output.

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 () {