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 ---
# 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
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