rehype-prism-template

    0.4.1 • Public • Published

    rehype-prism-teplate

    MIT License Minzipped Size NPM Version Node Version

    rehype plugin to highlight code blocks in HTML with Prism fork from mapbox/rehype-prism.

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

    Installation

    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 <code> element. You can use any language supported by refractor.

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

    options

    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 <code> 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:

    const rehype = require('rehype');
    const rehypePrism = require('rehype-prism-template');
     
    rehype()
      .use(rehypePrism)
      .process(/* some html */);
    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.

    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:

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

    To reset the template back where it registers all languages:

    yarn register-all

    FAQ

    Why does rehype-prism copy the language- class to the <pre> tag?

    Prism recommends adding the language- class to the <code> tag like this:

    <pre><code class="language-css">p { color: red }</code></pre>

    It bases this recommendation on the HTML5 spec. However, an undocumented behavior of their JavaScript is that, in the process of highlighting the code, they also copy the language- class to the <pre> tag:

    <pre class="language-css"><code class="language-css"><span class="token selector">p</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> red <span class="token punctuation">}</span></code></pre>

    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.

    Install

    npm i rehype-prism-template

    DownloadsWeekly Downloads

    2,230

    Version

    0.4.1

    License

    MIT

    Unpacked Size

    206 kB

    Total Files

    13

    Last publish

    Collaborators

    • avatar