0%

Hexo支持数学公式

前言

作为水利工程系的一名学生,免不了常常会碰到数学公式。常用的Markdown编辑器是支持公式的输入的,但hexo默认配置在渲染网页时并不会识别出这些公式,并把他们渲染出来。要在网页渲染时,把Markdown的公式自动转换成我们熟悉的公式的表达方式,需要对hexo的默认设置作出一些调整。作者在经过了各种尝试以后,终于找到了问题的解决方案。值得注意的是,这里我选用的next的主题作为我博客的主题。首先展示一下数学公式:

  1. 圆的坐标公式:

  2. 高斯分布的概率密度公式:

安装next主题

  1. git克隆next主题到本地
    1
    $ git clone https://github.com/next-theme/hexo-theme-next  ~/home/dell/blog/themes/next

启用next主题

  1. 更改hexo的配置,我的文件路径为:~/home/dell/blog/_config.yml
    1
    2
    3
    4
    5
    # Extensions
    ## Plugins: https://hexo.io/plugins
    ## Themes: https://hexo.io/themes
    # theme: landscape # 把该行注释掉
    theme: next

修改配置文件

  1. 查看本地默认的数学公式渲染插件

    1
    2
    npm list hexo-renderer-marked
    npm list hexo-math

  2. 删除默认的数学渲染插件

    1
    2
    npm uninstall hexo-renderer-marked --save
    npm uninstall hexo-math --save # 如果有就删除

  3. 安装mathjax渲染插件

    1
    2
    npm install hexo-filter-mathjax --save
    npm install hexo-renderer-pandoc --save

  4. 查看是否安装成功

    1
    2
    npm list hexo-filter-mathjax
    npm list hexo-renderer-pandoc
    Note:如果安装失败,多尝试几次即可。

  5. 由于插件hexo-renderer-pandoc需要pandoc支持,所以要先在系统中安装pandoc

    1
    sudo pacman -S pandoc

  6. 主题文件配置,我的文件路径为:~/home/dell/blog/themes/next/_config.yml

1
2
3
4
5
6
7
8
9
10
math:
# Default (false) will load mathjax / katex script on demand.
# That is it only render those page which has `mathjax: true` in front-matter.
# If you set it to true, it will load mathjax / katex srcipt EVERY PAGE.
every_page: true

mathjax:
enable: true
# Available values: none | ams | all
tags: none

官网中设置 every_page: false ,其考虑的是在没有数学公式的情况下不开启mathjax 以提高网页加载速度。但是在测试进我发现,网页是正常,但是我在文章中使用了<--!more-->设置了摘要,一旦点开全部,则公式就不再被正确显示,而是显示的源码。所以我设置为 true 后,则所有页面匀加载mathjax ,公式可以正常显示。

文章渲染标签

  1. 文章渲染标签设置
    1
    2
    3
    4
    5
    6
    7
    ---
    title: index.html
    date: 2022-12-28 21:01:30
    tags:
    top:
    mathjax: true
    ---

问题汇总

  1. 本地启动hexo预览时,报错Cannot GET, 网页一片空白。 这主要由于在删除了hexo默认的网页渲染插件后,替换的插件未安装上导致,故使用hexo g命令时,可以发现此时生成的public文件夹内,少了一个index.html网页文件。要确保替换的插件安装成功。

  2. 公式渲染后仍是源代码 这可能是由于主题配置文件没有设置好,建议再看一遍流程。

附希腊字母表

字母 Markdown代码
$\alpha$
$\beta$
$\gamma$
$\Gamma$
$\delta$
$\Delta$
$\epsilon$
$\varepsilon$
$\zeta$
$\eta$
$\theta$
$\Theta$
$\vartheta$
$\iota$
$\kappa$
$\Theta$
$\lambda$
$\Lambda$
$\mu$
$\nu$
$\xi$
$\Xi$
$\pi$
$\Pi$
$\varpi$
$\rho$
$\varrho$
$\sigma$
$\Sigma$
$\varsigma$
$\tau$
$\upsilon$
$\Upsilon$
$\phi$
$\Phi$
$\varphi$
$\chi$
$\psi$
$\Psi$
$\Omega$
$\omega$