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/xmathjaxconfig">
MathJax.Hub.Config({
tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
});
</script>
<script type="text/javascript" async src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeXMMLAM_CHTML">
</script>
Equation autoNumber
Add the code below to header if you want equation autonumbering.
<script type="text/xmathjaxconfig">
MathJax.Hub.Config({
TeX: { equationNumbers: { autoNumber: "all" } }
});
</script>
Escape Numbering
Add \notag
to the equations to escape autonumbering, e.g.
Without \notag
$$\frac{d}{d\,t} N_{i}= b_{i} N_{i}\left[C S\right]_{i}  d_{i} N_{i}$$
gives
With \notag
$$\frac{d}{d\,t} N_{i}= b_{i} N_{i}\left[C S\right]_{i}  d_{i} N_{i} \notag$$
gives
Equation Reference
Add \label{eq:name}
to equation to give identifier. Use $\eqref{eq:name}$
to reference the labled equation^{1}.
Example
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}$$
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
{% if site.mathjax == true or page.mathjax == true %}
, and the code below it is the same as the code in the section, Add MathJax Support.
The second starts with {% if page.mathjax2 == true %}
, and the code below it is the same as the code in the section, Equation autoNumber.
Note the variables mathjax
and mathjax2
^{2} in the liquid tags. You can set them globally^{3} 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 autonumbering to be the default setting of my site. When I want autonumbering 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.

Note that
\label
&\notag
can’t be used together (You can’t label a numberingescaped equation). ↩ 
Which is in
site.mathjax
,page.mathjax
,andpage.mathjax2
, and are all set totrue
. ↩ 
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). ↩