在Hexo Next中使用Mermaid图表

发表于 分类于 阅读次数：

在Hexo的 Next中使用Mermaid图表

背景介绍

Mermaid是一个用于生成图表和流程图的JavaScript库。最近在使用Hexo的Next主题写博客时,我想要添加一些流程图,但发现mermaid图表无法正常显示。经过研究,发现这个问题的解决方案其实很简单,特别是对于新版本的Next主题用户。

环境版本

在开始之前,请先确认你的Hexo和Next主题版本。你可以使用以下命令查看:

查看Hexo版本:

1
2
3
hexo -v
hexo: 7.3.0
hexo-cli: 4.3.2

查看Next主题版本:

1
2
3
4
5
cat themes/next/package.json
{
  "name": "hexo-theme-next",
  "version": "8.21.1"
}

解决方案

网上很多教程建议安装hexo-filter-mermaid-diagrams插件并下载相关JS文件,但这种方法已经过时了。事实上,在Next主题8.20版本之后,已经内置了mermaid支持,我们只需要简单配置就可以了。

具体步骤如下:

  1. 如果你之前安装过mermaid-filter插件,需要先卸载它:

    1
    npm uninstall hexo-filter-mermaid-diagrams

  2. 修改 Hexo 根目录下的_config.yml文件，添加以下配置以确保 mermaid 代码块不会被当作普通代码处理：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    highlight:
      line_number: true
      auto_detect: false
      tab_replace: ''
      wrap: true
      hljs: false
      # 添加exclude_languages配置
      exclude_languages:
        - mermaid

  3. 重新生成网站:

    1
    2
    3
    hexo clean
    hexo generate
    hexo server

总结

通过以上配置,你就可以在Hexo的Next主题下正常使用mermaid语法来创建图表了。这个方案适用于Next主题8.20及以上版本,不需要安装额外的插件,配置简单快捷。

参考