AI マジック 3Docsコードブロック
コードブロックをドキュメントに追加する
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>
),
}}
/>;アイコン
icon プロパティを CodeBlock コンポーネントに渡すことで、カスタム アイコンを指定します。
デフォルトでは、アイコンはカスタム Shiki トランスフォーマーによって挿入されます。
console.log('js');