Hexo引入Mermaid流程图和MathJax数学公式
近来用Markdown写文章,越来越不喜欢插入图片了,一切能用语法解决的问题坚决不放图,原因有二:
如果把流程图和数学公式都以图片方式放到文章内,当部署到Github上后,访问博客时图片加载实在太慢,有时一篇文章需要画10来个流程图,那你就得截图10来多次,还得给这些图片想一个合适的名字,同时插入图片的时候还要注意图片的插入位置和顺序;
如果你要把文章发布到其他博客平台,如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/mermaid@8/dist/mermaid.min.js
#cdn: //cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js
2.如果你的不是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/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 == true
script(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.
3.前两步做完后,如果都不奏效,这里还有一招绝杀技,那就是打开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: true
engine: 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.css
copy_tex:
# See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
enable: false
copy_tex_js: //cdn.jsdelivr.net/npm/katex@0/dist/contrib/copy-tex.min.js
copy_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中渲染MathJax数学公式
最近学机器学习涉及很多的数学公式,公式如果用截图显示,会比较low而且不方便.因此需要对Hexo做些配置,支持公式渲染.同时文末整理了各种公式的书写心得,比如矩阵.大小括号.手动编号.上下角标和多行对 ...
- markdown mermaid流程图
流程图 所有流程图都由节点.几何图像.箭头或线条组成. mermaid代码定义了这些节点和边的制作和交互方式.可以有不同的箭头类型.多向箭头以及与子图的连接. 节点 节点 flowchart LR i ...
- Python 实现 Html 转 Markdown(支持 MathJax 数学公式)
因为需要转 html 到 markdown,找了个 python 的库,该库主要是利用正则表达式实现将 Html 转为 Markdown. 数学公式需要自己修改代码来处理. 我 fork 的项目地址: ...
- html中使用mathjax数学公式
测试用例: test.html: <!DOCTYPE html> <html> <head> <link rel="stylesheet" ...
- react引入ggEditor流程图
遇到的问题 1.propsAPI获取不到内容:withPropsAPI包裹的组件必须是GGEditor的子组件. 2.自定义组件如何使用:正确的办法是通过config配置,参照上面的代码(之前我在在内 ...
- hexo博客MathJax公式渲染问题
这个问题自己很早以前便碰到了,用MathJax语法写的一些公式,在本地Markdown编译器上渲染是没问题的,可是部署到hexo博客中就出现问题了,之前我是使用图片代替公式应付过去了,今天从网上找了一 ...
- MathJax: 让前端支持数学公式
文章图片存储在GitHub,网速不佳的朋友,请看<MathJax:让前端支持数学公式> 或者 来我的技术小站 godbmw.com 1. 必须要说 1.1 开发背景 博主使用Vue开发的个 ...
- 推荐一个Markdown数学公式编辑器——Haroopad & Mathjax
要在Markdown里插入数学公式,如果没有好用的的引擎or编辑器,那么只能插入图片了,十分麻烦.这里推荐一个十分强大的数学公式引擎--Mathjax. 配置 有道云笔记目前不支持浏览MathJax公 ...
- Hexo博客美化之蝴蝶(butterfly)主题魔改
Hexo是轻量级的极客博客,因为它简便,轻巧,扩展性强,搭建部署方便深受广大人们的喜爱.各种琳琅满路的Hexo主题也是被各种大佬开发出来,十分钦佩,向大佬仰望,大声称赞:流批!!! 我在翻看各种主 ...
随机推荐
- 一年读100本书---HHR,NZJ---19年最后4个月
那些自律到极致的人,都拥有了开挂的人生.生物钟,绝对一致之后,一切都会很高效. 19年最后一个季度的HHR计划:还剩下3个月的时间,主要搞定几件事情:创业(以太一堂,混沌大学),工作能力(推荐算法工程 ...
- 80端口被system占用
# 开始 今天配置wampserver 3.0.6的时候 发现右下角的图标一直是红色的 经验告诉我两个服务都没有运行 # 解决思路 wampserver有两个服务 一个是 Apache 服务 一个是 ...
- JavaScript 对象的深复制
对象的深复制 源对象的属性更改,不会引起复制后的对象个属性的更改 源对象的任何属性与子属性与新对象的之间没有任何引用关系 Coding: /* 对象的深复制: 1 初始化目标对象 如果没有指定目标对象 ...
- 《实战Java高并发程序设计》读书笔记五
第五章 并行模式与算法 1.单例模式 是一种对象创建模式,用于产生一个对象的具体实例,它可以确保系统一个类只产生一个实例. 对于频繁创建使用的对象可以省略new 操作花费的时间,可以减少系统开销. 由 ...
- Sqoop的安装及常用命令
本次安装主要是为了离线分析数据清洗完成后的操作:网站日志流量分析系统之数据清洗处理(离线分析) 一.概述 1. sqoop是Apache 提供的工具,用于hdfs和关系型数据库之间数据的导入和导入 2 ...
- Cocos2dLua3.17.2集成FairyGUI之 lua绑定 (二)
上一章中将fairyGUI集成到C++工程,由于本人使用的是cocoslua,还需要将C++的绑定到lua中使用,本章记录一下过程,由于是过了一段时间,有些步骤忘记了,大概记录一下,诸位大大做个临时参 ...
- spring 参数校验
1.了解下资源文件加载 MessageSource 需要国际化处理时使用这个类 (在需要处理国际化的地方使用messageSource.getMessage(this.getResponseCod ...
- 【代码总结】PHP面向对象之抽象类
一.什么是抽象方法? 一个方法如果没有方法体(不使用"{}",直接使用分号结束的方法,才是没有方法体的方法),则这个方法就是抽象方法 1.声明一个方法,不使用{},而直接分号结束 ...
- 201771010135杨蓉庆《面向对象程序设计(java)》第六周学习总结
实验六 继承定义与使用 1.实验目的与要求 (1) 理解继承的定义: (2) 掌握子类的定义要求 (3) 掌握多态性的概念及用法: (4) 掌握抽象类的定义及用途: (5) 掌握类中4个成员访问权限修 ...
- WARNING: bridge-nf-call-iptables is disabled解决
执行docker info出现如下警告 WARNING: bridge-nf-call-iptables is disabledWARNING: bridge-nf-call-ip6tables is ...