# gatsby-remark-markmap

> Visualize code blocks in Markdown files using [markmap](https://github.com/gera2ld/markmap).

Latest version **0.5.0** (published 2022-09-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install gatsby-remark-markmap
pnpm add gatsby-remark-markmap
yarn add gatsby-remark-markmap
bun add gatsby-remark-markmap
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.0 |
| Published | 2022-09-04 |
| First published | 2020-01-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 5.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 54 |
| Author | Gerald |
| Maintainers | gera2ld |
| Keywords | gatsby, gatsby-plugin, markdown, markmap |

## Links

- npm: https://www.npmjs.com/package/gatsby-remark-markmap
- Repository: https://github.com/markmap/gatsby-remark-markmap
- Homepage: https://github.com/markmap/gatsby-remark-markmap#readme
- Issues: https://github.com/markmap/gatsby-remark-markmap/issues
- npm.io page: https://npm.io/package/gatsby-remark-markmap

## Dependencies (5)

- [markmap-lib](https://npm.io/package/markmap-lib.md) ^0.14.3
- [markmap-view](https://npm.io/package/markmap-view.md) ^0.14.3
- [markmap-common](https://npm.io/package/markmap-common.md) ^0.14.2
- [lodash.debounce](https://npm.io/package/lodash.debounce.md) ^4.0.8
- [unist-util-visit](https://npm.io/package/unist-util-visit.md) ^2.0.3

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 0.5.0 (latest) — 2022-09-04
- 0.4.1 — 2022-05-02
- 0.4.0 — 2021-12-20
- 0.4.0-0 — 2021-12-20
- 0.3.7 — 2021-06-02
- 0.3.6 — 2021-02-18
- 0.3.5 — 2020-12-05
- 0.3.4 — 2020-06-12
- 0.3.3 — 2020-06-12
- 0.3.2 — 2020-06-12
- 0.3.1 — 2020-05-29
- 0.3.0 — 2020-05-04
- 0.2.1 — 2020-04-07
- 0.2.0 — 2020-04-07
- 0.1.1 — 2020-01-14
- … 1 more at https://npm.io/package/gatsby-remark-markmap/versions

## 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:

<img alt="markmap" src="https://user-images.githubusercontent.com/3139113/72319163-6d6ec300-36d9-11ea-99f0-395cb655cb00.png" width="400">

## 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

---
_Source: https://npm.io/package/gatsby-remark-markmap · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._