Sometimes you may want to explain some algorithms or principles with beautiful formulae in your blog. How to do this? Edit them in Microsoft Word, take a screenshot, crop it and put it in the blog post? When you finish your article and find out that you missed a symbol in the pictures - oh man, gotta repeat that again? Stop using those images now! A beautiful math display engine - MathJax allows you to code math like a coder.

$$\mathcal{C}\phi \delta e \mathfrak{M}\alpha th \mathit{I}n \mathcal{H}ex\sigma \mathbb{N}o\omega!$$

1 Installation

1.1 With npm (For those using Hexo like me)

First, install hexo-math in your Hexo blog directory.

$ npm install hexo-math --save

Then, add math configurations in your _config.yml file.

math:
  engine: 'mathjax'

Finally, also add to your _config.yml file in the theme directory these configurations below.

mathjax:
  enable: true
  per_page: false
  cdn: //cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML

1.2 Or by inserting a snippet in your HTML code

Maybe you don't have to use math in every blog post. If so, insert the following snippet in your Markdown file also works.

<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML' async></script>

2 Usage

MathJax supports the same grammar that LaTeX does. To learn more about LaTeX, please refer to Chapter 3 of The Not So Short
Introduction to LATEX(CN version also available here).

Use a "\\(" and a "\\)" to insert a formula in the line(they decide the boundary of the formula), or two "$$" to insert one that occupy a new line. I'll give a few examples below.

\\(\mathcal{F}(x)=\mathcal{H}(x)-x\\)

\(\mathcal{F}(x)=\mathcal{H}(x)-x\)

\\(E=mc^2\\)

\(E=mc^2\)

$$\lim_{n\rightarrow \infty}(1+2^n+3^n)^\frac{1}{x+\sin n}$$

$$\lim_{n\rightarrow \infty}(1+2^n+3^n)^\frac{1}{x+\sin n}$$

$$\mathcal{C}\phi \delta e \mathfrak{M}\alpha th \mathit{I}n \mathcal{H}ex\sigma \mathbb{N}o\omega!$$

$$\mathcal{C}\phi \delta e \mathfrak{M}\alpha th \mathit{I}n \mathcal{H}ex\sigma \mathbb{N}o\omega!$$

3 Problems when using MathJax with Hexo & Solutions

This list will be appended whenever I find any more.

3.1 Subscript symbol "_" gets mistaken as Markdown emphasize symbol

This is a tough problem. Hexo renderer would first render the .md file into a .html file, and the MathJax script will only work on the .html file. Therefore, when there are multiple subscript symbols, they might be rendered as <em></em> tags.

For example: when you actually need a full-line formula \(x_{i+1}+y_j\), perhaps you'll get a "$$x{i+1}+yj$$" instead. Look into the HTML code and you'll understand why.

My solution for now, is giving up this Markdown emphasize symbol, since both "_" and "*" can be used as emphasize tags, and the alternative symbol "*" will also work if we remove "_". Using "\_" also works, but it would be frequently used(while "*" isn't), thus turning our math code into mess code.

How do we do this? Bravely look into the node_modules directory and find the renderer of the Hexo engine. My renderer is marked, which is the default for Hexo. There is a file named marked.js inside node_modules/marked/lib/ directory. You can find two appearances of "em:". Like this:

var inline = {
  ...
  em: /^\b_((?:[^_]|__)+?)_\b|^\*((?:\*:\*|[\s\S])+?)\*(?!\*)/,
  ...
};

and

inline.pedantic = merge({}, inline.normal, {
  ...
  em: /^_(?=\S)([\s\S]*?\S)_(?!_)|^\*(?=\S)([\s\S]*?\S)\*(?!\*)/
});

Modify the regular expression after them - remove the one about "_"s and leave the one about "*"s. The new version would be:

var inline = {
  ...
  em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
  ...
};

and

inline.pedantic = merge({}, inline.normal, {
  ...
  em: /^\*(?=\S)([\s\S]*?\S)\*(?!\*)/
});

From now on, you can use "_" as the subscript in MathJax freely. You don't have to worry about its becoming <em></em> tags anymore.

3.2 Using "&" for aligning multi-line equations but getting a "Misplaced &"

For example, in my previous post about ResNet, I tried to use the following code to start a new line in an equation while aligning the lines to the equal sign:

$$\frac{\partial{\mathcal{E}}}{\partial{x_l}} & = \frac{\partial{\mathcal{E}}}{\partial{x_L}}\frac{\partial{x_L}}{\partial{x_l}}\\\\
& = \frac{\partial{\mathcal{E}}}{\partial{x_L}}\Big(1+\frac{\partial{}}{\partial{x_l}}\sum_{i=l}^{L-1}\mathcal{F}(x_i,\mathcal{W}_i)\Big)$$

The "&" symbols were used to align the lines to a certain point. However, the result was a "Misplaced &" prompt.

By disabling MathJax, I found out that the rendered equation was correct, which means that the problem isn't with Hexo renderer. This was when I realized that although

\begin{equation}
\end{equation}

are not necessary,

\begin{split}
\end{split}

shouldn't be removed. Surround the equation with them will work. My code is here:

$$\begin{split}
\frac{\partial{\mathcal{E}}}{\partial{x_l}} & = \frac{\partial{\mathcal{E}}}{\partial{x_L}}\frac{\partial{x_L}}{\partial{x_l}}\\\\
& = \frac{\partial{\mathcal{E}}}{\partial{x_L}}\Big(1+\frac{\partial{}}{\partial{x_l}}\sum_{i=l}^{L-1}\mathcal{F}(x_i,\mathcal{W}_i)\Big)
\end{split}$$

And it runs like:
$$\begin{split}
\frac{\partial{\mathcal{E}}}{\partial{x_l}} & = \frac{\partial{\mathcal{E}}}{\partial{x_L}}\frac{\partial{x_L}}{\partial{x_l}}\\
& = \frac{\partial{\mathcal{E}}}{\partial{x_L}}\Big(1+\frac{\partial{}}{\partial{x_l}}\sum_{i=l}^{L-1}\mathcal{F}(x_i,\mathcal{W}_i)\Big)
\end{split}$$

3.3 To be continued

If you encounter other issues while using MathJax with Hexo(with or without a solution), feel free to leave a comment below!