remark-markmap 是一个基于 Markmap 的插件，由本人创建和维护。主旨是 Easy-to-use。
插件自动加载 katex & highlightjs，并配置了 markmap-toolbar 工具栏，且自带全屏功能。

如果对你有所帮助，记得到 Github仓库 点个 Star 喵
谢谢喵，谢谢喵，Star 喵，Star 喵

安装remark-markmap

pnpm i remark-markmap -D

npm i remark-markmap --save-dev

yarn add remark-markmap -D

在astro中使用

1
import remarkMarkmap from 'remark-markmap'
2

3
export default defineConfig({
4
  markdown: {
5
    remarkPlugins: [
6
      remarkMarkmap
7
    ]
8
  }
9
});

在markdown文件中使用markmap代码段

markmap-example.md

1
````markmap
2
---
3
id: markmap-example
4
style: |
5
  #${id} {
6
    height: 300px;
7
    width: 100%;
8
  }
9
  @media (min-width: 1280px) {
10
    #${id} {
11
      height: 600px;
12
    }
13
  }
14
options:
15
  colorFreezeLevel: 2
16
---
17

18
## Links
19

20
- [Website](https://markmap.js.org/)
21
- [GitHub](https://github.com/gera2ld/markmap)
22

23
## Related Projects
24

25
- [coc-markmap](https://github.com/gera2ld/coc-markmap) for Neovim
26
- [markmap-vscode](https://marketplace.visualstudio.com/items?itemName=gera2ld.markmap-vscode) for VSCode
27
- [eaf-markmap](https://github.com/emacs-eaf/eaf-markmap) for Emacs
28

29
## Features
30

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

33
### Lists
34

35
- **strong** ~~del~~ *italic* ==highlight==
36
- `inline code`
37
- [x] checkbox
38
- Katex: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$ <!-- markmap: fold -->
39
  - [More Katex Examples](#?d=gist:af76a4c245b302206b16aec503dbe07b:katex.md)
40
- Now we can wrap very very very very long text based on `maxWidth` option
41
- Ordered list
42
  1. item 1
43
  2. item 2
44

45
### Blocks
46

47
```js
48
console.log('hello, JavaScript')
49
```
50

51
| Products | Price |
52
|-|-|
53
| Apple | 4 |
54
| Banana | 2 |
55

56
![](https://markmap.js.org/favicon.png)
57
````

效果

对于深色模式的支持

如果你不是基于 <html class="dark"> 管理的深色模式，可以配置 darkThemeCssSelector
比如，如果你是 <html data-theme="dark"> 来管理，可以使用下面的方式配置

1
import remarkMarkmap from 'remark-markmap'
2

3
export default defineConfig({
4
  markdown: {
5
    remarkPlugins: [
6
      [remarkMarkmap, { darkThemeCssSelector: '[data-theme=dark]' }]
7
    ]
8
  }
9
});

Astro博客中使用remark-markmap优雅的创建思维导图

安装remark-markmap

在astro中使用

在markdown文件中使用markmap代码段

效果

对于深色模式的支持

评论