Yongfu's Blog

MathJax Setup

Jan 27, 2018

MathJax is a JavaScript display engine for mathematics that works in all browsers. By including MathJax support on the website, LaTeX mathematical expressions are rendered as pretty mathematical equations.

Add MathJax Support

Add the code below to the <head> ... </head> region of every page (.html) to enable MathJax support. The code below allows supporting $ and $$ in Markdown.

<script type="text/x-mathjax-config">
      tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
<script type="text/javascript" async src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">

Equation autoNumber

Add the code below to header if you want equation auto-numbering.

<script type="text/x-mathjax-config">
    TeX: { equationNumbers: { autoNumber: "all" } }

Escape Numbering

Add \notag to the equations to escape auto-numbering, e.g.

Without \notag

$$\frac{d}{d\,t} N_{i}= b_{i} N_{i}\left[C S\right]_{i} - d_{i} N_{i}$$


$$\frac{d}{d\,t} \,N{i}= b{i} N{i}\left[C S\right]{i} - d{i} N{i}$$

With \notag

$$\frac{d}{d\,t} N_{i}= b_{i} N_{i}\left[C S\right]_{i} - d_{i} N_{i} \notag$$


$$\frac{d}{d\,t} N{i}= b{i} N{i}\left[C S\right]{i} - d{i} N{i} \notag$$

Equation Reference

Add \label{eq:name} to equation to give identifier. Use $\eqref{eq:name}$ to reference the labled equation1.


I added \label{eq:N} at the end of the equation:

$$ \frac{d}{d\,t} N_{1} =\left[ b_{1} N_{1}\,\left( S_{2}\,c_{12}+S_{1}\,c_{11}\right)- d_{1} N_{1}\, \right] \label{eq:N}$$

$$\frac{d}{d\,t} N{1} =\left[ b{1} N{1}\,\left( S{2}\,c{12}+S{1}\,c{11}\right)- d{1} N_{1}\, \right] \label{eq:N}$$

Now, adding $\eqref{eq:N}$ in the text, e.g,

See $\eqref{eq:N}$ for details.

, gives See $\eqref{eq:N}$ for details.

GitHub Page Support

You can take a look at MathJax support of my page here, it’s in the file mathjax.html.

mathjax.html contains two part. The first starts with {% raw %}{% if site.mathjax == true or page.mathjax == true %}{% endraw %}, and the code below it is the same as the code in the section, Add MathJax Support.

The second starts with {% raw %}{% if page.mathjax2 == true %}{% endraw %}, and the code below it is the same as the code in the section, Equation autoNumber.

Note the variables mathjax and mathjax22 in the liquid tags. You can set them globally3 in _config.yml, or individually in the yaml header of each post/page. For example, I set the code below in _config.yml.

mathjax: true
mathjax2: false 

This allows mathjax support without equation auto-numbering to be the default setting of my site. When I want auto-numbering for some post (or page), I can set mathjax2: true in the yaml header of the post.

Some Additional Warnings

When I was typing this post, I found that GitHub Pages may have trouble rendering pages containing Latex. This is because GitHub Pages sometimes confuses several curly braces ({) written together as Jekyll liquid tags, which could cause page build failure. You can avoid this by not using too complicated Latex syntax, especially those with many { (or }) connected together. If you want to explicitely include liquid tags in your posts, look here for more details.

  1. Note that \label & \notag can’t be used together (You can’t label a numbering-escaped equation).
  2. Which is in site.mathjax, page.mathjax,and page.mathjax2, and are all set to true.
  3. The base template of my blog imports scripts from mathjax.html(line 18), so the whole site supports mathjax (as long as the page uses the template of my blog).