https://github.com/markmap-universe/vscode-markmap-universe
Use mindmaps in Markdown previews with support for hexo-markmap and code blocks.
https://github.com/markmap-universe/vscode-markmap-universe
hexo markmap mindmap vscode-extension
Last synced: 6 months ago
JSON representation
Use mindmaps in Markdown previews with support for hexo-markmap and code blocks.
- Host: GitHub
- URL: https://github.com/markmap-universe/vscode-markmap-universe
- Owner: markmap-universe
- License: mit
- Created: 2025-03-25T18:35:43.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-04-03T17:07:17.000Z (10 months ago)
- Last Synced: 2025-04-03T17:32:45.830Z (10 months ago)
- Topics: hexo, markmap, mindmap, vscode-extension
- Language: TypeScript
- Homepage: https://marketplace.visualstudio.com/items?itemName=maxchang.vscode-markmap-universe
- Size: 1.32 MB
- Stars: 9
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# VS Code Markmap Universe
[](https://marketplace.visualstudio.com/items?itemName=maxchang.vscode-markmap-universe)
[](https://marketplace.visualstudio.com/items?itemName=maxchang.vscode-markmap-universe)
[](https://open-vsx.org/extension/maxchang/vscode-markmap-universe)
[](https://open-vsx.org/extension/maxchang/vscode-markmap-universe)
[](README.zh_CN.md)
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**:
- Adjust styles and options via frontmatter.
- Compatible with [remark-markmap](https://github.com/markmap-universe/remark-markmap#frontmatter-options) and [hexo-markmap](https://github.com/markmap-universe/hexo-markmap#options).
- **Syntax highlighting**: (Still have some issues)
- Highlight Markmap frontmatter and Markdown content.
## Usage
### `hexo-markmap` Tags
```markdown
{% markmap %}
---
markmap:
colorFreezeLevel: 2
---
# Markdown
# Syntax
{% endmarkmap %}
```
### Code Block
````markdown
```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`](https://markmap.js.org/api/interfaces/markmap-view.IMarkmapJSONOptions.html) in the markmap project. For more details, please refer to [`jsonOptions`](https://markmap.js.org/docs/json-options#option-list).
- alias: **`options`** (for backward compatibility)
Difference between markmap and options
- **`markmap` (from markmap-lib)**
Will be [preprocessed](https://github.com/markmap/markmap/blob/master/packages/markmap-lib/src/plugins/frontmatter/index.ts#L41) (converting strings to arrays or numbers) and overrides the legacy `options`.
- E.g., `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.
```markdown
{% markmap 300px %}
# Markdown
# Syntax
{% endmarkmap %}
```
### Configuration
**`markmap-universe.globalOptions`**
- **Type**: `object`: Global options for all mindmaps. Correspond to the `markmap` in [`Frontmatter Options`](#frontmatter-options).
- **Default**: `{}`
**`markmap-universe.toolbar`**
- **Type**: `boolean`: Show the toolbar.
- **Default**: `true`
## Credit
References to the following projects:
- [vscode-markdown-markmap](https://github.com/phoihos/vscode-markdown-markmap)
- [markmap-vscode](https://github.com/markmap/markmap-vscode/)