digital

Hexo 博客启用对数学公式的支持

Contents
  1. 1. 安装渲染插件
  2. 2. 修改文章模板
  3. 3. 修改主题布局模板
    1. 3.1. 阅读全文后启用支持
    2. 3.2. 直接全部启用支持
  4. 4. 编辑配置文件
  5. 5. 用法
  6. 6. References

本文以 Hexo 默认主题 landscape 为例，介绍如何添加对数学公式的显示支持。

安装渲染插件

卸载掉 hexo-renderer-marked ，替换为 hexo-renderer-markdown-it-plus 。

1
2
npm un hexo-renderer-marked --save
npm i hexo-renderer-markdown-it-plus --save

修改文章模板

修改/scaffolds/post.md 文件，在 — 前添加一行 math: false 。故如果某篇文章想启用数学公式支持，需将 false 改为 true 。

修改主题布局模板

有以下两种选择：

阅读全文后启用支持

编辑 <hexo dir>/themes/landscape/layout/_partial/article.ejs ，在 </article> 前加入一行代码，添加后效果如下：

/themes/landscape/layout/_partial/head.ejs
1
2
3
4
5
6
7
8
  <% if (!index && post.math){ %>
    <script>
      var assetsString = '<link href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.0/katex.min.css" rel="stylesheet" type="text/css">'
      var pHead = document.getElementsByTagName('head')[0];
      pHead.innerHTML = pHead.innerHTML + assetsString;
    </script>
  <% } %>
</article>

故需将 <!--more--> 放在公式之前。

直接全部启用支持

编辑 <hexo dir>/themes/landscape/layout/_partial/head.ejs ，在 </head> 前加入一行代码，添加后效果如下：

/themes/landscape/layout/_partial/head.ejs
1
2
  <link href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.0/katex.min.css" rel="stylesheet" type="text/css">
</head>

编辑配置文件

在站点配置文件 _config.yml 中加入如下配置：

/_config.yml
1
2
3
4
5
6
7
8
9
10
markdown_it_plus:
  highlight: true
  html: true
  xhtmlOut: true
  breaks: true
  langPrefix:
  linkify: true
  typographer:
  quotes: “”‘’
  pre_class: highlight

用法

整行：

1
$$sin^2\theta + cos^2\theta = 1$$

sin2θ+cos2θ=1sin^2\theta + cos^2\theta = 1

行内：

1
这是一个行内公式： $sin^2\theta + cos^2\theta = 1$

这是一个行内公式： sin2θ+cos2θ=1sin^2\theta + cos^2\theta = 1

测试用例：

1
2
3
4
5
6
7
8
9
10
11
12
$$
\begin{aligned}
f_Y(y) & = f_X[h(y)]|h'(y)| \\[2ex]
& = f_X[h(y)]h'(y) \\[2ex]
& = \frac{1}{\theta}e^{-\frac{x}{\theta}}[\frac{dx}{dy}(-\frac{\theta}{ln(1-y)})] \\[2ex]
& = \frac{1}{\theta}e^{-\frac{-\frac{\theta}{ln(1-y)}}{\theta}}\frac{\theta}{1-y} \\[2ex]
& = \frac{1}{\theta}e^{ln(1-y)}\frac{\theta}{1-y} \\[2ex]
& = \frac{1-y}{\theta}\frac{\theta}{1-y} \\[2ex]
& = 1
\end{aligned}
\tag{1}
$$
1
2
3
4
$$
\frac{1}{\sigma} 
\tag{this is a test}
$$

测试效果：

fY(y)=fX[h(y)]∣h′(y)∣=fX[h(y)]h′(y)=1θe−xθ[dxdy(−θln(1−y))]=1θe−−θln(1−y)θθ1−y=1θeln(1−y)θ1−y=1−yθθ1−y=1(1)\begin{aligned} f_Y(y) & = f_X[h(y)]|h'(y)| \\[2ex] & = f_X[h(y)]h'(y) \\[2ex] & = \frac{1}{\theta}e^{-\frac{x}{\theta}}[\frac{dx}{dy}(-\frac{\theta}{ln(1-y)})] \\[2ex] & = \frac{1}{\theta}e^{-\frac{-\frac{\theta}{ln(1-y)}}{\theta}}\frac{\theta}{1-y} \\[2ex] & = \frac{1}{\theta}e^{ln(1-y)}\frac{\theta}{1-y} \\[2ex] & = \frac{1-y}{\theta}\frac{\theta}{1-y} \\[2ex] & = 1 \end{aligned} \tag{1}

1σ(this is a test)\frac{1}{\sigma} \tag{this is a test}

References

如何在 HEXO 中渲染 Latex 数学公式

katex-v0.10.0-beta 更新

CHENXCHEN/hexo-renderer-markdown-it-plus

Hexo NexT 主题启用 LaTeX

Supported Functions

CSS 样式异步加载

How to append straight markup to HEAD without jQuery?

Font

hexo 中插入数学公式

Mastodon