Hexo引入Mermaid流程图和MathJax数学公式

近来用Markdown写文章,越来越不喜欢插入图片了,一切能用语法解决的问题坚决不放图,原因有二:

  1. 如果把流程图和数学公式都以图片方式放到文章内,当部署到Github上后,访问博客时图片加载实在太慢,有时一篇文章需要画10来个流程图,那你就得截图10来多次,还得给这些图片想一个合适的名字,同时插入图片的时候还要注意图片的插入位置和顺序;
  2. 如果你要把文章发布到其他博客平台,如CSDN、博客园,在每一个平台上你都要插入10来多次图片,作为程序员,这种笨拙又耗时的方法,我实在不能忍。

于是愤而搜索,Mermaid语法可实现流程图功能,MathJax语法可实现数学公式和特殊符号的功能,只需要遵循其语法规则即可,这也不由得让我想起:“苏乞儿打完降龙十八掌前17掌之后幡然领悟出第18掌的奥妙时说的那句话:我实在是太聪明了!”。下面都以next主题为例,我的主题是https://github.com/theme-next/hexo-theme-next

Mermaid

  1. 如果你用的主题和我的主题仓库是同一个,你只需修改blog/themes/next/_config.yml内mermaid模块enable为true,其他的啥也不用做。
$cd blog/  # 走到博客根目录
$yarn add hexo-filter-mermaid-diagrams  # 安装mermaid插件

# Mermaid tag
mermaid:
  enable: true
  # Available themes: default | dark | forest | neutral
  theme: forest
  cdn: //cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js
  #cdn: //cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js
  1. 如果你的不是next主题或者你的next主题是github上旧版本仓库,你首先需要查看themes/next/_config.yml内是否有mermaid模块,如果有,按照前面的方法1,执行完方法1后,如果不奏效,不要改回去,接着下面的内容继续配置。如果没有mermaid模块,仍然着接下面内容继续配置。
  • 编辑博客根目录下的blog/_config.yml,在最后添加如下内容:
# mermaid chart
mermaid: ## mermaid url https://github.com/knsv/mermaid
  enable: true  # default true
  version: "7.1.2" # default v7.1.2
  options:  # find more api options from https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js
    #startOnload: true  // default true
  • 编辑blog/themes/next/layout/_partials/footer.swig,在最后添加如下内容:
{% if theme.mermaid.enable %}
  <script src='https://unpkg.com/[email protected]{{ theme.mermaid.version }}/dist/mermaid.min.js'></script>
  <script>
    if (window.mermaid) {
      mermaid.initialize({{ JSON.stringify(theme.mermaid.options) }});
    }
  </script>
{% endif %}

如果你的主题下没有footer.swig文件,你需要在你的主题目录下搜索文件名为after-footer.ejs和after_footer.pug的文件,根据文件名的不同在其最后添加不同的内容,这点在github上的 hexo-filter-mermaid-diagrams 教程已经明确交代了。

# 若是after_footer.pug,在最后添加内容
if theme.mermaid.enable == true
  script(type='text/javascript', id='maid-script' mermaidoptioins=theme.mermaid.options src='https://unpkg.com/[email protected]'+ theme.mermaid.version + '/dist/mermaid.min.js' + '?v=' + theme.version)
  script.
    if (window.mermaid) {
      var options = JSON.parse(document.getElementById('maid-script').getAttribute('mermaidoptioins'));
      mermaid.initialize(options);
    }

# 若是after-footer.ejs,在最后添加
<% if (theme.mermaid.enable) { %>
  <script src='https://unpkg.com/[email protected]<%= theme.mermaid.version %>/dist/mermaid.min.js'></script>
  <script>
    if (window.mermaid) {
      mermaid.initialize({theme: 'forest'});
    }
  </script>
<% } %>
  • 最后,赶紧部署到github上观看效果吧,如果不奏效的话,把blog/_config.yml中的external_link设置为false和设置为true都试下,这点在github教程上也已经交代了,因为我的next版本不涉及这个问题,请君多试。
!!!Notice: if you want to use 'Class diagram', please edit your '_config.yml' file, set external_link: false. - hexo bug.
  1. 前两步做完后,如果都不奏效,这里还有一招绝杀技,那就是打开blog/public目录下你写的文章的index.html。
  • 搜索“mermaid”,所有的流程图都应该是括在一个标签类的,如果你的流程图没有class = “mermaid”,那就是第一步安装的hexo-filter-mermaid-diagrams插件没有解析成功,可能是hexo,node,yarn版本问题所致。
# 流程图解析为:<pre class="mermaid">流程图</pre>
<pre class="mermaid">graph LR
A[Bob<br>输入明文P] -->|P|B["Bob的私钥PRbob<br>加密算法(如RSA)<br>C=E(PRbob,P)"];
B -->|传输数字签名C|C["Alice的公钥环{PUbob,……}<br>解密算法(如RSA)<br>P=D(PUbob,C)"];
C -->|P|D["Alice<br>输出明文P"];</pre>
  • 若流程图确实解析成功了,但是web仍然不显示流程图,说明js文件引入失败,继续在index.html中搜索“mermaid.min.js”,正常情况下需要有如下内容,如果没有,在文件最后的"body"之前添加上,之后再部署观看效果,到此理论上应该可以了,如果还是不行,仔细检查下有没有遗漏步骤,考验你解bug的时候到了。
  <script src="https://unpkg.com/[email protected]/dist/mermaid.min.js"></script>
  <script>
    if (window.mermaid) {
      mermaid.initialize({theme: 'forest'});
    }
  </script>

MathJax

我的主题只需修改blog/themes/next/_config.yml内math模块enable为true即可,不需要安装任何插件,其他主题也可以试下该方法可行否,都大同小异。

# Math Equations Render Support
math:
  enable: true       # 这里改为true

  # Default (true) 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 false, it will load mathjax / katex srcipt EVERY PAGE.
  per_page: true

  engine: mathjax
  #engine: katex

  # hexo-rendering-pandoc (or hexo-renderer-kramed) needed to full MathJax support.
  mathjax:
    cdn: //cdn.jsdelivr.net/npm/[email protected]/MathJax.js?config=TeX-AMS-MML_HTMLorMML
    #cdn: //cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML

    # See: https://mhchem.github.io/MathJax-mhchem/
    #mhchem: //cdn.jsdelivr.net/npm/[email protected]
    #mhchem: //cdnjs.cloudflare.com/ajax/libs/mathjax-mhchem/3.3.0

  # hexo-renderer-markdown-it-plus (or hexo-renderer-markdown-it with markdown-it-katex plugin) needed to full Katex support.
  katex:
    cdn: //cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css
    #cdn: //cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css

    copy_tex:
      # See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
      enable: false
      copy_tex_js: //cdn.jsdelivr.net/npm/[email protected]/dist/contrib/copy-tex.min.js
      copy_tex_css: //cdn.jsdelivr.net/npm/[email protected]/dist/contrib/copy-tex.min.css

参考文献

MathJax语法规则
Mermaid语法规则
Mermaid官方教程
Mermaid Github仓库
MathJax Github仓库

原文地址:https://www.cnblogs.com/icoty23/p/10911231.html

时间: 2024-11-09 04:49:56

Hexo引入Mermaid流程图和MathJax数学公式的相关文章

在Hexo中渲染MathJax数学公式

最近学机器学习涉及很多的数学公式,公式如果用截图显示,会比较low而且不方便.因此需要对Hexo做些配置,支持公式渲染.同时文末整理了各种公式的书写心得,比如矩阵.大小括号.手动编号.上下角标和多行对其等,有兴趣的可以看看. 通过hexo-math插件安装MathJax 有个插件hexo-math,可以给Hexo博客添加MathJax公式支持,GitHub地址 https://github.com/hexojs/hexo-math 安装方法可其他hexo插件一样,在博客根目录执行npm inst

hexo 搭建静态博客 + Next 主题配置

参考手册 HEXO:https://hexo.io/zh-cn/ NEXT:http://theme-next.iissnan.com/ 安装hexo npm install hexo-cli -g 或者可以局部安装 hexo npm install hexo -S 初始化博客 hexo init xxx 或者进入到一个空文件夹里,执行:hexo init 网站配置文件详解 # Hexo Configuration ## Docs: https://hexo.io/docs/configurat

hexo使用技巧

将博客文件保存为UTF-8即可解决问题. 方法: 1.将博客文件保存为UTF-8 用记事本打开本地的博客文件"xxx.md",然后点"另存为","编码(E):"选择"UTF-8", 点击"保存",替换原文件. 2.重新生成,部署,博客乱码即消除. Hexo的使用 接下来,我们要对Hexo做更全面的了解,才能做出个性化一的博客. 3.1 目录和文件 先来看一下,默认生成了哪些东西. scaffolds 脚手架

在博客园中配置MathJax

对于经常在博客中撰写学术与技术类文章的网友来说,能够直接插入LaTeX数学公式是一项非常实用与方便的功能.幸好博客园已经提供了对MathJax数学公式的支持,只要在博客后台管理界面中的“选项”一栏中勾选“启用数学公式支持”即可.接下来,为了使用自定义的LaTeX命令与数学符号,一般来说,就需要使用Javascript对MathJax予以配置.相应的配置脚本则需要在博客后台管理界面中的“设置”页面中予以添加.然而,经过测试发现,当尝试将配置脚本贴入“设置”页面中的“页首”.“页脚”.“公告栏”这几

Hexo+NexT(三):Next主题配置详解

阅读本篇之前,假定读者已经有了Node.js的基础,如需要补充Node.js知识的,请自行百度. Hexo是在Node.js框架下的一个项目,利用Node.js提供的强大功能,完成从Markdown到静态网页的转换. NexT是Hexo项目下的一个主题插件,提供可高度定制的页面外观. 本文章对NexT主题配置文件_config.yml中的配置进行详细的讲解. Hexo博客专题索引页 1. NexT主题配置文件详解 Hexo版本-3.8.0,NexT版本-5.1.4 NexT主题配置文件详解 #

Mermaid 学习

在 VS code 中安装插件 Markdown Preview Mermaid Support,则便可支持 Mermaid 流程图 flowchart graph LR; A-->B; A-->C; B-->D; C-->D; 时序图 sequence diagram sequenceDiagram participant Alice participant Bob Alice->John:Hello John, how are you? loop Healthcheck

Markdown Mermaid

Mermaid 是一个用于画流程图.状态图.时序图.甘特图的库,使用 JS 进行本地渲染,广泛集成于许多 Markdown 编辑器中. 之前用过 PlantUML,但是发现这个东西的实现原理是生成 UML 的图片后上传服务端,每次再从服务端读取,因此觉得不够鲁棒,隐私性也不好,因而弃用. Mermaid 作为一个使用 JS 渲染的库,生成的不是一个"图片",而是一段 HTML 代码,因此安全许多. 接下来介绍 Mermaid 的流程图及序列图的语法,也就是大家在工作中常使用的图表. 官

基于github与hexo搭建个人博客

1.Hexo简单实用 hexo中文文档:https://hexo.io/zh-cn/docs/ 1.1什么是hexo? Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页. 1.2安装hexo 1.hexo基于node.js,所以需要先安装node.js 2.安装 Hexo (1)全局安装hexo cnpm install hexo -g (2)查看版本 $ hexo -v hexo-cli: 3.1.

小书匠语法使用手册

小书匠语法使用手册 小书匠 语法 MARKDOWN 帮助 常用语法 标题 1这是 H1 一级标题 2------ 3这是 H2 二级标题 4====== 5# 这是 H1 一级标题 6## 这是 H2 二级标题 7### 这是 H3 三级标题 8#### 这是 H4 四级标题 9##### 这是 H5 五级标题 10###### 这是 H6 六级标题 11 快捷键: [ctrl + h] 列表 无序列表 1* 项目1 2 * 子项目1.1 3 * 子项目1.2 4 * 子项目1.2.1 5* 项