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

最新推荐文章于 2025-05-19 12:31:59 发布

汐涌及岸

最新推荐文章于 2025-05-19 12:31:59 发布

阅读量422

点赞数 4

文章标签： javascript typescript

本文链接：https://blog.csdn.net/qq_35773485/article/details/144847290

版权

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中使用

配置astro.config.mjs文件

import remarkMarkmap from 'remark-markmap'

export default defineConfig({
  markdown: {
    remarkPlugins: [
      remarkMarkmap
    ]
  }
});

在markdown文件中使用markmap代码段


````markmap
---
id: markmap-example
style: |
  #${id} {
    height: 300px;
    width: 100%;
  }
  @media (min-width: 1280px) {
    #${id} {
      height: 600px;
    }
  }
options:
  colorFreezeLevel: 2
---

## Links

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

## Related Projects

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

## Features

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

### Lists

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

### Blocks

```js
console.log('hello, JavaScript')
```

| Products | Price |
|-|-|
| Apple | 4 |
| Banana | 2 |

![](https://i-blog.csdnimg.cn/img_convert/c6c1a3d128f1a6b84ef55647deb7a2e8.png)
````

效果

在这里插入图片描述

对于深色模式的支持

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

import remarkMarkmap from 'remark-markmap'

export default defineConfig({
  markdown: {
    remarkPlugins: [
      [remarkMarkmap, { darkThemeCssSelector: '[data-theme=dark]' }]
    ]
  }
});