α-LIB
0%

Hexo教程之MathJax公式渲染问题

发表于 更新于 分类于

今天在写一篇博客的时候，遇到使用MathJax公式下标出现问题，然后在网上找到解决办法

出现问题的原因

hexo默认使用hexo-renderer-marked引擎去渲染网页，它会把利用Markdown语法写的文本去转换为相应的html标签。在利用Markdown写MathJax公式的时候，经常会用到下划线_表示下标，但是下划线_会被hexo的默认引擎hexo-renderer-marked渲染成html中的<em>标签，表示斜体，这样一来，我们写的MathJax公式就被错误渲染了，也就没办法正确显示出来。

解决方法

从上面的分析，我们可以知道问题或许出在hexo的渲染引擎上，如果渲染引擎不把公式中的一些特殊字符渲染成html标签，也就避免了这个问题。当然已经有人意识到了这个问题，并且对原先的渲染引擎进行了改进，生成了新的hexo-renderer-kramed引擎，这里是它的Github页面，所以我们只需要卸载默认引擎，并安装这个新的渲染引擎即可。

1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

当我把渲染引擎更换之后，发现大部分公式都正确渲染了，而从网上其他人的叙述中，也同样提到了这个问题，即是行间公式都没有问题，但是个别行内公式还会出现渲染出错，从网上找到了一个方法，解决了这一问题。
定位到你的博客根目录，找到../node_modules/kramed/lib/rules/inline.js文件，
进行部分修改：

1
2
3
4
//escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,      第11行，将其修改为
escape: /^\\([`*\[\]()#$+\-.!_>])/,
//em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,    第20行，将其修改为
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

它取消了该渲染引擎对 \,{,} 的转义，然后再
1
2
hexo clean
hexo g

重新部署，即可解决问题。

另外需要注意一点，对于需要用到MathJax公式的文章，要在Front-matter中打开MathJax开关，例如：

1
2
3
4
5
6
---
date: 2017/8/3 18:20:00
tags: hexo
mathjax: true
title: hexo博客MathJax公式渲染
---

MathJax公式语法

LaTeX语法
下面呢，我整理总结了一番比较常用的MathJax公式语法，同时也可以用来测试一下渲染效果。

>添加公式的方法

1.行内公式

$行内公式$

2.行间公式

$$行间公式$$

>常用的MathJax公式语法

符号 释义 测试用例 最终效果
^{} 上标 x^{y^z}=(1+e^x)^{-2xy^w} $x^{y^z}=(1+e^x)^{-2xy^w}$
_{} 下标 CO_2 $CO_2$
\frac{分子}{分母} or 分子 \over 分母 分数 f(x,y,z)=3y^2z(3+\frac{7x+5}{1+y^2}) $f(x,y,z)=3y^2z(3+\frac{7x+5}{1+y^2})$
\sqrt[根指数，省略时为2]{被开方数} 开方 \sqrt{2}、\sqrt[3]{9} $\sqrt{2}$ $\sqrt[3]{9}$
\ldots 与文本底线对齐的省略号 x_1x_2{\ldots}x_n $x_1x_2{\ldots}x_n$
\cdots 与文本中线对齐的省略号 x_1x_2{\cdots}x_n $x_1x_2{\cdots}x_n$
\int_积分下限^积分上限(被积表达式) 积分 \int_1^n{x^2}dx $\int_1^n{x^2}dx$
\sum_{下标表达式}^{上标表达式} {累加表达式} 累加 \sum_{i=1}^n \frac{1}{i^2} $\sum_{i=1}^n \frac{1}{i^2}$
\, or ; or \quad or \qquad 不同宽度的空格 a , b \mid a ; b \mid a \quad b \mid a $\qquad b a,b∣a;b∣ab∣aba,b∣a;b∣ab∣ab$
\color{颜色}{文字} 更改文字颜色 \color{red}{红色} $\color{red}{红色}$

上面的一些基本语法使用了行内公式， 渲染效果没有问题，下面再利用行间公式写一些较为复杂的公式。

分段函数

分段函数格式为

1
f(x)=\begin{cases}语句1\\语句2\\...\end{cases}

\text{文字}中仍可以使用$公式$去插入其他公式，所以可以将其结合分段函数一起使用。

实例：
md文本

1
2
3
4
5
6
 $$ 
f(n)=\begin{cases}
n/2, & \text{如果$ x<=2 $}\\
3n+1, & \text{如果$ x>2 $}
\end{cases}
$$

最终效果:

大括号和小括号

()、[]、{}表示的即是符号本身，使用{}来表示{}。但是如果要显示大号的括号时，需要使用\left和\right命令。

实例：

正常括号
md文本

1
2
3
 $$
f([\frac{1+\{x,y\}}{(\frac{x}{y}+\frac{y}{x})(u+1)}+a]^{3\2})
$$

最终效果

大括号
md文本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    $$
f\left(
    \left[
        \frac{
            1+\left\{x,y\right\}
        }{
        \left(
            \frac{x}{y}+\frac{y}{x}
        \right)
        \left(u+1\right)
        }+a
    \right]^{3\2}
\right)
$$

最终效果

添加删除线

使用删除线功能必须使用行间公式，删除线分为片段删除线和整段删除线，样式比较多，在这里我只列举一种比较常用的水平删除线，它属于整段删除线的一种。

整段删除线使用\require{enclose}来显示，声明整段删除线后，使用\enclose{删除线效果}{字符}来实现删除线效果，而水平删除线效果用关键字horizontalstrike。

实例：

md文本

1
2
3
4
5
6
$$
\require{enclose}\begin{array}{}
\enclose{horizontalstrike}{x+y}\\
\enclose{horizontalstrike}{x*y}\\
\end{array}
$$

最终效果

对齐

\begin{align}用于开头，\end{align}用于结尾，对齐的位置用&开始，用\\结束
输入：

1
2
3
4
5
6
$$
\begin{align}
f(x) &=a+b+a\\
& = 2a+b
\end{align}
$$

输出：

相关文章