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.

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

Installation and Configuration

Install mathjax(version 3) or mathjax2(version 2) from the official repositories.

Local Usage

The scripts for MathJax are located in /usr/share/mathjax for both version 2 and 3. There are some differences in using the scripts between the versions. For version 3 there are a number of pre built components with different output results and functionality, click here for a list and explanation of the components.

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

<head>
    ... 
    Version 2
    <script src="/usr/share/mathjax/MathJax.js?config=TeX-AMS_SVG"></script> 
    ...
    ... 
    Version 3
    <script src="/usr/share/mathjax/tex-mml-svg.js"></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/tex-mml-chtml.js.js (or /usr/share/mathjax/MathJax.js for version 2).

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, by including in its head:

<script src="../mathjax/tex-mml-chtml.js></script>

or for version 2:

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

Troubleshooting

MathJax and Plotly

If you are using 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 in some element's properties, and catch the event MathJax emits after typesetting is done to show it:

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

gollark: Alternativrly, `fs.combine(path, "")` canonicalizes it.

gollark: Yes, obviously.

gollark: I recently launched the SPUDNETv4 protocol for it but the only person using it is heavpoot for the heavdrone web UI.

gollark: Most of my secured stuff runs over SPUDNET, which is probably not entirely secure itself but oh well.

gollark: So technically with channel hopping you could avoid it.

This article is issued from Archlinux. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.