Rehype Code

Code syntax highlighter

A wrapper of Shiki, the built-in syntax highlighter.

Usage

Add the rehype plugin.

import { rehypeCode } from 'fumadocs-core/mdx-plugins'
 
const config = {
    rehypePlugins: [
      [rehypeCode, { ... }]
    ],
}

Output

A codeblock wrapped in <pre />.

<pre>
<code>...</code>
</pre>

Meta

It parses the title meta string, and add it to the pre element via attribute.

```js title="Title"
console.log('Hello');
```

You may filter the meta string before processing it with the filterMetaString option.

Icon

Adds an icon according to the language of codeblock. It outputs JSX syntax, which means MDX must be enabled.

<pre icon={<svg />}>...</pre>

Disable or customise icons with the icon option.

More Options

see Shiki.

Last updated on

On this page

Edit on Github