rehype-shiki-reloaded

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

This plugin was based upon rehype-shiki.

• Rewritten in TypeScript
• Adds dark mode support
• Optimized for perf

Installation

npm:

npm install rehype-shiki-reloaded

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-reloaded");

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.

options.langs

ILanguageRegistration[], default: [] - Languages other than the default languages to load into shiki

{
  "id": "rockstar",
  "scopeName": "source.rockstar",
  "path": "./rockstar.tmLanguage.json" // or `plist`
}

options.darkTheme

string, default: undefined - Name of shiki theme to use to create dark mode blocks, otherwise path to theme file for it to load.

After that this plugin will generate 2 code blocks, one for light mode and one for dark mode. It's up to you how to switch between these, either by media query, className or a combination of those.

Here is how you would use a media query to hide and show the appropriate block.

.syntax-dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  .syntax-light {
    display: none;
  }

  .syntax-dark {
    display: block;
  }
}

License

MIT © @rsclarke