Rehype Code

A wrapper of @shikijs/rehype, the syntax highlighter used by Fumadocs.

It converts raw <pre /> codeblocks into highlighted codeblocks:

```ts
console.log('Hello World');
```

Usage

Add the rehype plugin.

import { compile } from '@mdx-js/mdx';
import { rehypeCode, type RehypeCodeOptions } from 'fumadocs-core/mdx-plugins';

const rehypeCodeOptions: RehypeCodeOptions = {
  themes: {
    light: 'github-light',
    dark: 'github-dark',
  },
};

await compile('...', {
  rehypePlugins: [
    // using default settings
    rehypeCode,
    // or with custom options
    [rehypeCode, rehypeCodeOptions],
  ],
});

Meta

It parses the title meta string, and adds it to the pre element as an attribute.

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

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

Inline Code

You can enable it with inline option:

import { type RehypeCodeOptions } from 'fumadocs-core/mdx-plugins';

const rehypeCodeOptions: RehypeCodeOptions = {
  inline: 'tailing-curly-colon',
};

This is a highlighted inline code: `console.log("hello world"){:js}`.

This is a highlighted inline code: console.log("hello world").

Icon

The plugin will automatically adds an icon attribute according to the language meta string. It is a HTML string, you can render it with React dangerouslySetInnerHTML.

```ts
console.log('This should shows the logo of TypeScript');
```

Disable or customize icons with the icon option.

More Options

The options are inherited from Shiki, see their docs for other options.