# remark-prism

> Syntax highlighter for markdown code blocks - with support for plugins

Latest version **1.3.6** (published 2021-04-13) · BSD-3-Clause license · 0 weekly downloads

## Install

```sh
npm install remark-prism
pnpm add remark-prism
yarn add remark-prism
bun add remark-prism
```

## Health

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

Positive: has types package; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.6 |
| Published | 2021-04-13 |
| First published | 2020-08-18 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | separate (@types/remark-prism) |
| Module format | CommonJS |
| Dependencies | 9 |
| Unpacked size | 32.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 98 |
| Maintainers | ramitos |
| Keywords | prismjs, markdown, remark, remarkjs, remark-plugin |

## Links

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

## Dependencies (9)

- [jsdom](https://npm.io/package/jsdom.md) ^16.5.3
- [parse5](https://npm.io/package/parse5.md) ^6.0.1
- [prismjs](https://npm.io/package/prismjs.md) ^1.23.0
- [classnames](https://npm.io/package/classnames.md) ^2.3.1
- [escape-html](https://npm.io/package/escape-html.md) ^1.0.3
- [unist-util-map](https://npm.io/package/unist-util-map.md) ^2.0.1
- [css-selector-parser](https://npm.io/package/css-selector-parser.md) ^1.4.1
- [parse-numeric-range](https://npm.io/package/parse-numeric-range.md) ^1.2.0
- [parse5-htmlparser2-tree-adapter](https://npm.io/package/parse5-htmlparser2-tree-adapter.md) ^6.0.1

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

- 1.3.6 (latest) — 2021-04-13
- 1.3.5 — 2021-03-30
- 1.3.4 — 2021-01-05
- 1.3.3 — 2020-11-24
- 1.3.2 — 2020-11-23
- 1.3.1 — 2020-11-14
- 1.2.0 — 2020-11-13
- 1.1.18 — 2020-11-10
- 1.1.17 — 2020-10-16
- 1.1.16 — 2020-10-16
- 1.1.15 — 2020-10-08
- 1.1.14 — 2020-09-24
- 1.1.13 — 2020-09-24
- 1.1.12 — 2020-09-16
- 1.1.11 — 2020-09-14
- … 9 more at https://npm.io/package/remark-prism/versions

## README

# remark-prism

Syntax highlighter for markdown code blocks using [Prism](https://prismjs.com/) - with support for certain [plugins](https://prismjs.com/plugins/). This allows syntax highlighting without running any client-side code - other than CSS.

<div align="center">
  <img width="898" src="media/cover.png" alt="remark-prism">
</div>

## installation

```bash
λ yarn add remark-prism
```

## usage

Input:

```js
const src = `
\`\`\`javascript
console.log('Hello World');
\`\`\`
`;
```

Using [remark](https://github.com/remarkjs/remark) (mdast):

```js
require('unified')()
  .use(require('remark-parse'))
  .use(require('remark-stringify'))
  .use(require('remark-prism'), {
    /* options */
  })
  .use(require('remark-html'))
  .process(file, (err, file) => console.log(String(file)));
```

Using [rehype](https://github.com/rehypejs/rehype) (hast):

```js
require('unified')()
  .use(require('remark-parse'))
  .use(require('remark-prism'), {
    /* options */
  })
  .use(require('remark-rehype'))
  .use(require('rehype-format'))
  .use(require('rehype-stringify'))
  .process(file, (err, file) => console.log(String(file)));
```

Using [mdx](https://mdxjs.com/):

```js
console.log(
  await require('@mdx-js/mdx')(src, {
    commonmark: true,
    gfm: true,
    remarkPlugins: [
      [
        require('remark-prism'),
        {
          /* options */
        },
      ],
    ],
  }),
);
```

Output:

```html
<div class="remark-highlight">
  <pre class="language-javascript">
    <code>
      <span class="token console class-name">console</span>
      <span class="token punctuation">.</span>
      <span class="token method function property-access">log</span>
      <span class="token punctuation">(</span>
      <span class="token string">'Hello World'</span>
      <span class="token punctuation">)</span>
      <span class="token punctuation">;</span>
    </code>
  </pre>
</div>
```

Take a look at our [fixtures](test/fixtures) and it's [outputs](test/outputs) to see more examples.

### `transformInlineCode`

Add relevant class names to inline code snippets. For example when you use single backtick code examples.

```js
use(require('remark-prism'), {
  transformInlineCode: true,
});
```

### plugins

It supports some [Prism](https://prismjs.com/) plugins:

```js
use(require('remark-prism'), {
  plugins: [
    'autolinker',
    'command-line',
    'data-uri-highlight',
    'diff-highlight',
    'inline-color',
    'keep-markup',
    'line-numbers',
    'show-invisibles',
    'treeview',
  ],
});
```

> _Don't forget to include the appropriate css in your stylesheets. Refer to the documentation of each plugin._

### attributes

```markdown
\`\`\`diff-javascript[class="line-numbers"][class="diff-highlight"]
```

```html
<pre class="language-diff-javascript diff-highlight line-numbers">...</pre>
```

## license

BSD-3-Clause

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