Hexo LaTeX数学公式渲染

Hexo
4.2k words

Hexo LaTeX数学公式渲染

帖子搬运自Hexo LaTeX数学公式渲染

博主自大二（2023年）起开始使用hexo撰写博客，从最初连node环境都配不好的电脑小白到现在勉强算得上成功摆脱了赛博文盲这一称号的程度。但使用hexo有一个困扰了我很久的问题：Latex公式无法渲染。零零碎碎的尝试过很多帖子的方法，但都没能达成这一目的。今天终于找到了一个成功使得hexo能够渲染latex公式的方法

Hexo支持多种Markdown渲染引擎，其中对数学公式渲染支持最好的当属hexo-render-pandoc。因此，这里只介绍使用Pandoc渲染LaTeX数学公式的方法。

操作方法

  1. 首先在电脑本地安装 Pandoc ，并确保被添加在系统变量中。

博主使用的windows版本，下载了对应版本的zip压缩包后解压并放置到自己习惯的文件夹中

下载pandoc压缩包

打开环境变量 环境变量 然后自己的电脑上配置环境变量，将pandoc所解压的文件夹的绝对路径加入系统变量中path值中 配置pandoc环境变量 1. 卸载原有的渲染引擎 

1
2
npm uninstall hexo-math --save
npm uninstall hexo-renderer-marked --save
1. 安装渲染引擎和插件 
1
2
npm install hexo-renderer-pandoc --save
npm install hexo-filter-mathjax --save
在删除可能冲突的依赖和下载必要组件后，以我自己的项目以来为例，根目录下的package.json如下：

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
{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo server"
  },
  "hexo": {
    "version": "7.3.0"
  },
  "dependencies": {
    "colorjs.io": "^0.5.2",
    "hexo": "^7.3.0",
    "hexo-deployer-git": "^4.0.0",
    "hexo-filter-mathjax": "^0.9.1",
    "hexo-generator-archive": "^2.0.0",
    "hexo-generator-category": "^2.0.0",
    "hexo-generator-index": "^4.0.0",
    "hexo-generator-tag": "^2.0.0",
    "hexo-renderer-ejs": "^2.0.0",
    "hexo-renderer-pandoc": "^0.5.0",
    "hexo-renderer-stylus": "^3.0.1",
    "hexo-server": "^3.0.0",
    "hexo-symbols-count-time": "^0.7.1",
    "hexo-theme-landscape": "^1.0.0",
    "hexo-theme-vivia": "^0.5.0",
    "stylus": "^0.63.0"
  }
}
  1. 修改Hexo根目录的_config.yml配置文件
1
2
3
4
5
6
7
8
9
10
11
mathjax:
  tags: none           # or 'ams' or 'all'
  single_dollars: true # enable single dollar signs as in-line math delimiters
  cjk_width: 0.9       # relative CJK char width
  normal_width: 0.6    # relative normal (monospace) width
  append_css: true     # add CSS to pages rendered by MathJax
  every_page: false    # if true, every page will be rendered by MathJax regardless the `mathjax` setting in Front-matter
  packages:            # extra packages to load
  extension_options: {}
    # you can put your extension options here
    # see http://docs.mathjax.org/en/latest/options/input/tex.html#tex-extension-options for more detail

此配置是对插件hexo-filter-mathjax进行设置，详细设置可以参考该插件的主页。

  1. 如果在上一步配置了every_page: false，即默认不开启数学公式渲染功能，则只在需要渲染LaTeX的Markdown文件前部添加mathjax选项
1
2
3
4
5
6
---
title: Hexo LaTeX数学公式渲染
date: 2025-05-24 09:02:06
category: Hexo
mathjax: true
---

重新运行hexo:

1
hexo cl && hexo g && hexo s

问题

Pandoc自动图注渲染

使用pandoc渲染会自动为图片添加题注，如果想要去掉图注，在_config.yml中设置

1
2
3
pandoc:
  extensions:
    - '-implicit_figures'

LaTeX行内数学公式渲染

按照hexo-filter-mathjax的说明，行内公式（...）的起始符号后面不能有空格，结束符号前面也不能有空格，实际测试中则相反——起始符号后面需有空格，结束符号前面也需要空格，才能正确渲染。

  • $Ax=b$:Ax = b
  • $ Ax=b $:

MathJax包的使用

hexo-filter-mathjax默认启用的所有包，但在行内公式使用时需要进行转义。

测试

行间公式

1
$$ \boldsymbol{Ax}=\color{red}\boldsymbol{b} $$

1
2
3
4
5
6
$$
y(t)=\begin{cases}
0, & x(t)<0 \\
x(t)+x(t-2), & x(t) +2\geqslant 0
\end{cases}
$$

1
$$i\hbar\frac{\partial}{\partial t}\psi=-\frac{\hbar^2}{2m}\nabla^2\psi+V\psi$$

1
2
3
4
5
6
7
8
$$
\begin{aligned}
\nabla\cdot\vec{E}&=\frac{\rho}{\epsilon_0}\\
\nabla\cdot\vec{B}&=0\\
\nabla\times\vec{E}&=-\frac{\partial B}{\partial t}\\
\nabla\times\vec{B}&=\mu_0\left(\vec{J}+\epsilon_0\frac{\partial E}{\partial t}\right)
\end{aligned}
$$

Comments