Hexo-markmap Demo

hexo-markmap

在你的博客中使用 markdown 插入思维导图，使用 markmap。

现已经支持 链接、代码块、markdown、KaTeX、多行代码语法的渲染！

多行代码仍有一定渲染问题，可能出现报错。

安装

1
npm install hexo-markmap --save-dev

使用

1
2
3
4
{% markmap height [depth] %}
- Markdown
- Syntax
{% endmarkmap %}

参数

  • height: 画布高度
  • depth: 可选，自动折叠层数深于 depth 的节点

示例

1
2
3
4
5
6
7
8
9
10
11
12
{% markmap 400px %}
- links
- **inline** ~~text~~ *styles*
- multiline
  text
- `inline code`
- ```js
  console.log('code block');
  console.log('code block');
  ```
- KaTeX - $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
{% endmarkmap %}

配置文件

将相应内容追加到 config.yml 中。

约定大于配置，如果你不需要以下某个功能，那么无需添加该配置项。

默认情况下，他可以很好的正常工作。每个选项都有缺省项。

锁定视图

默认值 false

关闭视图的放缩（zoom）、平移（pan）功能。

1
2
hexo_markmap:
  lockView: true

缺省项

1
2
3
4
5
6
7
8
9
10
11
hexo_markmap:
  pjax: false
  katex: false
  prism: false
  userCDN:
    d3_js: https://fastly.jsdelivr.net/npm/d3@6
    markmap_view_js: https://fastly.jsdelivr.net/npm/markmap-view@0.2.7
    katex_css: https://fastly.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css
    prism_css: https://fastly.jsdelivr.net/npm/prismjs@1.25.0/themes/prism.css
  lockView: false
  fixSVGAttrNaN: false