hexo-markmap

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

安装

1
pnpm add hexo-markmap -D

1
npm install hexo-markmap --save-dev

1
yarn add hexo-markmap --dev

使用

1
{% markmap %}
2
---
3
markmap:
4
  colorFreezeLevel: 2
5
---
6
# Markdown
7
# Syntax
8
{% endmarkmap %}

内联选项

你可以在 markmap 标签（{% markmap %} ... {% endmarkmap %}）中自定义每个思维导图。

Frontmatter 选项

就像你在 Hexo 中的 Markdown 文件中使用 frontmatter 一样，你可以在 markmap 标签中使用 frontmatter 来自定义你的思维导图！

所有 frontmatter 选项都是可选的。

id：用于定义 markmap-wrap 元素的 ID。
markmap：对应 markmap 项目中的 IMarkmapJSONOptions。有关更多详细信息，请参考 jsonOptions。

标签选项

你还可以直接在标签中指定思维导图的高度，默认情况下会根据内容进行计算。

1
{% markmap 300px %}
2
# Markdown
3
# Syntax
4
{% endmarkmap %}

配置

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

目录hexo-project
- config.yml
- 目录source
  - 目录_posts/
    …

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

默认情况下即可正常工作。每个选项都有默认值。

默认配置

1
hexo_markmap:
2
  darkThemeCssSelector: '.dark'
3
  CDN: 'fastly'

darkThemeCssSelector : 用于指定暗黑主题的CSS选择器。
CDN : 用于指定 Markmap 的 CDN。目前支持的值有 fastly 、 jsdelivr、 unpkg。
- 如果设置为 custom，则 customCDN 的值将被用作 CDN 的前缀。
customCDN : 为 Markmap 定义自定义 CDN URL。这必须是一个有效的 URL。
globalOptions : 用于为所有思维导图定义全局选项。
- 对应上面的 Frontmatter 选项。

示例

1
{% markmap %}
2
---
3
markmap:
4
  colorFreezeLevel: 2
5
---
6

7
## Links
8

9
- [Website](https://markmap.js.org/)
10
- [GitHub](https://github.com/gera2ld/markmap)
11

12
## Related Projects
13

14
- [coc-markmap](https://github.com/gera2ld/coc-markmap) for Neovim
15
- [markmap-vscode](https://marketplace.visualstudio.com/items?itemName=gera2ld.markmap-vscode) for VSCode
16
- [eaf-markmap](https://github.com/emacs-eaf/eaf-markmap) for Emacs
17

18
## Features
19

20
Note that if blocks and lists appear at the same level, the lists will be ignored.
21

22
### Lists
23

24
- **strong** ~~del~~ *italic* ==highlight==
25
- `inline code`
26
- [x] checkbox
27
- Katex: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$ <!-- markmap: fold -->
28
  - [More Katex Examples](#?d=gist:af76a4c245b302206b16aec503dbe07b:katex.md)
29
- Now we can wrap very very very very long text based on `maxWidth` option
30
- Ordered list
31
  1. item 1
32
  2. item 2
33

34
### Blocks
35
<!-- To avoid hexo treat the following as code block, we need to use a list -->
36
- ```js
37
  console.log('hello, JavaScript')
38
  ```
39

40
- | Products | Price |
41
  |-|-|
42
  | Apple | 4 |
43
  | Banana | 2 |
44

45
- ![](https://markmap.js.org/favicon.png)
46
{% endmarkmap %}

贡献者

感谢所有的贡献者🥰！

Credits

如果没有 markmap，这个项目不可能存在。
最初受到了 hexo-simple-mindmap 的启发。
感谢 @coderxi1 对最初 2.0 版本的构思和实现！