rehype-shiki

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

This plugin was based upon [rehype-highlight][rehype-highlight].

Installation

[npm][]:

``bash
npm install rehype-shiki
`

Usage

Say example.html looks as follows:

`html


Hello World!

var name = "World";
console.warn("Hello, " + name + "!")


`

...and example.js like this:

`javascript
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:

`html
example.html: no issues found


Hello World!

var name = "World";
console.warn("Hello, " + name + "!")

`

API

$3

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

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

`html


console.log("Hello world!")


`

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

[Shiki][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][license] © [@rsclarke][rsclarke]

[rehype]: https://github.com/rehypejs/rehype
[shiki]: https://github.com/octref/shiki
[rehype-highlight]: https://github.com/rehypejs/rehype-highlight
[npm]: https://docs.npmjs.com/cli/install
[hast]: https://github.com/syntax-tree/hast
[license]: LICENSE
[rsclarke]: https://rsclarke.dev