🌀
🌀
文章目录
  1. Hexo安装Mathjax要求
  2. 安装支持Mathjax的渲染器
  3. 安装hexo-renderer-mathjax插件包
  4. 配置Blog主题的_config.yml文件
  5. 配置Blog本地根目录下的_config.yml文件
  6. 给文章开启Mathjax渲染
  7. 小结

关于Hexo添加Mathjax相关问题及解决方法

根据Mathjax的配置方法, 步骤有点繁琐
所以自己结合了几篇文章, 解决了部署后网页无法正常显示Mathjax数学公式的问题

Hexo安装Mathjax要求

  • Hexo博客
  • 支持Mathjax的Markdown渲染器: hexo-renderer-kramed
  • 支持Mathjax的Theme(例如: Next, 具体是否支持看主题文件的README.md中是否有写支持, 也可自己添加尝试)

安装支持Mathjax的渲染器

若根据hexo-renderer-mathjax的提示配置
网页上的数学公式能在本地正常显示, 而部署后则不能正常显示
这是由于Hexo默认的渲染器是Marked, 而Marked不支持Mathjax
这里用Kramed渲染器, Kramed支持Mathjax数学公式

  • Marked渲染器改为Kramed渲染器
    1
    2
    $ npm uninstall hexo-renderer-marked --save
    $ npm install hexo-renderer-kramed --save

安装hexo-renderer-mathjax插件包

  • 若已经安装了hexo-math插件包, 先卸载hexo-math插件包, 再安装hexo-renderer-mathjax插件包

    1
    2
    $ npm uninstall hexo-math --save
    $ npm install hexo-renderer-mathjax --save
  • 再更新MathjaxCDN链接, 打开node_modules/hexo-renderer-mathjax/mathjax.html

  • 修改<scripts>标签
    1
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>

配置Blog主题的_config.yml文件

  • 打开Blog主题中的_config.yml文件, 找到其中的math字段(如果没有, 自己添加)
    1
    2
    3
    math:
    enable: true
    engine: mathjax

配置Blog本地根目录下的_config.yml文件

  • 打开Blog本地根目录下的_config.yml文件
  • 添加插件包
    1
    2
    3
    4
    5
    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    Plugins:
    - hexo-renderer-mathjax

给文章开启Mathjax渲染

  • 开启Mathjax渲染
    1
    2
    3
    4
    title:
    date:
    tags:
    mathjax: true

小结

  • 自己在部署网站后遇到的一个小问题, 最终用这个方法解决了, 分享一下
支持一下
(●'◡'●)感谢读者支持🙏
  • 微信扫一扫
  • 支付宝扫一扫