コードブロック

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

これは、Rehype Code と組み合わせて、ハイライトされたコードブロックを表示するための MDX コンポーネントです。コードブロックの書き方については、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>;

アイコン

CodeBlock コンポーネントに icon prop を渡すと、カスタムアイコンを指定できます。

デフォルトでは、アイコンはカスタムの Shiki トランスフォーマーによって挿入されます。

config.js

console.log('js');

コードブロック

使い方アンカーリンクをコピー

背景を保持するアンカーリンクをコピー

アイコンアンカーリンクをコピー

このページの内容

使い方

背景を保持する

アイコン