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

不能适配Katex 0.10.0及以上的方法(其他版本没有测试)

被HEXO渲染Latex公式绊了一段时间,最近终于搞定了,以下是步骤:


步骤

1、卸载Marked渲染器(或其他渲染器),安装Markdown it Plus渲染器
cd到你的blog目录下执行这两个指令:

1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-markdown-it-plus --save

2、2018.7.22更新:
还需要执行下面这个指令,否则会报错(我记得以前是不需要的)

1
npm install markdown-it-katex --save

这个指令是给markdown-it-plus渲染器安装katex支持插件

3、配置_config.yml文件

在文件中添加:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
markdown_it_plus:
highlight: true
html: true
xhtmlOut: true
breaks: true
langPrefix:
linkify: true
typographer:
quotes: “”‘’
plugins:
- plugin:
name: markdown-it-katex
enable: true
- plugin:
name: markdown-it-mark
enable: false

4、在博客html的head中加载Katex的CSS样式
这一步可以手动做,但是每次hexo clean后还得手动一次很麻烦;因为hexo是基于模板生成html文件,所以可以将样式表写入模板中。
以默认主题landscape为例。在路径/themes/landscape/layout/_partial下找到head.ejs文件,将以下语句写入文件中即可

1
<link href="https://cdn.bootcss.com/KaTeX/0.7.1/katex.min.css" rel="stylesheet">

我写入之后是这个样子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<%
var title = page.title;

if (is_archive()){
title = __('archive_a');

if (is_month()){
title += ': ' + page.year + '/' + page.month;
} else if (is_year()){
title += ': ' + page.year;
}
} else if (is_category()){
title = __('category') + ': ' + page.category;
} else if (is_tag()){
title = __('tag') + ': ' + page.tag;
}
%>
<title><% if (title){ %><%= title %> | <% } %><%= config.title %></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<%- open_graph({twitter_id: theme.twitter, google_plus: theme.google_plus, fb_admins: theme.fb_admins, fb_app_id: theme.fb_app_id}) %>
<% if (theme.rss){ %>
<link rel="alternate" href="<%- theme.rss %>" title="<%= config.title %>" type="application/atom+xml">
<% } %>
<% if (theme.favicon){ %>
<link rel="icon" href="<%- theme.favicon %>">
<% } %>
<% if (config.highlight.enable){ %>
<link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
<% } %>
<%- css('css/style') %>
<%- partial('google-analytics') %>

<link href="https://cdn.bootcss.com/KaTeX/0.7.1/katex.min.css" rel="stylesheet">

</head>

5、hexo g与hexo d即可
注意公式的语法可能与Latex语法略有出入,毕竟是Katex渲染器,Katex渲染器的语法支持列表见链接:https://khan.github.io/KaTeX/function-support.html

效果

原Latex语句:

1
2
3
4
5
6
7
8
9
\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}

渲染效果:

fY(y)=fX[h(y)]h(y)=fX[h(y)]h(y)=1θexθ[dxdy(θln(1y))]=1θeθln(1y)θθ1y=1θeln(1y)θ1y=1yθθ1y=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}


参考

http://blog.cofess.com/2017/09/06/how-to-use-mathjax-to-render-latex-mathematical-formulas-in-hexo.html
http://lowrank.science/Hexo-KaTeX/
https://github.com/CHENXCHEN/hexo-renderer-markdown-it-plus

0%