代码块
显示 Shiki 高亮代码块
import createMDX from 'fumadocs-mdx/config';
const withMDX = createMDX();
/** @type {import('next').NextConfig} */
const config = {
reactStrictMode: true,
};
export default withMDX(config);Install to your codebase
Easier customisation & control.
这是一个 MDX 组件，用于与 Rehype Code 一起显示高亮代码块。你可以参考 Markdown 来了解编写代码块的语法。
🌐 This is a MDX component meant to be used with Rehype Code to display highlighted codeblocks. You can refer to Markdown for the syntax of writing codeblocks.
支持的功能：
🌐 Supported features:
- 复制按钮
- 自定义标题和图标
如果你正在寻找具有运行时语法高亮的等效项，请参见 Dynamic Code Block。
使用
🌐 Usage
将 pre 元素封装在 <CodeBlock /> 中，<CodeBlock /> 作为代码块的容器。
🌐 Wrap the pre element in <CodeBlock />, which acts as the wrapper of code block.
import defaultComponents from 'fumadocs-ui/mdx';
import type { MDXComponents } from 'mdx/types';
import { CodeBlock, Pre } from 'fumadocs-ui/components/codeblock';
export function getMDXComponents(components?: MDXComponents): MDXComponents {
return {
...defaultComponents,
// HTML `ref` attribute conflicts with `forwardRef`
pre: ({ ref: _ref, ...props }) => (
<CodeBlock {...props}>
<Pre>{props.children}</Pre>
</CodeBlock>
),
...components,
};
}保持背景
🌐 Keep Background
使用 Shiki 生成的背景颜色。
🌐 Use the background color generated by Shiki.
import { Pre, CodeBlock } from 'fumadocs-ui/components/codeblock';
<CodeBlock keepBackground {...props}>
<Pre>{props.children}</Pre>
</CodeBlock>;图标
🌐 Icons
通过向 CodeBlock 组件传递 icon 属性来指定自定义图标。
🌐 Specify a custom icon by passing an icon prop to CodeBlock component.
默认情况下，图标将由自定义 Shiki 转换器注入。
🌐 By default, the icon will be injected by the custom Shiki transformer.
console.log('js');Last updated on