Rehype 代码
代码语法高亮器
Shiki 的包装器，即内置语法高亮器。
用法
添加 rehype 插件。
import { compile } from '@mdx-js/mdx';
import { rehypeCode } from 'fumadocs-core/mdx-plugins';
await compile('...', {
rehypePlugins: [rehypeCode],
});Fumadocs MDX 默认包含此插件。
输出
包裹在 <pre /> 元素中的代码块。
<pre>
<code>...</code>
</pre>元数据
它会解析 title 元数据字符串，并将其作为属性添加到 pre 元素中。
```js title="Title"
console.log('Hello');
```您可以使用 filterMetaString 选项在处理前过滤元数据字符串。
行内代码
console.log("hello world") 有效。
参见 https://shiki.style/packages/rehype#inline-code。
图标
根据代码块的语言添加图标。
它输出 HTML，您可能需要使用 React 的 dangerouslySetInnerHTML 来渲染它。
<pre icon="<svg />">...</pre>使用 icon 选项禁用或自定义图标。
更多选项
参见 Shiki。
How is this guide?
Last updated on