@obnoxiousnerd/rehype-shiki

Rehype plugin to highlight your code blocks with Shiki

Usage no npm install needed!

<script type="module">
  import obnoxiousnerdRehypeShiki from 'https://cdn.skypack.dev/@obnoxiousnerd/rehype-shiki';
</script>

README

@obnoxiousnerd/rehype-shiki

Rehype plugin to highlight your code blocks with Shiki.

Features

  • Supports both pre (markdown codeblocks) and raw (raw HTML) nodes.
  • Allows you to use your own Shiki highlighter with customizations.
  • Shiki is added as a peerDependency, which means no locking on a particular version.

Usage

Check index.test.ts for various use cases. This plugin uses the class attribute on the code element to determine the language of the codeblock. Example of a codeblock which is parsed by remark-rehype from markdown and works with this plugin:

<pre>
    <code class="language-typescript">
    const foo = 'bar';
    </code>
</pre>

Inspiration

Much of the plugin's interface is inspired by @leafac/rehype-shiki.