rehype-prism-teplate

!Minzipped Size
!Node Version

rehype plugin to highlight code blocks in HTML with [Prism] (via [refractor]) fork from mapbox/rehype-prism.

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

Installation

``bash
npm install rehype-prism-template
`

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.

#### options.langs

Type: array.
Default: undefined

By default, the full list of [languages supported by refractor] will be registered.

If you would like to include specific languages, set this option to an array of languages.

Usage

Use this package as a rehype plugin.

Some examples of how you might do that:

`js
const rehype = require('rehype');
const rehypePrism = require('rehype-prism-template');

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

`js
const unified = require('unified');
const rehypeParse = require('rehype-parse');
const rehypePrism = require('rehype-prism-template');

unified()
.use(rehypeParse)
.use(rehypePrism)
.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 rehypePrism = require('rehype-prism-template');

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

Registering languages

By default rehype-prism-template includes [all language definitions] from refractor, though it's possible to set your custom
list of registered languages by generating a new template of index.js. It is as easy as going in the package's root
directory and specifing a list of languages:

`bash
cd /node_modules/rehype-prism
yarn register python java ruby kotlin
`

To reset the template back where it registers all languages:

`bash
yarn register-all
`

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

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