Skip to content

Rehype plugin to highlight codeblocks using Shiki, with special support for Astro.

License

Notifications You must be signed in to change notification settings

retronav/rehype-shiki

Repository files navigation

@retronav/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.