VS Code Markmap Universe
Use mindmap in VS Code's built-in Markdown preview with markmap, seamlessly supporting both hexo-markmap tags and markmap code blocks.
Features
- Real-time Markmap Preview
hexo-markmap Tag Support:
- Recognize
{% markmap %}...{% endmarkmap %} syntax.
- Provide folding for
hexo-markmap tags.
- Code Block Support:
- Render fenced code blocks with the
markmap language identifier.
- Customizable Preview:
- Syntax highlighting: (Still have some issues)
- Highlight Markmap frontmatter and Markdown content.
Usage
{% markmap %}
---
markmap:
colorFreezeLevel: 2
---
# Markdown
# Syntax
{% endmarkmap %}
Code Block
```markmap
---
markmap:
colorFreezeLevel: 2
---
# Markdown
# Syntax
```
Inline Options
You can customize each mindmap individually in the markmap tag.
Frontmatter Options
All frontmatter options are optional.
id : Used to define the ID of the markmap-wrap element.
markmap : Correspond to the IMarkmapJSONOptions in the markmap project. For more details, please refer to jsonOptions.
- alias:
options (for backward compatibility)
[!TIP]
Difference between markmap and options
markmap (from markmap-lib)
Preprocesses JSON options (e.g., converting strings to arrays or numbers) and overrides the legacy options.
- For example,
color: 'red' will be converted to color: ['red'], only the latter is valid in markmap-view.
- ✅ Recommended for consistent use with
markmap.
options (from markmap-universe) Passed directly to markmap-view.
- ❌ Not recommended, maintained only for backward compatibility.
Tag Options
You can also specify the height of the mindmap directly in the tag, by default it will be calculated based on the content.
{% markmap 300px %}
# Markdown
# Syntax
{% endmarkmap %}
Configuration
markmap-universe.globalOptions
markmap-universe.toolbar
- Type:
boolean: Show the toolbar.
- Default:
true
Credit
References to the following projects:
