A remark plugin insert mindmap in markdown.
npm install remark-markmap
A remark plugin to insert mindmap in markdown. Simply insert a code block in markdown to render the mindmap.
> More preview in my blog.
>Depend on markmap. Inspired by hexo-markmap.
``sh`
pnpm install remark-markmapsh`
npm install remark-markmapsh`
yarn add remark-markmap
`js`
{
darkThemeSelector: () => document.documentElement.matches('.dark') || (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)
}
- : 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"]').
The frontmatter integrates style and jsonOptions(markmap).
`yaml`
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.
Say our document contains: example.md
```markdown
Some text...
``markmapinline code
---
id: markmap-example
options:
colorFreezeLevel: 2
---
- links
- inline ~~text~~ styles
- multiline
text
-
- 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:
`javascript
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.
See example branch
Or clone example branch
`sh``
git clone -b example https://github.com/coderxi1/remark-markmap remark-markmap-example