Using math equation in hexo with next theme

Posted on In

Pre

Hexo doesn’t support latex out of box, but some theme do.
Since I use next theme which support it, I don’t need additionally use other plugins to achieve the goal. But I still have to do some config to make it work better.

Steps

Enable the mathjax in next-theme config

1
2
3
4
5
6
7
8
9
10
// themes/next/_config.yml

 math:
 # Default (false) will load mathjax / katex script on demand.
 # That is it only render those page which has `mathjax: true` in front-matter.
 # If you set it to true, it will load mathjax / katex script EVERY PAGE.
 every_page: false
 mathjax:
   enable: true
   tags: ams

add the meta in the post file

if you didn’t set the every_page to true, then you have to set the metadata info mathjax: true in the disered post

1
2
3
4
---
title: the disered post
mathjax: true
---

Sample

Inline Formula

1
We all know that $1+1=2$

We all know that $1+1=2$

Display Formula

1
2
3
4
$$\begin{equation} \label{eq1}
e=mc^2
\end{equation}$$
The famous matter-energy equation $\eqref{eq1}$ proposed by Einstein...

$$\begin{equation} \label{eq1}
e=mc^2
\end{equation}$$
The famous matter-energy equation $\eqref{eq1}$ proposed by Einstein…

Some issues

The hexo default markdown render engine ‘marked’ will cause some issues when render the Multi-line Equations.
In latex,\\ will inset a new line in Multi-line Equations.
But in marked engine, the double backslash \\ will be escaped to \, which cause the render failure.

1
2
3
4
5
6
7
$$\begin{equation} \label{eq2}
\begin{aligned}
a &= b + c   \\
  &= d + e + f + g   \\
  &= h + i
\end{aligned}
\end{equation}$$

$$\begin{equation} \label{eq2}
\begin{aligned}
a &= b + c \
&= d + e + f + g \
&= h + i
\end{aligned}
\end{equation}$$

as you see, the Multi-line Equations $\eqref{eq2}$ didn’t display correctly
Fortunately, you have at least two options to fix it.

Simpler way: use different linebreak symbol

maually escape the backslash

A simple way to fix it is that use \\\\ to generate the escaped double backslash, and pass \\ to next-theme‘s mathjax engine correctly.

1
2
3
4
5
6
7
$$\begin{equation} \label{eqcorrect}
\begin{aligned}
a &= b + c   \\\\
  &= d + e + f + g   \\\\
  &= h + i
\end{aligned}
\end{equation}$$

$$\begin{equation} \label{eqcorrect}
\begin{aligned}
a &= b + c \\
&= d + e + f + g \\
&= h + i
\end{aligned}
\end{equation}$$

tips: but due to difference between other render engines, \\\\ may render as two linebreaks on it, such as marked engine inside the Obsidian.

use \newline

\newline works the same way as \\ in latex syntax, and since marked will not escape \newline, it’s more compatible between different markdown render engine.

1
2
3
4
5
6
7
$$\begin{equation} \label{eqcorrect2}
\begin{aligned}
a &= b + c   \newline
  &= d + e + f + g   \\\\
  &= h + i
\end{aligned}
\end{equation}$$

$$\begin{equation} \label{eqcorrect2}
\begin{aligned}
a &= b + c \newline
&= d + e + f + g \\
&= h + i
\end{aligned}
\end{equation}$$

Maybe harder way: Use other render engine

Alternately, you could use another markdown render engine. like pandoc which is recommended by the next-theme officially.

1
2
$ npm un hexo-renderer-marked
$ npm i hexo-renderer-pandoc
pros

It could render the math Formula correctly, no more ugly \\\\ thing, and the md content is basically standard, which makes it easier to edit or render with other editor or engine, like Emacs.

cons
cons_1. extra blank line

If you are familiar with the default marked flavor markdown, you could possibly need some modification with pandoc config. Pandoc won’t create newline when it comes with a single enter, you have to use the standard way: double space at the end of line
you could fix it with config in the hexo config. 

1
2
3
pandoc:
  extensions:
    - "+hard_line_breaks"

However, it will bring another issue, this will cause pandoc insert extra <br> tags around the <span> tag which the math formula are wrapped in, blank around the formula will make it looks not so good.
at least two way to fix it as I know:

  1. But you could solve it with by adding <br> tags or blanks line around the display formula.
  2. modify the package source code to use a github flavor markdown
    1
    2
    3
    4
    // node_modules/hexo-renderer-pandoc/index.js

    //var args = [ '-f', 'markdown-smart'+extensions, '-t', 'html-smart', math]
    var args = [ '-f', 'gfm'+extensions, '-t', 'html-smart', math]
cons_2. embed resources issues
  • Another thing is that pandoc doesn’t support embed sources like pictures in local relative path out of box, maybe you could config it – I didn’t try that.

Appendix: More sample

Multiple Aligned Equations

1
2
3
4
5
6
$$\begin{align}
a &= b + c \label{eq4} \newline
x &= yz \label{eq5} \newline
l &= m - n \label{eq6}
\end{align}$$
There are three aligned equations: equation $\eqref{eq4}$, equation $\eqref{eq5}$ and equation $\eqref{eq6}$.

$$\begin{align}
a &= b + c \label{eq4} \newline
x &= yz \label{eq5} \newline
l &= m - n \label{eq6}
\end{align}$$
There are three aligned equations: equation $\eqref{eq4}$, equation $\eqref{eq5}$ and equation $\eqref{eq6}$.

Use \tag to Tag Equations

1
2
$$x+1\over\sqrt{1-x^2} \tag{i}\label{eq_tag}$$
Equation $\eqref{eq_tag}$ use `\tag{}` instead of automatic numbering.

$$x+1\over\sqrt{1-x^2} \tag{i}\label{eq_tag}$$
Equation $\eqref{eq_tag}$ use \tag{} instead of automatic numbering.

try <p>

When you use some Tex commands that can’t be recognized by markdown render engine, use wrap it with <p>, so that markdown render engine won’t process it, instead passing the raw content to the math equation render engine like MathJax, the math render engine usually can handle it.

1
2
3
4
5
6
<p>
$$ \begin{aligned}
ax^2+ &bx+c=0 \\
&\sideset {^{a_1}_{a_2}}{^{c_1}_{c_2}} \times
\end{aligned} $$
</p>