A Flow of Thoughts

Using MathJax within Hexo

Posted on

Introduction

A problem emerge during blogging: I need to display some math formulas to illustrate, but I cannot find a proper way to display them.
As a result, I turned to a plugin called OmniMarkupPreviewer for Sublime Text 3. It is used to preview the markdown file. Additionally, by changing some default settings, it can be used to support MathJax, a popular tool to display formulas on webpages.

MathJax Overview

MathJax allows you to include mathematics in your web pages, either using LaTeX, MathML, or AsciiMath notation, and the mathematics will be processed using JavaScript to produce HTML, SVG or MathML equations for viewing in any modern browser.

MathJax.org

Installing OmniMarkuppreviewer

It’s easy by using Package Control to install:
Press down crtl + shift + p and type in install to open install package.
Type Omnimarkuppreviewer. You would see it and you can download it.

Changing Default Settings

After Installing it:

  1. Open sublimetext 3
  2. Open Preferences
  3. Open Package Setting
  4. Open OmniMarkuppreviewer
  5. Open Settings - Default
  6. Find mathjax_enabled
  7. change false to true.

Afterwards, Mathjax would be automatically installed.

Install Mathjax on Hexo

Until now, we have only installed Mathjax locally, but we need to include it in our blog as well.
We can turn to a plugin called hexo-math.
This is a wonderful plugin that allows usage of Mathjax in Hexo. Unfortunately, the plugin is no longer sustained. However, for now we can still use it, since changing the default setting is troublesome.

Open git shell and type to install:

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

However, there is some conflict between the Syntax of Markdown and Mathjax. Some of the characters may be escaped. Still, we need to change the default settings…

Changing Default Settings

I found Platonic Time had already contributed how to change the default settings.

Here it goes:
Open the Hexo File.
Go to ./node_modules/marked/lib/
Using a text editor to open marked.js

You may want to use crtl + f to find the following changes:

Step One:

Change:

1
escape: /^\\([\\`*{}\[\]()# +\-.!_>])/,

to

1
escape: /^\\([`*\[\]()# +\-.!_>])/,

This step enabled

1
\\,\{,\}

to escape.

Step Two

Change:

1
em: /^\b_((?:[^_]|__)+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

to

1
em:/^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

These enable the consistency of Marked.js and Mathjax.

Restart Hexo.

Using Mathjax within Markdown

There you have it.
Have a Try:

1
2
3
4
5
6
7
8
$$
\begin{eqnarray}
\nabla\cdot\vec{E} &=& \frac{\rho}{\epsilon_0} \\
\nabla\cdot\vec{B} &=& 0 \\
\nabla\times\vec{E} &=& -\frac{\partial B}{\partial t} \\
\nabla\times\vec{B} &=& \mu_0\left(\vec{J}+\epsilon_0\frac{\partial E}{\partial t} \right)
\end{eqnarray}
$$

$$
\begin{eqnarray}
\nabla\cdot\vec{E} &=& \frac{\rho}{\epsilon_0} \\
\nabla\cdot\vec{B} &=& 0 \\
\nabla\times\vec{E} &=& -\frac{\partial B}{\partial t} \\
\nabla\times\vec{B} &=& \mu_0\left(\vec{J}+\epsilon_0\frac{\partial E}{\partial t} \right)
\end{eqnarray}
$$