程式碼區塊

config.js

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 customization & control.

npx @fumadocs/cli@latest add codeblock

這是一個 MDX 元件，需搭配 Rehype Code 使用，用來顯示經語法突顯的程式碼區塊。程式碼區塊的撰寫語法請參考 Markdown。

支援的功能：

複製按鈕
自訂標題與圖示

如果您需要可在執行階段進行語法突顯的對應元件，請參閱 Dynamic Code Block。

使用方式

請將 pre 元素包在 <CodeBlock /> 中，作為程式碼區塊的外層容器。

components/mdx.tsx

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) {
  return {
    ...defaultComponents,
    // HTML 的 `ref` 屬性會與 `forwardRef` 衝突
    pre: ({ ref: _ref, ...props }) => (
      <CodeBlock {...props}>
        <Pre>{props.children}</Pre>
      </CodeBlock>
    ),
    ...components,
  } satisfies MDXComponents;
}

保留背景

使用 Shiki 產生的背景色。

import { Pre, CodeBlock } from 'fumadocs-ui/components/codeblock';

<CodeBlock keepBackground {...props}>
  <Pre>{props.children}</Pre>
</CodeBlock>;

圖示

若要指定自訂圖示，請將 icon prop 傳入 CodeBlock 元件。

預設情況下，圖示會由自訂的 Shiki transformer 注入。

config.js

console.log('js');

使用方式複製錨點連結

保留背景複製錨點連結

圖示複製錨點連結

本頁目錄

使用方式

保留背景

圖示