日常工作喜欢用markdown写技术文档,免不了会碰到数学公式。最近迁移到hexo后,遇到了同样的麻烦,原生的Hexo并不支持数学公式的显示。google之,发现了MathJax,著名的Stackoverflow网站上的漂亮公式,就是使用了MathJax插件的效果。Mathjax号称Beautiful math in all browsers,在展示数学公式方面是不错的选择。

MathJax使用网络字体(大部分浏览器都支持)去产生高质量的排版,使其在所有分辨率都可缩放和显示,这远比使用包含公式的图片要有效得多。使用MathJax显示数学公式是基于文本的,而非图片。它可以被搜索引擎使用,这意味着方程式和页面上的文字一样是可以被搜索的。 MathJax允许页面作者使用TeX、LaTeX符号和 MathML 或者 AsciiMath 去书写公式。 MathJax甚至可以将Tex格式转化为MathML格式,使其可以被原生支持MathML格式的浏览器更多的渲染。转化为MathML格式后你可以复制粘贴它们到其他程序中。

MathJax是模块化的,所以它仅仅在需要时才加载它的组件,同时也可以被扩展以实现更多功能。 MathJax同时也是高度可配置的,允许作者作出更适宜网站自身的自定义。 如果你需要,MathJax的API甚至可以让你在你的网页上动态的创建公式。

插件集成

安装方法如下:

$ npm install hexo-math --save

_config.yml 文件中添加:

math:
  engine: 'mathjax' # or 'katex'
  mathjax:
    # src: custom_mathjax_source
    config:
      # MathJax config

如果你和笔者一样使用了next的主题,那么简单了。编辑主题的 _config.yml,将 mathjax 设定为 true 即可。

# MathJax Support
mathjax: true

此外,当然也可以手工集成,只需要在markdown文件中(hexo的文章页面因为需要页面解析,要添加在title等栏目后),添加MathJax CDN,代码如下:

<script type="text/javascript"
   src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

就可以在md文件中插入Tex格式的公式了。
具体用法见Hexo MathJax插件.

如何使用

行内公式的形式,例如\(f(x)=x^{2}\),代码如下:

\\( 此处插入公式 \\)

行间公式的形式,例如

代码如下:

$$ 此处插入公式 $$

书写规则

看到别的网站上有MathJax解析的公式时,你可以通过右键菜单”Show Math As > TeX Commands”查看Tex格式。

希腊字母

名称 大写 Tex 小写 Tex
alpha A A $\alpha$ \alpha
beta B B $\beta$ \beta
gamma $\Gamma$ \Gamma $\gamma$ \gamma
delta $\Delta$ \Delta $\delta$ \delta
epsilon E E $\epsilon$ \epsilon
zeta Z Z $\zeta$ \zeta
eta H H $\eta$ \eta
theta $\Theta$ \Theta $\theta$ \theta
iota I I $\iota$ \iota
kappa K K $\kappa$ \kappa
lambda $\Lambda$ \Lambda $\lambda$ \lambda
mu M M $\mu$ \mu
nu N N $\nu$ \nu
xi $\Xi$ \Xi $\xi$ \xi
omicron O O $\omicron$ \omicron
pi $\Pi$ \Pi $\pi$ \pi
rho P P $\rho$ \rho
sigma $\Sigma$ \Sigma $\sigma$ \sigma
tau T T $\tau$ \tau
upsilon $\Upsilon$ \Upsilon $\upsilon$ \upsilon
phi $\Phi$ \Phi $\phi$ \phi
chi X X $\chi$ \chi
psi $\Psi$ \Psi $\psi$ \psi
omega $\Omega$ \Omega $\omega$ \omega

一些字母变体 \epsilon \varepsilon \phi \varphi:$ \color{red}{\epsilon \varepsilon \phi \varphi} $

上标和下标

使用符号 ^ 和 _. 如, x_i^2: $ \color{red}{x_i^2} $.
此外,还需要了解一个”组”的概念。这个组既可以是一个符号也可以使是一个用{}括起来的公式。 比如10^10显示为$ \color{red}{10^10} $, 10^{10}才是你想要的结果:$ \color{red}{10^{10}} $.

$ \color{red}{在markdown中书写,因为$, \{, \}都是有特殊含义的,所以需要加\转义} $.

括号

  • 小括号与方括号:使用原始的( ),[ ]即可,如,(2+3)[4+4]:$ \color{red}{(2+3)[4+4]} $.
  • 大括号:时由于大括号{ }被用来分组,因此需要使用\{和\}表示大括号,如,\{a \ast b\} : $ \color{red}{\{a \ast b\}} $,还可以使用\lbrace 和\rbrace来表示,如,\lbrace a \ast b \rbrace:$ \color{red}{\lbrace a \ast b \rbrace} $.
  • 尖括号:使用\langle 和 \rangle表示左尖括号和右尖括号。如,\langle x \rangle:$ \color{red}{\langle x \rangle} $.
  • 上取整:使用\lceil 和 \rceil 表示。 如,\lceil x \rceil:$ \color{red}{\lceil x \rceil} $.
  • 下取整:使用\lfloor 和 \rfloor 表示。如,\lfloor x \rfloor:$ \color{red}{\lfloor x \rfloor} $.
  • 不可见括号:使用.表示。
    需要注意的是,原始符号并不会随着公式大小缩放。如,(\frac12):(12)(12)。可以使用\left(…\right)来自适应的调整括号大小。如下,可以看到,第二个公式中的括号是经过缩放的。

分式与根式(分号与开方)

  • \frac ab 显示为$ \frac ab $ 而\frac{a+1}{b+1}显示为$ \color{red}{\frac{a+1}{b+1}} $
  • \over: {a+1\over b+1}为 $ \color{red}{a+1\over b+1} $
  • \sqrt: \sqrt{x^3} 为$ \color{red}{\sqrt{x^3}} $, \sqrt[3]{\frac xy}为$ \color{red}{\sqrt[3]{\frac xy}} $,更复杂的考虑{…}^{1/2}:$ \color{red}{…^{1/2}} $

字体

\mathbb 和 \Bbb: $ \color{red}{\mathbb{ABCDEFGHIJKLMNOPQRSTUVWXYZ}} $$ \color{red}{\Bbb{abcdefghijklmnopqrstuvwxyz}} $黑板体
\mathbf:$ \color{red}{\mathbf{ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz}} $粗体
\mathtt:$ \color{red}{\mathtt{ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz}} $打印体
\mathrm:$ \color{red}{\mathrm{ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz}} $罗马体
\mathcal:$ \color{red}{\mathcal{ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz}} $
\mathscr:$ \color{red}{\mathscr{ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz}} $手写体
\mathfrak:$ \color{red}{\mathfrak{ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz}} $德国体
特殊的函数符号,考虑使用罗马字体, 如\lim, \sin, 而不是普通的lim, sin。 如 \sin x $ \color{red}{\sin x} $,而不是 sin x$ \color{red}{sin x} $。 对于

数学符号

可以参考LaTeX符号简表和 LaTex符号列表。

  • 求和:\sum,可使用上下标。如,\sum_1^n: $ \color{red}{\sum_1^n} $
  • 积分:\int,可使用上下限。如,\int_1^\infty:$ \color{red}{\int_1^\infty} $
  • 连乘:\prod:$ \color{red}{\prod} $
  • \bigcup:$ \color{red}{\bigcup} $
  • \bigcap:$ \color{red}{\bigcap} $
  • \iint:$ \color{red}{\iint} $
  • 极限:\lim可以使用下标, \lim_{x\to 0}:$ \color{red}{\lim_{x\to 0}} $
  • 比较:\lt \gt \le \ge \neq:$ \color{red}{\lt\gt\le\ge\neq} $, 可以前面加\not否定: $ \color{red}{\not\lt\not\gt\not\le\not\ge\not\neq} $
  • 运算:\times \div \pm \mp$ \color{red}{\times\div\pm\mp} $, \cdot居中,x \cdot y:$ \color{red}{x \cdot y} $
  • 集合:\cup \cap \setminus \subset \subseteq \subsetneq \supset \in \notin \emptyset \varnothing:
    $ \color{red}{\cup \cap \setminus \subset \subseteq \subsetneq \supset \in \notin \emptyset \varnothing} $
  • 排列:\choose 或 \binom, {n+1 \choose 2k} or \binom{n+1}{2k} :$ \color{red}{\binom{n+1}{2k}} $
  • 箭头:\to \rightarrow \leftarrow \Rightarrow \Leftarrow \mapsto \implies \iff \longrightarrow:
    $ \color{red}{\to \rightarrow \leftarrow \Rightarrow \Leftarrow \mapsto \implies \iff \longrightarrow} $
  • 逻辑:\land \lor \lnot \forall \exists \top \bot \vdash \vDash:$ \color{red}{\land \lor \lnot \forall \exists \top \bot \vdash \vDash} $
  • 空格:或者\quad 和 \qquad,MathJax自己决定是否增加空格。所以一般你指定空格是没用的, 除非你用转义\。
  • \star \ast \oplus \circ \bullet: $ \color{red}{\star \ast \oplus \circ \bullet} $
  • \approx \sim \cong \equiv \prec: $ \color{red}{\approx \sim \cong \equiv \prec} $
  • \infty \aleph_0 \nabla \partial \Im \Re:$ \color{red}{\infty \aleph_0 \nabla \partial \Im \Re} $
  • a\equiv b\pmod n: $ \color{red}{a\equiv b\pmod n} $
  • \ldots:$ \color{red}{\ldots a} $
  • \cdots:$ \color{red}{\cdots a} $
  • \hat:$ \color{red}{\hat x} $
  • \widehat:$ \color{red}{\widehat {xy}} $
  • \bar:$ \color{red}{\bar x} $
  • \overline:$ \color{red}{\overline {xyz}} $
  • \vec:$ \color{red}{\vec x} $
  • \overrightarrow:$ \color{red}{\overrightarrow {xyz}} $
  • \dot 和 \ddot:$ \color{red}{\dot x \ddot y} $

表格

使用这样的形式来创建表格,列样式可以是clr表示居中,左,右对齐,还可以使用|表示一条竖线。表格中 各行使用\分隔(hexo markdown中,需要使用\),各列使用&分隔。使用\hline在本行前加入一条直线。 例如,

\begin{array}{c|lcr}
n & \text{Left} & \text{Center} & \text{Right} \\\\
\hline
1 & 0.24 & 1 & 125 \\\\
2 & -1 & 189 & -8 \\\\
3 & -20 & 2000 & 1+10i \\\\
\end{array}

结果
\begin{array}{c|lcr}
n & \text{Left} & \text{Center} & \text{Right} \\\\
\hline
1 & 0.24 & 1 & 125 \\\\
2 & -1 & 189 & -8 \\\\
3 & -20 & 2000 & 1+10i \\\\
\end{array}

矩阵

和表格很类似,使用这样的形式来表示矩阵,在\begin与\end之间加入矩阵中的元素即可。矩阵的行之间使用\分隔(hexo markdown中,需要使用\),列之间使用&分隔。例如,

\begin{matrix}
1 & x & x^2 \\\\
1 & y & y^2 \\\\
1 & z & z^2 \\\\
\end{matrix}

结果

\begin{matrix}
1 & x & x^2 \\\\
1 & y & y^2 \\\\
1 & z & z^2 \\\\
\end{matrix}

如果要对矩阵加括号,可以像上文中提到的一样,使用\left与\right配合表示括号符号。也可以使用特殊的matrix。即替换begin{matrix}…end{matrix}中的matrix为pmatrix,bmatrix,Bmatrix,vmatrix,Vmatrix.
如pmatrix:$ \color{red}{\begin{pmatrix} 1&2\\\\ 3&4\\\\ \end{pmatrix}} $bmatrix:$ \color{red}{\begin{bmatrix} 1&2\\\\ 3&4\\\\ \end{bmatrix}} $Bmatrix:$ \color{red}{\begin{Bmatrix} 1&2\\\\ 3&4\\\\ \end{Bmatrix}} $vmatrix:$ \color{red}{\begin{vmatrix} 1&2\\\\ 3&4\\\\ \end{vmatrix}} $Vmatrix:$ \color{red}{\begin{Vmatrix} 1&2\\\\ 3&4\\\\ \end{Vmatrix}} $

增广矩阵, 需要使用前面的array来实现, 如

\left[
\begin{array}{cc|c}
    1&2&3\\\\
    4&5&6
\end{array}
\right]

结果:

内联矩阵, \bigl(\begin{smallmatrix} ... \end{smallmatrix}\bigr), 效果如:

可以使用\cdots$\color{red}{\cdots}$\ddots$\color{red}{\ddots}$\vdots$\color{red}{\vdots}$来省略矩阵中的元素,如:

公式对齐

有时候可能需要一系列的公式中等号对齐,如:

这需要使用形如 \begin{align}…\end{align} 的格式,其中需要使用&来指示需要对齐的位置。请使用右键查看上述公式的代码。

分类表达式

定义函数的时候经常需要分情况给出表达式,可使用 \begin{cases}…\end{cases}。其中,使用\来分类,使用&指示需要对齐的位置。如:

上述公式的括号也可以移动到右侧,不过需要使用array来实现,如下:

最后,如果想分类之间的垂直间隔变大,可以使用[2ex]代替\来分隔不同的情况。(3ex,4ex也可以用,1ex相当于原始距离)。

空间问题

不要在指数或者积分中使用 \frac
在指数或者积分表达式中使用\frac会使表达式看起来不清晰,因此在专业的数学排版中很少被使用。应该使用一个水平的/来代替,效果如下:

使用 \mid 代替 | 作为分隔符
符号|作为分隔符时有排版空间大小的问题,应该使用\mid代替。效果如下:

此外,在微分前应该使用\,来增加些许空间,否则$\TeX$会将微分紧凑地排列在一起。如下:

连分数

书写连分数表达式时,请使用\cfrac代替\frac或者\over两者效果对比如下:

方程组

使用\begin{array} … \end{array}\left{…\right.配合,表示方程组,如:

同时,还可以使用\begin{cases}…\end{cases}表达同样的方程组,如:

对齐方程组中的 = 号,可以使用 \being{aligned} .. \end{aligned},如:

颜色

命名颜色是浏览器相关的,如果浏览器没有定义相关的颜色名称,则相关文本将被渲染为黑色。以下颜色是HTML4与CSS2标准中定义的一些颜色,其应该被大多数浏览器定义了。

此外,HTML5与CSS3也定义了一些颜色名称。同时,颜色也可以使用#rgb的形式来表示,r、g、b分别表示代表颜色值得16进制数,如:\color{\#0F0}{text}.更多点击这里HTML色彩快速参考手册

删除线

参考资料

转载自: http://blog.mobing.net/content/hexo/hexo-mathjax.html


施工中...