rehype-prism

rehype-prism

Install

npm i rehype-prism

Usage

import unified from 'unified'
import markdown from 'remark-parse'
import remark2rehype from 'remark-rehype'
import highlightCode from 'rehype-prism'
import html from 'rehype-stringify'

unified()
  .use(markdown)
  .use(remark2rehype)
  // it should be after rehype
  .use(highlightCode, { preLangClass: false })
  .use(html)

Must disabled prism autoHighlight before import 'rehype-prism', if you use the plugin in browser. there are two way to do this:

• set the window.Prism = { manual: true }

• use the attribute data-manual on the <script> element you used for prism.

  <script src="prism.js" data-manual></script>

Options

• preLangClass(default: false): Whether to copy the language- class to the <pre> tag.

  Some css style will be set to the <pre class="language-xxx">, if you use the official theme.

Load More Languages

• Use babel-plugin-prismjs.(Recommend)
• Use loadLanguages() provided by prismjs.(don't use loadLanguages() with Webpack or another bundler)

Load Themes

• If you use babel-plugin-prismjs. import 'prismjs' will auto load the theme setted in babel-plugin-prismjs config.
• Import theme css manual. e.g. import 'prismjs/themes/prism-coy.css'

Changelog

0.1.0 (2018-12-15)

Features

• copy the language- class to the <pre> tag (a192d57)

<a name="0.0.2"></a>