mdx-prism

This is a fork of @mapbox/rehype-prism that adds line highlighting capabilities, e.g.:

rehype plugin to highlight code blocks in HTML with [Prism] (via [refractor]).

(If you would like to highlight code blocks with highlight.js, instead, check out rehype-highlight.)

Best suited for usage in Node.
If you would like to perform syntax highlighting in the browser, you should look into less heavy ways to use refractor.

Installation

``
npm install mdx-prism
`

API

rehype().use(rehypePrism, [options])

Syntax highlights pre > code.
Under the hood, it uses [refractor], which is a virtual version of [Prism].

The code language is configured by setting a language-{name} class on the element.
You can use any [language supported by refractor].

If no language-{name} class is found on a element, it will be skipped.

$3

#### options.ignoreMissing

Type: boolean.
Default: false.

By default, if {name} does not correspond to a [language supported by refractor] an error will be thrown.

If you would like to silently skip elements with invalid languages, set this option to true.

Usage

Use this package as a rehype plugin.

Some examples of how you might do that:

`js
const rehype = require('rehype');
const mdxPrism = require('mdx-prism');

rehype()
.use(mdxPrism)
.process(/ some html /);
`

`js
const unified = require('unified');
const rehypeParse = require('rehype-parse');
const mdxPrism = require('mdx-prism');

unified()
.use(rehypeParse)
.use(mdxPrism)
.processSync(/ some html /);
`

If you'd like to get syntax highlighting in Markdown, parse the Markdown (with remark-parse), convert it to rehype, then use this plugin.

`js
const unified = require('unified');
const remarkParse = require('remark-parse');
const remarkRehype = require('remark-rehype');
const mdxPrism = require('mdx-prism');

unified()
.use(remarkParse)
.use(remarkRehype)
.use(mdxPrism)
.process(/ some markdown /);
`

FAQ

p { color: red }

 tag:
  `html
  
p { color: red }

  `
  This resulted in many Prism themes relying on this behavior by using CSS selectors like pre[class*="language-"]`. So in order for people using mdx-prism to get the most out of these themes, we decided to do the same.

[Prism]: http://prismjs.com/

[refractor]: https://github.com/wooorm/refractor

[language supported by refractor]: https://github.com/wooorm/refractor#syntaxes