vuepress-plugin-markmap

A plugin for adding markmap to VuePress to visualize your Markdown as mindmaps.

Usage no npm install needed!

<script type="module">
  import vuepressPluginMarkmap from 'https://cdn.skypack.dev/vuepress-plugin-markmap';
</script>

README

vuepress-plugin-markmap

A plugin for adding markmap to VuePress to visualize your Markdown as mindmaps.

Demo

 

Installation

Install this plugin with:

yarn add vuepress-plugin-markmap
# or
npm install vuepress-plugin-markmap

Then add it to your .vuepress/config.js:

module.exports = {
  plugins: [
    [
      'vuepress-plugin-markmap'
    ]
  ]
}

 

Usage

The token info of the code block should be markmap, for example:

```markmap
# Fruit

## Red

- [Apple](https://en.wikipedia.org/wiki/Apple)
- *Cherry*

## Yellow

- **Lemon**
- Banana
- ~~Pumpkin~~
```

Refer to the documentation of markmap for more information.

 

Warning

Theoretically, using code blocks highlighted by Prism.js in markmap is also supported (see here). However, markmap will import syntax highlighting styles if code blocks are used, which are conflited with this theme's highlighting styles. So you'd better not use code blocks in this plugin (before I find out an appropriate solution).

 

License

MIT