Hexo博客显示数学公式|Cards主题

痛，太痛了

前言

最早的时候上网搜的大致流程是安装hexo-filter-mathjax然后安装渲染器hexo-renderer-kramed，但是我在装kramed的时候说highlight的版本不兼容，装的是最新版11.x需要的版本是9.x，也不怎么想调版本，打开hexo-filter-mathjax的readme文档，它推荐安装的渲染器是hexo-renderer-pandoc，我们只要使用hexo-filter-mathjax和hexo-renderer-pandoc即可（由于折腾的时候卡了不少步骤，我不能保证里面的每个步骤都是必须的，但是应该没问题）。

之后我又遇到了一个非常难受的问题，那就是不知道为什么pandoc的表格渲染出来，表头和表格会分开，哇真的太难看了，我上网查也没找到问题所在，于是我尝试装了kramed，实际上kramed虽然会警告但其实是不会有影响的，然而kramed其实对公式的支持还是一言难尽，我在渲染多行公式的时候下面的文字以及行号会出问题，在终于接受Mathjax实在没办法同时解决上述这两个问题后，我决定使用KateX，于是我也开始后悔为什么没早用KateX。

下面我也会分Mathjax和KateX的配置方法分开来讲（如果你没有特别需要，那么我还是推荐KateX，两者的区别在网上也能看得到）。

需要注意的是博客的Front-matter的选项取决于你的主题，我这里的是Cards主题，具体请查看主题的文档

Mathjax

hexo-filter-mathjax

先检查是否安装了hexo-math
```
npm list hexo-math
```
如果出现empty则表示没有安装，否则我们需要先卸载
```
npm uninstall hexo-math --save
```
安装hexo-filter-mathjax
```
npm install hexo-filter-mathjax --save
```

打开根目录下的_config.yml，不是主题的那个，添加如下代码，该代码的解释可以在hexo-filter-mathjax的reame文档找到

# Mathjax
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-renderer-pandoc

卸载hexo-renderer-marked，不再赘述原生的渲染器有什么问题了
```
npm uninstall hexo-renderer-marked
```
安装Pandoc

Pandoc - Installing pandoc
npm安装hexo-renderer-pandoc
```
npm install hexo-renderer-pandoc
```

在根目录下的_config.yml指定pandoc的路径能够更快地找到pandoc（官方文档大概是这个意思）

# pandoc
pandoc:
  # 此处填的是你的pandoc的路径
  pandoc_path: "C:/Users/Jason/AppData/Local/Pandoc/pandoc.exe"
  filters:
  extra:
  template:
  meta:
  mathEngine: # 默认为mathjax

公式格式

公式格式为lateX，需要注意的是公式的注意事项，在readme文档都有写，在node_modules文件夹下找到对应的模块即可找到文档，这里还是归纳出来：

在Front-matter中添加：
```
---
mathjax: true
---
```
行内公式$不要贴着加空格，也就是开头的$的后面以及结尾的$的前面不要加空格，例：
```
-$ \epsilon_0 $
+$\epsilon_0$
-$ \frac{\partial}{\partial t} $
+$\frac{\partial}{\partial t}$
```

行间公式的$$注意中间只能有一行，不要出现额外的回车，例：

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

多行的显示在mathjax3.0中不再支持\\，可以用\displaylines，issues链接，例：
```
+\displaylines{x+y=1\\2x+y=3}
-x+y=1\\2x+y=3
```

KateX

首先要说的是关于格式，KateX的换行直接使用\\即可，所以用KateX就能比较准确地对上Markdown预览的格式。接下来我们来说步骤。

hexo-renderer-markdown-it-plus

卸载本来的渲染器
安装渲染器hexo-renderer-markdown-it-plus，自动包含了hexo-renderer-markdown-it-katex该渲染器对katex支持得很好，同时比原生的marked渲染器还快，比pandoc就更快了
```
npm i hexo-renderer-markdown-it-plus --save
```

在根目录下的_config.yml文件中添加配置代码

markdown_it_plus:
    highlight: true
    html: true
    xhtmlOut: true
    breaks: true
    langPrefix:
    linkify: true
    typographer:
    quotes: “”‘’
    pre_class: highlight

使用KateX

在根目录下的_config.yml文件中添加math模块，指定engine

# Math Equations Render Support
math:
  enable: true

  # Default(true) will load mathjax/katex script on demand
  # That is it only render those page who has 'mathjax: true' in Front Matter.
  # If you set it to false, it will load mathjax/katex srcipt EVERY PAGE.
  per_page: true

  #engine: mathjax
  engine: katex

在文章的Front-matter中添加：
```
---
katex: true
---
```

碎碎念

本来是在写别的博客，突然要写一条公式才发现显示公式还挺麻烦的，当时选Card主题也是因为比较戳我，不过其实看网上我还是感觉Next主题的教程实在是丰富，不过我本来也是喜欢折腾的人，如果这篇博客能帮到谁那也是很不错的。

难蚌，因为大部分的博客都比较老了，所以上网搜索的话其实很可能直接就选Mathjax，毕竟基数大。总之各有好处吧，问题的出现总是很突然，说不定我用着用着KateX也出问题。