Basics of MathJax (+ How to use it?)
In this article, we have explained the basics of MathJax, different components and how to enable and use MathJax for Mathematical Equations on web pages.
Table of content:
- Introduction to MathJax
- Components of MathJax
- How to enable MathJax?
- How to use MathJax?
Let us get started with MathJax.
Introduction to MathJax
MathJax is an open source JavaScript display engine for LaTeX, MathML, and AsciiMath notation that works in all browsers. It was created, while keeping in idea of the recent advancements in web technologies, to achieve the goal of making a single, definitive, math-on-the-web platform which could be supported on major web browsers and OS devices, including those on mobile phones.
MathJax uses web-based fonts to produce high-quality results that scales and prints at full resolution, unlike those mathematical statements which are rendered as images and lose their quality upon display.
It can be used with screen readers, providing accessibility for the visually impaired as well. With MathJax, mathematics is text-based rather than image-based, making it usable for search engines too, i.e they can be searched on Google.
The purpose of MathJax is to bring the ability to include mathematics easily in web pages to as wide a range of browsers as possible. It can display math by using a combination of HTML and CSS or by using the browser's native MathML support.
Components of MathJax
MathJax is broken into several different kinds of components:
- page preprocessors
- input processors
- output processors
- MathJax Hub that organizes and connects the others
- The input and output processors are called jax.
Input jax is associated with the different script types.
The mapping of a particular type of script to a particular jax is made when the various jax register their abilities with the MathJax Hub at configuration time. For example, the MathML input jax registers the math/mml type, so MathJax will know to call the MathML input jax when it sees math elements of that type.
The role of the input jax is to convert the math notation defined by the user into the internal format used by MathJax. This internal format is essentially MathML, so an input jax basically acts as a translator into MathML context.
Output jax converts the internal element jax format into a specific output format. For example, the NativeMML output jax inserts MathML tags into the page to represent the mathematics, while the HTML-CSS output jax uses HTML with CSS to lay out the mathematics so that it can be displayed in browsers that don’t understand MathML.
MathJax also has an SVG output jax that will render the mathematics using scalable vector graphics. The MathJax contextual menu can be used to switch between the output jax that are available.
The MathJax Hub keeps track of the internal representations of the various mathematical equations on the page, and can be queried to obtain information about those equations.
For example, one can obtain a list of all the math elements on the page, or look up a particular one, or find all the elements with a given input format, and so on. In a dynamically generated web page, an equation where the source mathematics has changed can be asked to re-render itself, or if a new paragraph is generated that might include mathematics, MathJax can be asked to process the equations it contains.
It also manages issues concerning mouse events and other user interaction with the equation itself. Parts of equations can be made active so that mouse clicks cause event handlers to run, or activate hyperlinks to other pages, making the mathematics as dynamic as the rest of the page.
How to enable MathJax?
The easiest way to use MathJax is to link to a public installation available through a Content Distribution Network (CDN). When you use a CDN, you can begin using MathJax right away and there is no need to install anything.
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 two things: link MathJax in the web pages that are to include mathematics and put mathematics into your web pages so that MathJax can display it.
To start using CDN you can add the following code snippet into the HTML header block. This will load MathJax from the distributed server, and configure it to recognize mathematics in both TeX, MathML, and AsciiMath notation, and ask it to generate its output using HTML with CSS to display the mathematics.
<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
To load MathJax onto a webpage, you code will look like this:
<html>
<head>
<script type="text/javascript" async src="/MathJax/MathJax.js?config=TeX-MML-AM_CHTML"></script>
</head>
</html>
How to use MathJax?
To put mathematics in a web page, you can use either TeX and LaTeX notation, or MathML notation. The configuration file tells MathJax which you want to use, and how you plan to indicate the mathematics when you are using TeX notation.
To process mathematics that is written in TeX or LaTeX format, include "input/TeX" in your configuration’s jax array, and add "tex2jax.js" to the extensions array so that MathJax will look for TeX-style math delimiters to identify the mathematics on the page.
extensions: ["tex2math.js"],
jax: ["input/TeX", "output/HTML-CSS"]
Below is a sample page containing TeX mathematics:
<html>
<head>
<title>MathJax TeX Test Page</title>
<script type="text/javascript" src="/MathJax/MathJax.js"></script>
</head>
<body>
When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
</body>
</html>
To use mathematics written in MathML, include "input/MathML" in your configuration’s jax array, and add "mml2jax.js" to the extensions array so that MathJax will locate the math elements in the page automatically.
extensions: ["mml2jax.js"],
jax: ["input/MathML", "output/HTML-CSS"]
Below is a sample page containing MathML mathematics:
<html>
<head>
<title>MathJax MathML Test Page</title>
<script type="text/javascript" src="/MathJax/MathJax.js"></script>
</head>
<body>
When <math><mi>a</mi><mo>≠</mo><mn>0</mn></math>, there are two solutions to <math>
<mi>a</mi><msup><mi>x</mi><mn>2</mn></msup>
<mo>+</mo> <mi>b</mi><mi>x</mi>
<mo>+</mo> <mi>c</mi> <mo>=</mo> <mn>0</mn>
</math> and they are
<math mode="display">
<mi>x</mi> <mo>=</mo>
<mrow>
<mfrac>
<mrow>
<mo>−</mo>
<mi>b</mi>
<mo>±</mo>
<msqrt>
<msup><mi>b</mi><mn>2</mn></msup>
<mo>−</mo>
<mn>4</mn><mi>a</mi><mi>c</mi>
</msqrt>
</mrow>
<mrow> <mn>2</mn><mi>a</mi> </mrow>
</mfrac>
</mrow>
<mtext>.</mtext>
</math>
</body>
</html>
With this article of OpenGenus, you must have the idea behind MathJax and how to enable and use MathJax for Mathematical Equations. Enjoy.