AI 매직 3DDocs코드 블록
문서에 코드 블록 추가
import createMDX from 'fumadocs-mdx/config';
const withMDX = createMDX();
/** @type {import('next').NextConfig} */
const config = {
reactStrictMode: true,
};
export default withMDX(config);기본적으로 추가된 코드 블록을 표시합니다.
- 복사 버튼
- 맞춤형 제목 및 아이콘
사용법
코드 블록의 래퍼 역할을 하는 <CodeBlock />에 pre 요소를 래핑합니다.
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');