https://github.com/phoihos/vscode-markdown-markmap
Markdown Preview Markmap Support Extension for VS Code https://marketplace.visualstudio.com/items?itemName=phoihos.markdown-markmap
https://github.com/phoihos/vscode-markdown-markmap
markdown markdown-it markdown-it-plugin markmap mindmap vscode vscode-extension
Last synced: about 2 months ago
JSON representation
Markdown Preview Markmap Support Extension for VS Code https://marketplace.visualstudio.com/items?itemName=phoihos.markdown-markmap
- Host: GitHub
- URL: https://github.com/phoihos/vscode-markdown-markmap
- Owner: phoihos
- License: mit
- Created: 2020-10-14T06:31:51.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-03-15T06:48:15.000Z (about 2 years ago)
- Last Synced: 2025-03-28T23:34:28.757Z (2 months ago)
- Topics: markdown, markdown-it, markdown-it-plugin, markmap, mindmap, vscode, vscode-extension
- Language: TypeScript
- Homepage:
- Size: 1.43 MB
- Stars: 22
- Watchers: 2
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Markdown Preview Markmap Support
Visualize Markdown as Mindmap (A.K.A Markmap) to VS Code's built-in markdown preview.
## Features
- Preview support to built-in markdown preview
- Syntax highlighting support to `markmap` fenced code block
- See below a [demo](#syntax-highlighting)
- Attributes support to `markmap` fenced code block
- See below [details](#attributes)
## Installation
To install this extension go to `View->Extensions` and search for `markdown-markmap`. Next click Install.
## Usage
Create mindmap in markdown using `markmap` (or `mdmm` or `mmmd`) fenced code blocks:
~~~markdown
```markmap
# Mindmap
## Extension
- [markdown-markmap](https://github.com/phoihos/vscode-markdown-markmap)
## Powered by
-
- [markmap-lib](https://github.com/gera2ld/markmap-lib)
## Highlighting
- links
- **inline** ~~text~~ *styles*
- multiline
text
- `inline code`
- ```js
console.log('code block');
```
- Katex
- $\pm\sqrt{a^2 + b^2}$
- $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
- $$\int_{0}^{\infty} f(x) dx$$
```
~~~
## Syntax Highlighting
Syntax highlighting support exactly the same as VS Code's `markdown`.
## Attributes
Add attributes to `markmap` fenced code block with `{key1=value1 key2=value2}` curly brackets:
> Multiple attributes are separated by `space`.
> **Use single or double quotation marks when specifying value with spaces.**
~~~markdown
```markmap {scale=1.1 color=#888}
···
```
~~~
Available attributes:
| Key | Default Value | Description |
| ----- | -------------------- | ------------------------------------------------------------------------------ |
| scale | `1.1` | Scale the preview render size |
| color | Empty (for Colorful) | Change the line color using predefined color name, or with RGB, HEX, HSL value |
Available formats to attribute:
| Format | Description |
| --------------------------- | ------------------------ |
| `{key1=value1 key2=value2}` | Wrap with curly brackets |
| `:key1=value1 key2=value2` | Start with colon mark |
| `?key1=value1 key2=value2` | Start with question mark |
## Markmap Visualizing
Powered by [gera2ld/markmap-lib](https://github.com/gera2ld/markmap/tree/master/packages/markmap-lib).
## Settings
Currently, there is no settings.
## Issues
If you find any problems using this extension or you want to propose new features to it, feel free to open an issue on [Github](https://github.com/phoihos/vscode-markdown-markmap/issues).
## Release Notes
Detailed Release Notes are available [here](https://github.com/phoihos/vscode-markdown-markmap/blob/master/CHANGELOG.md) or above **Changelog** tab.
## Attributions
Icon made by [Freepik](https://www.flaticon.com/authors/freepik) from [www.flaticon.com](https://www.flaticon.com/)