Hexo模版数学公式支持

使Simple主题支持数学公式

在使用 hexo 主题模版 hexo-theme-simple99 的时候，发现该模版并不支持数学公式的渲染，随即动手开始改造改模版使其支持数学公式的解析。

参考文献

• Katex渲染器语法参考：https://katex.org/docs/supported.html
• 配置的参数说明：https://blog.csdn.net/qq_36667170/article/details/105846999
• 常见错误（$转义）：https://github.com/theme-kaze/hexo-theme-kaze/issues/24
• 常见错误（unicode错误）：http://mtw.so/6qEG7l

部署过程

插件安装

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

修改主题的配置文件

在主题模版的_config.yml中编辑:

# 数学公式支持
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
  anchors:
    level: 2
    collisionSuffix: 'v'
    permalink: true
    permalinkClass: header-anchor
    permalinkSide: 'left'
    permalinkSymbol: ¶

主题head.ejs中引入css

在主题文件 themes/simple/layout/partials/head.ejs 中，引入 css 的公式样式文件

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

写作过程中的注意事项

1、在 markdown 头定义的时候要定义的时候记得要开启数学公式的支持

---
title: Hexo 数学公式支持
toc: true
categories: blog
abbrlink: 712298389
date: 2021-01-21 18:30:41
mathjax: true
katex: true
---

2、为了方便使用，可以先在在线公式编辑器编辑好公式，然后粘贴到 markdown 文档中

• https://www.codecogs.com/latex/eqneditor.php
• https://zh.numberempire.com/latexequationeditor.php

重新编译

hexo clean && hexo g

最后重新编译部署。可能会提示插件markdown-it-katex不存在，使用命令npm install markdown-it-katex --save安装即可。

测试数学公式的渲染

$$ 
\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6} 
$$

$$\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}$$

$$
f(n) =
\begin{cases}
n/2,  & \text{if $n$ is even} \\
3n+1, & \text{if $n$ is odd}
\end{cases}
$$

$$f(n) = \begin{cases} n/2, & \text{if $n$ is even} \\ 3n+1, & \text{if $n$ is odd} \end{cases}$$

$$
\left[
    \begin{array}{cc|c}
      1&2&3\\
      4&5&6
    \end{array}
\right] 
$$

$$\left[ \begin{array}{cc|c} 1&2&3\\ 4&5&6 \end{array} \right]$$