Blog的搭建过程[ep.4| 基于 KaTeX 为你的博客添加 LaTeX 支持]

前言

诶，终于要写这个了，回想当时搭建博客的时候，就是配置 $\LaTeX$ 花了我好长时间，费老大力气了~

为什么要在博客里搞 $\LaTeX$ 呢？其实网上很多搞前端的大佬，他们会在博客上用自己写的脚本配置出各种各样有趣的模块，但是他们的博客内容大多是普通文字或者代码块，因此这些大佬一般都没有加载 $\LaTeX$ 的需求。咱没啥计算机的技术力，而且有时会写一些和物理数学相关的内容，所以 $\LaTeX$ 就是咱的必需品啦。

我博客中的文章都是用 Markdown 语言写的，Markdown 本身支持 $\LaTeX$ 的行内和行间公式，而且不用像写 Tex 文件那样需要调用各种各样的包，所以写一些理工科和小文章或者像这样的博客会非常方便。在本地，如果你使用 VScode 中的 Markdown 插件就可以实现语法高亮和预览功能，而 Typora（我比较推荐这个）编辑器更是实现了即时编译，即所见即所得。但是线上博客的文章都是 HTML 语言，虽然 Hexo 内置的编译器可以把 Markdown 转换为 HTML ，但是其自带的 $\LaTeX$ 编译器表现得在 Butterfly 主题下表现不好，所以我们就要自己配置这玩意儿了。。。

本博客的 LaTeX 编译器选用 KaTeX，插件选用hexo-renderer-markdown-it

配置过程

插件的选择

先把 Hexo 自带的编译器卸载（要做的，不然你的公式可能会渲染出诡异的东西。。。）

1 2	npm un hexo-renderer-marked --save npm un hexo-renderer-kramed --save

安装需要的编译和渲染插件：

1 2	npm i hexo-renderer-markdown-it --save npm install katex @renbaoshuo/markdown-it-katex

配置文件

修改你 Butterfly 的配置信息：

# KaTeX
katex:
  enable: true
  per_page: false
  hide_scrollbar: true

在你的 Hexo 的 config 文件里加上这么一段话：

# config of hexo-renderer-markdown-it
markdown:
  render:
    html: true
    xhtmlOut: false
    breaks: true
    linkify: true
    typographer: true
    quotes: '“”‘’'
  plugins:
    - '@renbaoshuo/markdown-it-katex'