rehype-prism


The unified plugin used to highlight code block in html with Prism.

Usage

This package is ESM only: Node 12+ is needed to use it and it must be imported instead of required.

``typescript
import { unified } from 'unified'
import rehyper from 'rehyper'
import remarkParse from 'remark-parse'
import remarkRehype from 'remark-rehype'
import rehypePrism from 'rehype-prism'
import rehypeStringify from 'rehype-stringify'

// you have to load css manual
import 'prismjs/themes/prism-coy.css'
import 'prismjs/plugins/line-numbers/prism-line-numbers.css'

// parse markdown to html
unified()
.use(markdown)
.use(remark2rehype)
// it should be after rehype
.use(rehypePrism, { plugins: ['line-numbers'] })
.use(html)
.parse(/ markstring string /)

// parse code block in html string
rehyper()
.use(rehypePrism)
.use(html)
.parse(/ html string /)
`

Server Side Render

PrismJS will auto highlight all code at pre code after browser document loaded.

Disabled prism autoHighlight before import 'rehype-prism'. there are two way to do this:

* set the window.Prism = { manual: true }
* use the attribute data-manual on the

> Some plugins will not work（e.g. line-number）. Because it's only work in browser.

Load Plugins

The names to use can be found here.

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'`

Contributing & Development

If there is any doubt, it is very welcome to discuss the issue together.
Please read Contributor Covenant Code of Conduct and CONTRIBUTING.