79 lines
1.5 KiB
Plaintext
79 lines
1.5 KiB
Plaintext
---
|
||
title: 代码块
|
||
description: 在文档中添加代码块
|
||
---
|
||
|
||
<Wrapper>
|
||
<div className="bg-fd-background rounded-lg prose-no-margin">
|
||
|
||
```js title="config.js"
|
||
import createMDX from 'fumadocs-mdx/config';
|
||
|
||
const withMDX = createMDX();
|
||
|
||
// [!code word:config]
|
||
/** @type {import('next').NextConfig} */
|
||
const config = {
|
||
// [!code highlight]
|
||
reactStrictMode: true, // [!code highlight]
|
||
}; // [!code highlight]
|
||
|
||
export default withMDX(config);
|
||
```
|
||
|
||
</div>
|
||
</Wrapper>
|
||
|
||
显示代码块，默认添加。
|
||
|
||
- 复制按钮
|
||
- 自定义标题和图标
|
||
|
||
## 使用方法
|
||
|
||
将 pre 元素包装在 `<CodeBlock />` 中，它作为代码块的包装器。
|
||
|
||
```tsx
|
||
import { Pre, CodeBlock } from 'fumadocs-ui/components/codeblock';
|
||
|
||
<MDX
|
||
components={{
|
||
// HTML `ref` attribute conflicts with `forwardRef`
|
||
pre: ({ ref: _ref, ...props }) => (
|
||
<CodeBlock {...props}>
|
||
<Pre>{props.children}</Pre> {/* [!code highlight] */}
|
||
</CodeBlock>
|
||
),
|
||
}}
|
||
/>;
|
||
```
|
||
|
||
有关用法，请参见 [Markdown](/docs/markdown#codeblock)。
|
||
|
||
### 保留背景
|
||
|
||
使用由 Shiki（Rehype Code 插件）生成的背景颜色。
|
||
|
||
```tsx
|
||
import { Pre, CodeBlock } from 'fumadocs-ui/components/codeblock';
|
||
|
||
<MDX
|
||
components={{
|
||
pre: ({ ref: _ref, ...props }) => (
|
||
<CodeBlock keepBackground {...props}>
|
||
<Pre>{props.children}</Pre>
|
||
</CodeBlock>
|
||
),
|
||
}}
|
||
/>;
|
||
```
|
||
|
||
### 图标
|
||
|
||
通过向 `CodeBlock` 组件传递 `icon` 属性来指定自定义图标。
|
||
|
||
默认情况下，图标将由自定义 Shiki 转换器注入。
|
||
|
||
```js title="config.js"
|
||
console.log('js');
|
||
``` |