Rehype Code

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

Usage

Add the rehype plugin.

MDX Compiler

import { compile } from '@mdx-js/mdx';
import { remarkInstall } from 'fumadocs-docgen';
 
await compile('...', {
  remarkPlugins: [remarkInstall],
});

This plugin is included by default on Fumadocs MDX.

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.

Inline Code

console.log("hello world") works.

See https://shiki.style/packages/rehype#inline-code.

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.

More Options

see Shiki.