rehype-prism

2019-06-13

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

rehype-prism

versiondownloadslicensedependenciescoveralls

The unified plugin used to highlight code block in html with Prism. And you have the ability to control whether to copy the language-class to <pre>tag

Install

npm i rehype-prism

Usage

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

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

// parse code block in html string
rehyper()
  .use(highlightCode)
  .use(html)
  .parse(/* html string */)

Must disabled prism autoHighlightbefore 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-manualon the <script>element you used for prism.

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

Options

  • preLangClass(default: true): 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'

HomePage

https://github.com/Val-istar-Guo/rehype-prism#readme

Repository

https+https://github.com/Val-istar-Guo/rehype-prism


上一篇:rsyncwrapper
下一篇:orga
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部