Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/markmap/gatsby-remark-markmap
Visualize code blocks in Markdown files using markmap.
https://github.com/markmap/gatsby-remark-markmap
Last synced: 3 months ago
JSON representation
Visualize code blocks in Markdown files using markmap.
- Host: GitHub
- URL: https://github.com/markmap/gatsby-remark-markmap
- Owner: markmap
- Created: 2020-01-14T06:11:21.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-09-04T07:45:44.000Z (almost 2 years ago)
- Last Synced: 2024-03-07T15:06:02.355Z (4 months ago)
- Language: JavaScript
- Homepage:
- Size: 32.2 KB
- Stars: 46
- Watchers: 2
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Lists
- awesome-stars - gera2ld/gatsby-remark-markmap - Visualize code blocks in Markdown files using markmap. (JavaScript)
README
# gatsby-remark-markmap
Visualize code blocks in Markdown files using [markmap](https://github.com/gera2ld/markmap).
## Demo
Input:
````markdown
Render Markdown as mindmap:
```markdown markmap
# Food
## Fruits
- easy to eat
- apple
- banana
- not so easy
- grapes
## Vegetables
- cabbage
- tomato
```
````
Output:
## Installation
```bash
$ yarn add gatsby-remark-markmap
```
## Usage
In your `gatsby-config.js`:
```js
plugins: [
{
resolve: 'gatsby-transformer-remark',
options: {
plugins: [
// Note that `gatsby-remark-markmap` must be put before other plugins
// that handle code blocks, e.g. `gatsby-remark-prismjs`
'gatsby-remark-markmap',
'gatsby-remark-prismjs',
],
},
},
]
```
### Options
- `options.markmap` *object*
JSON options for markmap rendering, see [the documentation](https://markmap.js.org/docs/json-options) for more details.
- `options.assets` *(assets: IAssets) => IAssets*
Change the assets to preload for markmap. If provided, the returned assets will be preloaded.
Here is an example using options:
```js
{
resolve: 'gatsby-remark-markmap',
options: {
markmap: {/* markmap options */},
},
},
```
### Code
Code blocks with language of `markdown` and meta of `markmap` will be transformed into interactive markmaps.
````markdown
```markdown markmap
# markmap
## contents
```
````
## Related
- [markmap](https://github.com/gera2ld/markmap) - markmap core packages