MkSaaS文檔代碼塊
在文檔中添加代碼塊
import createMDX from 'fumadocs-mdx/config';
const withMDX = createMDX();
/** @type {import('next').NextConfig} */
const config = {
reactStrictMode: true,
};
export default withMDX(config);顯示代碼塊，預設添加。
- 複製按鈕
- 自定義標題和圖標
使用方法
將 pre 元素包裝在 <CodeBlock /> 中，它作為代碼塊的包裝器。
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> {}
</CodeBlock>
),
}}
/>;有關用法，請參見 Markdown。
保留背景
使用由 Shiki（Rehype Code 插件）生成的背景顏色。
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 轉換器注入。
console.log('js');