配置公式

魔改hexo-theme-butterfly

这篇博客将教你怎么魔改hexo butterfly

主要的修改思想：

  • 显示主要以大方，简约为主，去除掉一些花里胡哨或者是不实用的功能
  • 尽量专业，包含优化理工科常用工具
  • 重构代码块显示
  • 公式使用额外mathjax配置

修改代码块预览

希望能够有：

  1. 使用shiki增强代码高亮风格
  2. 反转行号
  3. wrap折叠单行超长代码
  4. raw预览代码
  5. 显示代码语言和标题

因为我直接自己重新写了一个插件：https://github.com/gxt-kt/hexo-plugin-shiki

直接根据readme安装配置就好了

第二个就是配置公式显示

因为平时markdown用的是typora，typora用的是mathjax，记笔记的notion用的是katex

因此必须要在这两个中选择一个：

  • mathjax
  • katex

实际也在mathjax和katex之间都试了一下，只能说两个都差强人意，选哪个还是看自己选择吧。

考虑了一下，因为以后也要用hexo的md源码形式，所以肯定还是会用typora先本地编写预览一遍，再上传到hexo，所以最终选择了mathjax。

1
2
3
4
npm uninstall hexo-renderer-marked --save # 先卸载原渲染器
npm install hexo-renderer-pandoc --save # 安装hexo-renderer-pandoc
brew install pandoc # 安装pandoc把markdown转成html，本文编写时当前版本是3.2.*
npm install hexo-filter-mathjax --save # 安装mathjax公式渲染插件

安装完成之后，就可以配置插件，主题的配置_config.butterfly.yml是不需要动的，因为我们也没用到这个插件带的公式渲染

在配置文件_config.yml加入以下内容

1
2
3
4
5
6
7
8
9
pandoc:
  args:
    - "-f"
    - "commonmark_x"
    - "-t"
    - "html"
    - "--mathjax"
  extensions:
    - "-implicit_figures"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
mathjax:
  tags: all # 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: true # if true, every page will be rendered by MathJax regardless the `mathjax` setting in Front-matter
  packages:
    - physics
    - mathtools
    - color
    - noerrors
    - amsmath
  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

环境配置完成验证

然后说就可以编写公式查看结果了

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

1
2
3
4
5
$
A = \pi r^2 \label{area}
$

点击跳转到公式 $\ref{area}$ 。

点击跳转到公式 。