Neovictorian Paisley Menswear

    rehype-shiki

    0.0.9 • Public • Published

    rehype-shiki

    rehype plugin to apply syntax highlighting on code blocks with shiki.

    This plugin was based upon rehype-highlight.

    Installation

    npm:

    npm install rehype-shiki

    Usage

    Say example.html looks as follows:

    <h1>Hello World!</h1>
     
    <pre><code class="language-js">var name = "World";
    console.warn("Hello, " + name + "!")</code></pre>

    ...and example.js like this:

    var vfile = require('to-vfile')
    var report = require('vfile-reporter')
    var rehype = require('rehype')
    var shiki = require('rehype-shiki')
     
    rehype()
      .data('settings', {fragment: true})
      .use(shiki)
      .process(vfile.readSync('example.html'), function(err, file) {
        console.error(report(err || file))
        console.log(String(file))
      })

    Now, running node example yields:

    example.html: no issues found
    <h1>Hello World!</h1>
     
    <pre style="background: #2e3440"><code class="language-js"><span style="color: #81A1C1">var</span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">name</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">=</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">"</span><span style="color: #A3BE8C">World</span><span style="color: #ECEFF4">"</span><span style="color: #81A1C1">;</span>
    <span style="color: #8FBCBB">console</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">warn</span><span style="color: #D8DEE9FF">(</span><span style="color: #ECEFF4">"</span><span style="color: #A3BE8C">Hello, </span><span style="color: #ECEFF4">"</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">+</span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">name</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">+</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">"</span><span style="color: #A3BE8C">!</span><span style="color: #ECEFF4">"</span><span style="color: #D8DEE9FF">)</span>
    </code></pre>
     

    API

    rehype().use(shiki[, options])

    Apply syntax highlighting to pre > code using shiki; which tokenises the code block and new hast nodes are subsequently created from (using this plugin).

    Configure the language by using the language-foo class on the code element. For example;

    <pre><code class="language-js">console.log("Hello world!")</code></pre>

    This is in respect to the mdast-util-to-hast code handler.

    Shiki does not perform language detection, if unknown, this plugin falls back to the theme's background and text colour (chosen as settings.foreground from the theme file).

    options

    options.theme

    string, default: 'nord' - Name of shiki theme to use, otherwise path to theme file for it to load.

    options.useBackground

    boolean, default: true - Whether to apply the background theme colour to the pre element.

    License

    MIT © @rsclarke

    Install

    npm i rehype-shiki

    DownloadsWeekly Downloads

    1,042

    Version

    0.0.9

    License

    MIT

    Unpacked Size

    8.26 kB

    Total Files

    4

    Last publish

    Collaborators

    • rsclarke