Rehype 代码

Fumadocs 使用的语法高亮工具 @shikijs/rehype 的封装。

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

它将原始的 <pre /> 代码块转换为高亮的代码块：

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

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

使用

🌐 Usage

添加 rehype 插件。

🌐 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

它解析 title 元字符串，并将其作为属性添加到 pre 元素中。

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

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

你可以在使用 filterMetaString 选项处理之前过滤元字符串。

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

行内代码

🌐 Inline Code

你可以通过 inline 选项启用它：

🌐 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}`.

这是一个高亮的内联代码：console.log("hello world")。

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

图标

🌐 Icon

该插件将根据语言元字符串自动添加一个 icon 属性。它是一个 HTML 字符串，你可以使用 React 的 dangerouslySetInnerHTML 来渲染它。

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

使用 icon 选项禁用或自定义图标。

🌐 Disable or customise icons with the icon option.

更多选项

🌐 More Options

这些选项是从 Shiki 继承的，请查看他们的文档以获取其他选项。

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