1
---
2
title: 'Markmap Example'
3
tags: [ markmap ]
4
categories: [ 'Astro', 'Demo' ]
5
description: |
6
  This theme comes with the [remark-markmap](https://github.com/coderxi1/remark-markmap) integration installed and configured in your plugins/index.js file.
7
  本主题附带 remark-markmap 集成，并在你的 plugins/index.js 文件中配置。
8
---
9

10
:::note{type=info}
11
This theme comes with the [remark-markmap](https://github.com/coderxi1/remark-markmap) integration installed and configured in your `plugins/index.js` file.
12
本主题附带 [remark-markmap](https://github.com/coderxi1/remark-markmap) 集成，并在你的 `plugins/index.js` 文件中配置。
13
:::
14

15
````markmap
16
---
17
title: markmap
18
style: |
19
  #${id} {
20
    height: 300px;
21
    width: 100%;
22
  }
23
  @media (min-width: 1280px) {
24
    #${id} {
25
      height: 600px;
26
    }
27
  }
28
options:
29
  colorFreezeLevel: 2
30
---
31

32
## Links
33

34
- [Website](https://markmap.js.org/)
35
- [GitHub](https://github.com/gera2ld/markmap)
36

37
## Related Projects
38

39
- [coc-markmap](https://github.com/gera2ld/coc-markmap) for Neovim
40
- [markmap-vscode](https://marketplace.visualstudio.com/items?itemName=gera2ld.markmap-vscode) for VSCode
41
- [eaf-markmap](https://github.com/emacs-eaf/eaf-markmap) for Emacs
42

43
## Features
44

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

47
### Lists
48

49
- **strong** ~~del~~ *italic* ==highlight==
50
- `inline code`
51
- [x] checkbox
52
- Katex: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$ <!-- markmap: fold -->
53
  - [More Katex Examples](#?d=gist:af76a4c245b302206b16aec503dbe07b:katex.md)
54
- Now we can wrap very very very very long text based on `maxWidth` option
55
- Ordered list
56
  1. item 1
57
  2. item 2
58

59
### Blocks
60

61
```js
62
console.log('hello, JavaScript')
63
```
64

65
| Products | Price |
66
|-|-|
67
| Apple | 4 |
68
| Banana | 2 |
69

70
![](https://markmap.js.org/favicon.png)
71
````