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