Hexo引入Mermaid流程图和MathJax数学公式
文章目录
- Mermaid
- MathJax
- 参考文献
近来用Markdown写文章,越来越不喜欢插入图片了,一切能用语法解决的问题坚决不放图,原因有二:
如果把流程图和数学公式都以图片方式放到文章内,当部署到Github上后,访问博客时图片加载实在太慢,有时一篇文章需要画10来个流程图,那你就得截图10来多次,还得给这些图片想一个合适的名字,同时插入图片的时候还要注意图片的插入位置和顺序;
如果你要把文章发布到其他博客平台,如CSDN、博客园,在每一个平台上你都要插入10来多次图片,作为程序员,这种笨拙又耗时的方法,我实在不能忍。
于是愤而搜索,Mermaid语法可实现流程图功能,MathJax语法可实现数学公式和特殊符号的功能,只需要遵循其语法规则即可,这也不由得让我想起:“苏乞儿打完降龙十八掌前17掌之后幡然领悟出第18掌的奥妙时说的那句话:我实在是太聪明了!”。下面都以next主题为例,我的主题是https://github.com/theme-next/hexo-theme-next
Mermaid
- 如果你用的主题和我的主题仓库是同一个,你只需修改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 | neutraltheme: forestcdn: //cdn.jsdelivr.net/npm/mermaid@8/dist/mermaid.min.js#cdn: //cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js
- 如果你的不是next主题或者你的next主题是github上旧版本仓库,你首先需要查看themes/next/_config.yml内是否有mermaid模块,如果有,按照前面的方法1,执行完方法1后,如果不奏效,不要改回去,接着下面的内容继续配置。如果没有mermaid模块,仍然着接下面内容继续配置。
- 编辑博客根目录下的blog/_config.yml,在最后添加如下内容:
# mermaid chart
mermaid: ## mermaid url https://github.com/knsv/mermaidenable: true # default trueversion: "7.1.2" # default v7.1.2options: # 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/mermaid@{{ 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 == truescript(type='text/javascript', id='maid-script' mermaidoptioins=theme.mermaid.options src='https://unpkg.com/mermaid@'+ 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/mermaid@<%= 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.
- 前两步做完后,如果都不奏效,这里还有一招绝杀技,那就是打开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/mermaid@7.1.2/dist/mermaid.min.js"></script><script>if (window.mermaid) {mermaid.initialize({theme: 'forest'});}</script>
MathJax
我的主题只需修改blog/themes/next/_config.yml内math模块enable为true即可,不需要安装任何插件,修改之后,在文章的Front Matter栏添加"mathjax: 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: trueengine: mathjax#engine: katex# hexo-rendering-pandoc (or hexo-renderer-kramed) needed to full MathJax support.mathjax:cdn: //cdn.jsdelivr.net/npm/mathjax@2/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/mathjax-mhchem@3#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/katex@0/dist/katex.min.css#cdn: //cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.csscopy_tex:# See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-texenable: falsecopy_tex_js: //cdn.jsdelivr.net/npm/katex@0/dist/contrib/copy-tex.min.jscopy_tex_css: //cdn.jsdelivr.net/npm/katex@0/dist/contrib/copy-tex.min.css
# 文章引入方式
---
title: 常用加密算法的应用
date: 2019-05-20 13:58:36
tags: [对称加密算法,非对称加密算法/公钥算法,Hash函数/散列函数/摘要函数,消息认证,流密码,数字签名/指纹/消息摘要]
categories:- [密码学与信息安全]
copyright: true
mathjax: true # 添加这行,文章才会解析
---
参考文献
[1] MathJax语法规则
[2] Mermaid语法规则
[3] Mermaid官方教程
[4] Mermaid Github仓库
[5] MathJax Github仓库
Hexo引入Mermaid流程图和MathJax数学公式相关推荐
- hexo 利用 Markdown 语法画 mermaid 流程图
hexo默认不支持流程图,flowchart是一种简便好用的解决方案,但由于其语法过于简单,导致其在应付稍复杂一些的流程图时捉襟见肘,本文记录在hexo中添加Mermaid流程图的方法. 添加支持 安 ...
- Markdown 里 mermaid 流程图(flowchart)教程
作者: Jintao 日期:2021-7-12 简介: 未完待续 Markdown 里 mermaid 流程图flowchart教程 前言: 1.0 流程图的方向 TD LR BT RL 2.0 节点 ...
- l流程图平行四边形_关于写作那些事之快速上手Mermaid流程图
本文主要介绍了如何快速上手 Mermaid 流程图,不用贴图上传也不用拖拉点拽绘制,基于源码实时渲染流程图,操作简单易上手,广泛被集成于主流编辑器,包括 markdown 写作环境. 通过本节内容你将 ...
- mermaid流程图工具_MarkDown绘图mermaid流程graph
[注]更多详情请参阅mermaid流程图官方文档. 1. 绘图方向 命令 方向 TB(TD) 从上到下 BT 从下到上 RL 从右到左 LR 从左到右 2. 节点形状 命令 形状 A[text] 文本 ...
- mermaid流程图工具_Markdown高级使用之流程图
文章首发于博客园,转载请注明出处: Markdown高级使用之流程图 - 小白先生哦 - 博客园 流程图在Markdown中的的表现形式就是代码块,代码块语言标记为mermaid.主要内容大体分为:方 ...
- Flowchart流程图和 Mermaid流程图的对比
在CSDN的markdown编辑器里有两种流程图绘制方式,分别是mermaid下的flowchart流程图和graph流程图.两种流程图的语法和绘制效果都有一定区别.本文重点讨论流程图的区别 本文 ...
- mermaid流程图工具_基于 Mermaid 的时序图、流程图和甘特图
简介 Mermaid 是一个用于画流程图.状态图.时序图.甘特图的库,使用 JS 进行本地渲染,广泛集成于许多 Markdown 编辑器中. 之前用过 PlantUML,但是发现这个东西的实现原理是生 ...
- Mermaid流程图
Markdown文档生成流程图.时序图.类图.状态图.ER图.用户旅程图.甘特图.饼图等 官网 Github 项目地址 一.介绍 Mermaid 是一个用于画流程图.状态图.时序图.甘特图的库,使用 ...
- (二)设置hexo支持mermaid
欢迎访问个人网络日志
最新文章
- 嵌入式传感器是智能移动增长的关键
- html怎么将页面放到中间,HTML – 如何将div放在另外两个(左和右)div之间?
- c语言之贪吃蛇源码,C语言之贪吃蛇经典源码
- 计算机组成原理 — 异构计算
- 画原理图和PCB图该注意什么?
- Echarts加载地图的三种方式
- UNIX再学习 -- 高级 I/O
- CheckStyle及其配置的详细解释
- sqlerver 字符串转整型_字符串转换成整型并求和
- iBATIS In Action:什么是iBATIS(二)
- iOS中使用图片作为颜色的背景图
- Android 2.3 Gallery3D添加gif支持——修改代码(三)
- 搜索引擎优化(step-by-step)
- 微信、qq可以上网,但是浏览器却不能上网怎么办
- spark idea报错:json standard allows only one-top level
- 原生js实现点击按钮显示/隐藏图片
- c语言规定对程序中所用的变量必须,【判断题】C语言程序中要用到的变量必须先定义,然后再使用...
- Android -- 创建数据库到SD卡
- 坦克大战第一个不爆炸
- html5有序列表无序列表自定义列表
热门文章
- 新媒体管理师考试中心:新媒体运营知识点汇总
- 北华大学计算机科学技术学院宿舍,【图片】【2017新生咨询专贴】学校寝室介绍|学习生活贴士【北华大学吧】_百度贴吧...
- Nginx搭建文件服务器以及文件在线预览和强制下载
- CSS选择器之复合选择器
- html 字前边自动加点,css实现文字越界加点点点显示,并且后面紧跟一个图标
- LeetCode1218
- 【USB】STM32F103C8单片机上完全用寄存器实现的USB大容量存储设备
- 岁月如白驹过隙,抓住了你就是黑马
- EOG-based eye movement detection and gaze estimation for an asynchronous virtual keyboard基于EOG的异步虚
- sybase用户权限管理3 _角色授予