How to put Math in online articles (with MathJax)

While writing articles for this website, I came across the need to display math in form of equations and matrices. After some search, I decided to use MathJax.

MathJax is an open-source JavaScript display engine for LaTeX, MathML, and AsciiMath notation that works in all modern browsers. More on it in the official documentation here: https://docs.mathjax.org/en/latest/basic/mathjax.html

Here are the steps I followed, reported for my future me and for anyone else that needs to implement the same feature on his webpage.

Get the library

Get a copy of the Mathjax library. You can either include it through a CDN (Content Delivery Network) or host your own copy. The first option is the best because it’s likely that people that read your articles are into math stuff, so they probably visited a website where MathJax is in place, and their browser will have cached it. At the time of writing the CDN script is:

<script id="MathJax-script" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML"></script>
 
This has to be included in the webpages that contain math, in any location that proceeds the math.

Optimize load times

To optimize load times it’s a good idea to have this script only if the page contains math.

If you’re using WordPress and you don’t have access to the source code of your pages you can use a plugin like MathJax-LaTeX by Phillip Lord, Simon Cockell, Paul Schreiber.

If you don’t want to use a plugin for this (like me), or if you’re not using WordPress, you need a way to dynamically inject the script based on a setting associated with each page.

Add a field called use_mathjax to the post table of the database which accepts a boolean value.
Then parse for the value of the use_mathjax field before rendering the content in the singe.php file (which contains the template for articles). If true print the CDN script, otherwise don’t. Here’s the PHP code:

<!-- MathJax -->
<?php if ( get_post_meta( get_the_ID(), 'use_mathjax', true ) ): ?>
    <script id="MathJax-script" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML"></script>
<?php endif; ?>

NOTE: get_post_meta() is a function that accepts the id of the post in the database, the name of the associated field, and a boolean flag to return a single value instead of an array of values.

Handle long equations

You’ll notice that if you write long equations they will overflow to the side of the page. Depending on the CSS settings of the container they’re in, they may increase the width of the content, or be chopped off.
This is inconvenient, but it can be fixed easily by adding some custom properties to the CSS classes that MathJax adds:

.MJXc-display {
    display: block;
    overflow-y:hidden;
    overflow-x: scroll;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.MJXc-display::-webkit-scrollbar, .MJXc-MathJax_CHTML::-webkit-scrollbar {
    display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.MJXc-display, .MathJax_CHTML {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox *
}

The key is to set overflow-x to scroll and display to block so that the equation will stay within the boundaries of the parent div, and the user will be able to see all of it simply by scrolling.

Handle inline equations

Then make sure that inline equations are actually displayed as inline elements:

.MathJax_CHTML {
    display: inline;
}

Disable the image preview

Lastly, disable the image preview that shows up while the web font version is loading. I find it’s only annoying.

.MathJax_Preview {
    display: none !important;
}

Test

Let’s make a test with Euler’s equation \(e^{i\theta} = \cos(\theta) + i \sin(\theta)\).

Enjoy

It works! Go and fill the web with math.

Useful references

1. Mathjax official website | https://www.mathjax.org/
2. MathJax documentation | http://docs.mathjax.org/en/latest/