MathJax Setup
THIS POST IS OUTDATED
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.
1<script type="text/x-mathjax-config">
2 MathJax.Hub.Config({
3 tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
4 });
5</script>
6<script type="text/javascript" async src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
7</script>
Equation autoNumber
Add the code below to header if you want equation auto-numbering.
1<script type="text/x-mathjax-config">
2 MathJax.Hub.Config({
3 TeX: { equationNumbers: { autoNumber: "all" } }
4 });
5</script>
Escape Numbering
Add \notag to the equations to escape auto-numbering, e.g.
Without \notag
1$$\frac{d}{d\,t} N_{i}= b_{i} N_{i}\left[C S\right]_{i} - d_{i} N_{i}$$
gives
$$\frac{d}{d\,t} \,N_{i}= b_{i} N_{i}\left[C S\right]_{i} - d_{i} N_{i}$$
With \notag
1$$\frac{d}{d\,t} N_{i}= b_{i} N_{i}\left[C S\right]_{i} - d_{i} N_{i} \notag$$
gives
$$\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.
Example
I added \label{eq:N} at the end of the equation:
1$$ \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.
1mathjax: true
2mathjax2: 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.
Note that
\label&\notagcan’t be used together (You can’t label a numbering-escaped 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). ↩︎