remark-markmap

A remark plugin to insert mindmap in markdown. Simply insert a code block in markdown to render the mindmap.

More preview in this blog.

Depend on markmap. Inspired by hexo-markmap.

Installation

pnpm

pnpm install remark-markmap

npm

npm install remark-markmap

yarn

yarn add remark-markmap

Options

Plugin Options

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

• darkThemeSelector: A function used to determine whether the current page is in dark mode. It can return either a string or a boolean. When it returns a string, for example darkThemeSelector: () => '[data-theme="dark"]', it means it is equivalent to document.documentElement.matches('[data-theme="dark"]').

Frontmatter Options

The frontmatter integrates style and jsonOptions(markmap).

id: markmap-example
markmap:
  colorFreezeLevel: 2

• id : Set the id to control single markmap-wrap (such as set style)

• markmap/options : Correspond to the IMarkmapJSONOptions in the markmap project. For more details, please refer to jsonOptions.

Usage

Say our document contains: 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...

Use the remark-markmap plugin in example.js:

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));

Then you can get the renderd html.

Example

See example branch

Or clone example branch

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

Preview Page