Rehype Code

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

Add an icon according to the language of codeblock. It outputs HTML, you might need to render it with React dangerouslySetInnerHTML.

<pre icon="<svg />">...</pre>

Disable or customise icons with the icon option.

Tab

Wrap the pre element in MDX <Tab /> component. This is mainly for Fumadocs UI Integration, but you can use it with your own Tab component.

<Tabs items={["Name"]}>
 
```js tab="Name"
console.log('Hello');
```
 
</Tabs>

Outputs:

<Tabs items={["Name"]}>
 
<Tab value="Name">
 
```js
console.log('Hello');
```
 
</Tab>
 
</Tabs>

More Options

see Shiki.