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');
```

UsageCopy Anchor Link

Rehype Code is a rehype plugin. Fumadocs MDX enables it by default. Pass options with rehypeCodeOptions:

import { defineConfig } from 'fumadocs-mdx/config';

export default defineConfig({
  mdxOptions: {
    rehypeCodeOptions: {
      themes: {
        light: 'github-light',
        dark: 'github-dark',
      },
    },
  },
});

HighlighterCopy Anchor Link

The plugin uses Shiki. rehypeCodeFromHighlighter takes another highlighter like Highlights instead, with the options other than Shiki's. Pass a function to create the highlighter with the transformers of the plugin.

Disable the default plugin and add it:

import { defineConfig } from 'fumadocs-mdx/config';
import { rehypeCodeFromHighlighter } from 'fumadocs-core/mdx-plugins/rehype-code.core';
import { highlighter } from './lib/highlighter';

export default defineConfig({
  mdxOptions: {
    rehypeCodeOptions: false,
    rehypePlugins: [
      () =>
        rehypeCodeFromHighlighter(({ transformers }) =>
          highlighter.override({ shikiTransformers: transformers }),
        ),
    ],
  },
});

MetaCopy Anchor Link

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 CodeCopy Anchor Link

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").

IconCopy Anchor Link

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 OptionsCopy Anchor Link

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