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.

1 | $ npm install hexo-math --save |

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

1 | math: |

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

1 | mathjax: |

### 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.

1 | <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.

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

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

1 | \\(E=mc^2\\) |

\(E=mc^2\)

1 | $$\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}$$

1 | $$\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}+y*j$$" 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:

1 | var inline = { |

and

1 | inline.pedantic = merge({}, inline.normal, { |

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

1 | var inline = { |

and

1 | inline.pedantic = merge({}, inline.normal, { |

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:

1 | $$\frac{\partial{\mathcal{E}}}{\partial{x_l}} & = \frac{\partial{\mathcal{E}}}{\partial{x_L}}\frac{\partial{x_L}}{\partial{x_l}}\\\\ |

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

1 | \begin{equation} |

are not necessary,

1 | \begin{split} |

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

1 | $$\begin{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!