0%

Hexo MarkDown 扩展

起因

将MarkDown扩展 适应更多编辑的需要

配置环境

  • Node
  • Git

数学符号

插件 mathjax

1. 安装插件

1
2
npm un hexo-renderer-marked  // 删除默认markdown渲染模板
npm i hexo-renderer-pandoc // 使用 pandoc 模板

我使用pandoc 模板渲染有问题,估计是pandoc和我的next,hexo 版本不兼容

使用kramed 没问题

1
2
npm un hexo-renderer-marked  // 删除默认markdown渲染模板
npm i hexo-renderer-kramed // 使用 kramed 模板

2. 修改 主题配置 site/themes/next/_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Math Formulas Render Support
math:
# 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

# hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support.
mathjax:
enable: true
# See: https://mhchem.github.io/MathJax-mhchem/
mhchem: false

# hexo-renderer-markdown-it-plus (or hexo-renderer-markdown-it with markdown-it-katex plugin) required for full Katex support.
katex:
enable: false
# See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
copy_tex: false

3. Post中声明使用 mathjax

如下:

1
2
3
4
5
6
---
title: On the Electrodynamics of Moving Bodies
categories: Physics
date: 1905-06-30 12:00:00
mathjax: true
---

4. 书写规范 示例

1
2
3
4
5
6
7
8
9
10
$$
i\hbar\frac{\partial}{\partial t}\psi=-\frac{\hbar^2}{2m}\nabla^2\psi+V\psi
$$

\begin{eqnarray\*}
\nabla\cdot\vec{E}&=&\frac{\rho}{\epsilon_0}\\\\
\nabla\cdot\vec{B}&=&0\\\\
\nabla\times\vec{E}&=&-\frac{\partial B}{\partial t}\\\\
\nabla\times\vec{B}&=&\mu_0\left(\vec{J}+\epsilon_0\frac{\partial E}{\partial t}\right)\\\\
\end{eqnarray\*}

\begin{eqnarray*}
\nabla\cdot\vec{E}&=&\frac{\rho}{\epsilon_0}\\
\nabla\cdot\vec{B}&=&0\\
\nabla\times\vec{E}&=&-\frac{\partial B}{\partial t}\\
\nabla\times\vec{B}&=&\mu_0\left(\vec{J}+\epsilon_0\frac{\partial E}{\partial t}\right)\\
\end{eqnarray*}

插件KaTeX(未尝试)

据说比 MathJax 效率高,但支持度不如MathJax

1. 安装插件

1
2
npm un hexo-renderer-marked --save  // 删除默认markdown渲染模板
npm i hexo-renderer-markdown-it-plus --save // 使用markdown-it-plus 渲染

2. 修改主题配置文件 next/_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# Math Formulas Render Support
math:
enable: 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 #如果这个选项是false,那么每一个网页都会引入公式渲染,这是很浪费的,只需要在需要公式渲染功能的博文md文件的头部,添加一行`mathjax: true`(使用Katex引擎渲染也是在文件头部标记`mathjax: true`,表示支持公式)
engine: Katex
#engine: mathjax
# hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support.
mathjax:
enable: false
# See: https://mhchem.github.io/MathJax-mhchem/
mhchem: false

# hexo-renderer-markdown-it-plus (or hexo-renderer-markdown-it with markdown-it-katex plugin) required for full Katex support.
katex:
enable: true
# See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
copy_tex: false

流程图 flow charts

1. 安装

1
npm install --save hexo-filter-flowchart

2. 修改配置文件 sitre/_config.yml

1
2
3
4
flowchart:
# raphael: # optional, the source url of raphael.js
# flowchart: # optional, the source url of flowchart.js
options: # options used for `drawSVG`

3. 使用声明

在markdown中使用 需要将代码声明在 flow 代码块中

1
2
3
(```)flow
code
(```)

请忽略括号,这里是为了防止转义

4. 使用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
st=>start: Start|past:>http://www.google.com[blank]
e=>end: End:>http://www.google.com
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved:>http://www.google.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|request

st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e

效果

Sequence Diagrams(未尝试)

1. 安装

1
npm install --save hexo-filter-sequence

2. 修改配置 site/_config.yml

1
2
3
4
5
6
7
8
9
sequence:
# webfont: # optional, the source url of webfontloader.js
# snap: # optional, the source url of snap.svg.js
# underscore: # optional, the source url of underscore.js
# sequence: # optional, the source url of sequence-diagram.js
# css: # optional, the url for css, such as hand drawn theme
options:
theme:
css_class:

3. Sequence声明

在markdown中使用 需要将代码声明在 sequence 代码块中

1
2
3
(```)sequence
code
(```)

请忽略括号,这里是为了防止转义

4. 代码示例

1
2
3
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!

效果

1
2
3
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!

流程图时序图 Mermaid

1. 安装

1
npm install hexo-filter-mermaid-diagrams

2. 修改配置 site/themes/next/_config.yml

1
2
3
4
5
# Mermaid tag
mermaid:
enable: true
# Available themes: default | dark | forest | neutral
theme: forest

3. Mermaid声明

在markdown中使用 需要将代码声明在 mermaid 代码块中

1
2
3
(```)mermaid
code
(```)

请忽略括号,这里是为了防止转义

4. 示例

流程图
1
2
3
4
5
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;

效果图

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
时序图
1
2
3
4
5
6
7
8
9
10
11
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail...
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!

效果图

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts 
prevail... John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!
甘特图
1
2
3
4
5
6
7
8
9
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram to mermaid

section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d

效果图

gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid

section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2               :         des4, after des3, 5d
类图
1
2
3
4
5
6
7
8
9
10
11
12
13
14
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label

效果

classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
git 图形
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
gitGraph:
options
{
"nodeSpacing": 150,
"nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch

效果

gitGraph:
options
{
    "nodeSpacing": 150,
    "nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch

参考

PlantUML

Hexo博客系列

  • Hexo博客搭建
  • Hexo更换博客样式
  • Hexo升级Node版本
  • Hexo AMP 支持
  • MarkDown语法
  • Hexo-MarkDown扩展

欢迎关注我的其它发布渠道