# remark-code-example

> Remark plugin to copy live code block as code example

Latest version **0.5.6** (published 2024-05-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install remark-code-example
pnpm add remark-code-example
yarn add remark-code-example
bun add remark-code-example
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.6 |
| Published | 2024-05-30 |
| First published | 2022-03-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=18.0.0 \|\| ^16.13.0 |
| Dependencies | 6 |
| Unpacked size | 8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Eric Chen |
| Maintainers | airkro |
| Keywords | code-block, doc, document, documentation, docusaurus, markdown, remark, remark-plugin, remarkjs, site-generator |

## Links

- npm: https://www.npmjs.com/package/remark-code-example
- Repository: https://github.com/nice-move/remark-code-example
- Issues: https://github.com/nice-move/remark-code-example/issues
- npm.io page: https://npm.io/package/remark-code-example

## Dependencies (6)

- [unist-util-visit](https://npm.io/package/unist-util-visit.md) ^5.0.0
- [mdast-util-directive](https://npm.io/package/mdast-util-directive.md) ^3.0.0
- [mdast-util-to-markdown](https://npm.io/package/mdast-util-to-markdown.md) ^2.1.0
- [markdown-code-block-meta](https://npm.io/package/markdown-code-block-meta.md) ^0.0.2
- [mdast-util-from-markdown](https://npm.io/package/mdast-util-from-markdown.md) ^2.0.1
- [micromark-extension-directive](https://npm.io/package/micromark-extension-directive.md) ^3.0.0

## 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.6 (latest) — 2024-05-30
- 0.5.5 — 2024-05-30
- 0.5.4 — 2023-11-01
- 0.5.3 — 2023-10-17
- 0.5.2 — 2022-08-11
- 0.5.1 — 2022-08-09
- 0.5.0 — 2022-08-09
- 0.4.1 — 2022-08-08
- 0.4.0 — 2022-07-27
- 0.3.0 — 2022-07-27
- 0.2.0 — 2022-07-17
- 0.1.0 — 2022-07-04
- 0.0.0 — 2022-03-25

## README

# remark-code-example

Remark plugin to copy live code block as code example.

[![npm][npm-badge]][npm-url]
[![github][github-badge]][github-url]
![node][node-badge]

[npm-url]: https://www.npmjs.com/package/remark-code-example
[npm-badge]: https://img.shields.io/npm/v/remark-code-example.svg?style=flat-square&logo=npm
[github-url]: https://github.com/nice-move/remark-code-example
[github-badge]: https://img.shields.io/npm/l/remark-code-example.svg?style=flat-square&colorB=blue&logo=github
[node-badge]: https://img.shields.io/node/v/remark-code-example.svg?style=flat-square&colorB=green&logo=node.js

## Installation

```sh
npm install remark remark-code-example --save-dev
```

## Usage

```mjs
import readFileSync from 'node:fs';

import { remark } from 'remark';
import { remarkCodeExample } from 'remark-code-example';

const markdownText = readFileSync('example.md', 'utf8');

remark()
  .use(remarkCodeSample, {})
  .process(markdownText)
  .then((file) => console.info(file))
  .catch((error) => console.warn(error));
```

### Options.metas

- type: object of string
- default: {}
- required: false
- description: Metas of example code block

## Syntax

### code-example

`````markdown
Turn

```mermaid code-example
flowchart
  Start --> Stop
```

Into

````markdown
```mermaid
flowchart
  Start --> Stop
```
````
`````

### code-example-copy

`````markdown
Turn

```mermaid code-example-copy
flowchart
  Start --> Stop
```

Into

```mermaid
flowchart
  Start --> Stop
```

````markdown
```mermaid
flowchart
  Start --> Stop
```
````
`````

### code-alias-copy

````markdown
Turn

```mermaid code-alias-copy=diagram
flowchart
  Start --> Stop
```

Into

```mermaid
flowchart
  Start --> Stop
```

```diagram
flowchart
  Start --> Stop
```
````

## Related

- [markdown-code-block-meta](https://github.com/nice-move/markdown-code-block-meta)
- [remark-docusaurus](https://github.com/nice-move/remark-docusaurus)
- [remark-kroki](https://github.com/nice-move/remark-kroki)

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