让hexo支持数学公式和换行
Xhofe Lv3

问题

大部分的hexo主题自带的数学公式支持都是使用mathjax,但是这个插件的支持不是很好,有很多的公式无法正常显示。在网上搜索一番后,似乎是因为和markdown语法的冲突,发现很多人都推荐使用hexo-renderer-markdown-it-plus,它使用katex来支持数学公式的渲染但是安装之后又发现另一个问题,公式无法换行,在摸索了很长时间之后,最终发现是katex的版本的问题,然后找到了另一个渲染的库:@upupming/hexo-renderer-markdown-it-plus。现将使用的过程记录如下:

解决方法

首先需要替换默认的markdown渲染器:

1
2
npm un hexo-renderer-marked --save
npm i @upupming/hexo-renderer-markdown-it-plus --save

然后需要引入katex的样式文件,这里要注意官方的文档里用的还是0.9.0的老版本同样不支持换行,所以需要改成0.10.2的版本,这里使用字节的cdn:

1
<link href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/KaTeX/0.10.2/katex.min.css" rel="stylesheet">

现在就可以随意的书写数学公式了,比如:

S(x,y)=[lN(x,y)]αNj=1N[cj(x,y)]βi[lN(x,y)]γjS(x,y)=\left[l_N(x,y)\right]^{\alpha_N}\prod_{j=1}^{N}\left[c_j(x,y)\right]^{\beta_i}\left[l_N(x,y)\right]^{\gamma_j}

拓展

这里可能还会有一个问题就是,如果公式很长但是屏幕又很窄,公式就有可能超出屏幕,让主题变得很难看,可以添加一个css来改进这个问题:

1
2
3
4
.katex-display {
overflow-x: auto;
overflow-y: clip;
}
  • 本文标题:让hexo支持数学公式和换行
  • 本文作者:Xhofe
  • 创建时间:2022-03-20 14:08:00
  • 本文链接:https://nn.ci/posts/hexo-katex.html
  • 版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
 评论