MathJax

We can use MathJax to nicely display LaTex math equations in HTML. The latest MathJax has upgraded to version 3, although version 2 is still available. It is encouraged to use the lastest version.

MathJax v3

To enable MathJax v3, we add the following to _include/head.html:

<script>
MathJax = {
  tex: {
    inlineMath: [ ['$','$'], ['\\(','\\)'] ],
    displayMath: [ ['$$', '$$'], ['\\[', '\\]'] ],
    processEscapes: true,
	macros: {
	  RR: "{\\bf R}",
        bold: ["{\\bf #1}", 1]
	}
  },
  chtml: {
    scale: 0.9
  }
};
</script>
<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

The inline math delimiter pairs [$,$] allows MathJax to recognize inline equations. Note that $ $ is not recognized by default.
The option processEscapes: true means that MathJax interprets \$ as a literal dollar sign. Otherwise, MathJax will interpret $ as inline math delimiters.
We can define LaTex macros such as \RR as \bf{R}, as shown in Defining TeX macros.
We can change the math font size in the chtml option.

We refer to TeX Input Processor Options for more detailed configurations.

MathJax v2

To enable MathJax v2, we add the following to _include/head.html:

<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
      tex2jax: {
        inlineMath: [['$','$'], ['\\(','\\)']],
        processEscapes: true
      },
      "HTML-CSS": { scale: 90 },
      TeX: {
        Macros: {
        RR: "{\\bf R}",
        bold: ["{\\bf #1}",1]
        }
      }
    });
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>

We can define LaTex macros such as \RR as \bf{R}, as shown in Defining TeX macros.
We can change the math font size with HTML-CSS option: Changing mathjax’s font size.

Note: MathJax provides a configuration converter to convert the configuration in version 2 to version 3. See MathJax Configuration Converter.

Some Examples

For inline math, we can write $f(x) = \log(x) + e^{2y}$ or $ f(x) = 3x + 2y $.

For independent math equations, we can either use the equation environment or the $$ environments: \begin{equation} \begin{split} f(x) &= ax^2 + \log(x) \ g(x) &= kx+b \end{split} \end{equation} or

\[\begin{align} f(x) &= ax^2 + \log(x) \\ g(x) &= kx+b \end{align}\]

Note: we do not need to add additional $$ before the equation environment. The two are the same

We can also use label and tag to reference the equation in the same webpage. \begin{equation} \label{eq:1} \tag{1} f(x) = 1. \end{equation} We reference the equation \eqref{eq:1} here.

Note: the label and tag attributes should appear or disappear in the equation environment at the same time. If both of them are not used in the equation environment, the equation will act as the equation* environment.

Display in a Separate Line

MathJax interprets the $$ environment in the Markdown file to \[ \] and then display the content. It does not translate the equation environment. However, in Markdown we need a blank line to separate the content. Therefore, the equation in the following case will be treated as inline math:

This is a beginning line without extra blank lines after.
$$ f(x) = ax + by. $$
This is an ending line with out extra blank lines before.

This is a beginning line without extra blank lines after. $f(x) = ax + by.$ This is an ending line with out extra blank lines before.

Note: In Markdown files, we need an extra blank line before and after $$ to display the formula in a separate line.

However, if we write math equations directly in an HTML element, for example <p>, we do not need to worry about the extra blank lines because Markdown interpreter will not change the content. For example,

<p>
This a line before the equation.
$$ f(x) = ax^2 + \log(x). $$
and this is a line after the equation.
</p>

This a line before the equation. $$ f(x) = ax^2 + \log(x). $$ and this is a line after the equation.

In the equation environment, we do not need to worry about extra blank lines in both cases.

I have an equation here \begin{equation} f(x) = ax^2 + \log(x) \end{equation} and this is a line after the equation.

Some Notes

MathJax does not support the split environment. Instead, we can use the align environments or aligned within the equation environment.

We use code environment to display LaTex code:

\begin{equation}
 f(x) = ax^2 + \log(x)
\end{equation}

Useful References

[1] Math Support in Jekyll

[2] Use MathJax to write Equations in Jekyll blogs

Mathjax in Jekyll Notes