# How to put Math in online articles (with MathJax)

Display math in your website.

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

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

Mattia Bressanelli

### Comments

Public comments will be displayed here.

## Leave a Reply