remark-markmap

一个 remark 插件，用于在 markdown 中插入思维导图。只需在 markdown 中插入代码块，即可渲染思维导图。

更多预览请前往 我的博客.

依赖于 markmap。灵感来自于 hexo-markmap。

安装

pnpm

pnpm install remark-markmap

npm

npm install remark-markmap

yarn

yarn add remark-markmap

选项

插件选项

{
  darkThemeSelector: () => document.documentElement.matches('.dark') || (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)
}

• darkThemeSelector : 一个函数，用于判断当前页面是否处于暗黑模式。它可以返回一个 string 或 boolean。当返回 string 时，例如 darkThemeSelector: () => '[data-theme="dark"]'，等价于 document.documentElement.matches('[data-theme="dark"]')。

Frontmatter 选项

Frontmatter 集成了 style 和 jsonOptions(markmap)。

id: markmap-example
markmap:
  colorFreezeLevel: 2

• id : 设置 id 以控制单个 markmap-wrap（例如设置样式）

• markmap/options : 对应 markmap 项目中的 IMarkmapJSONOptions。更多详情请参考 jsonOptions。

使用

假设我们的文档包含： example.md

some text...

````markmap
---
id: markmap-example
style: |
  #${id} { height: 300px; width: 100%; }
options:
  colorFreezeLevel: 2
---
- 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}$
````

some text...

在 example.js 中使用 remark-markmap 插件：

import { read } from 'to-vfile'
import { remark } from 'remark'
import remarkMarkmap from 'remark-markmap'

const file = await remark()
  .use(remarkMarkmap)
  .process(await read('example.md'))

console.log(String(file));

然后你就可以得到渲染后的 html 文本。

示例

查看 example 分支

或者 clone example 分支

git clone -b example https://github.com/coderxi1/remark-markmap remark-markmap-example

预览页面