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:

1npm install rehype-shiki-reloaded

Usage

Say example.html looks as follows:

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

...and example.js like this:

1var vfile = require("to-vfile");
2var report = require("vfile-reporter");
3var rehype = require("rehype");
4var shiki = require("rehype-shiki-reloaded");
5
6rehype()
7  .data("settings", { fragment: true })
8  .use(shiki)
9  .process(vfile.readSync("example.html"), function (err, file) {
10    console.error(report(err || file));
11    console.log(String(file));
12  });

Now, running node example yields:

1example.html: no issues found
2<h1>Hello World!</h1>
3
4<pre
5  style="background: #2e3440"
6><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>
7<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>
8</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;

1<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

1{
2  "id": "rockstar",
3  "scopeName": "source.rockstar",
4  "path": "./rockstar.tmLanguage.json" // or `plist`
5}

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.

1.syntax-dark {
2  display: none;
3}
4
5@media (prefers-color-scheme: dark) {
6  .syntax-light {
7    display: none;
8  }
9
10  .syntax-dark {
11    display: block;
12  }
13}

License

MIT © @rsclarke