Code Block
언어 이름과 복사 동작을 갖춘 코드 읽기 영역입니다.
- 성숙도
- 안정
- 소스 경로
components/content/code-block.tsx- 소스
- 소스
실제 미리보기
const surface = 'paper'사용할 때
사용 기준
문서에서 여러 줄의 코드나 명령을 원문 그대로 보여줄 때 씁니다.
사용하지 않을 때
짧은 inline 식별자나 실행 가능한 편집기에는 쓰지 않습니다.
변형과 상태
idle고정 예시실제 코드 원문, 언어 이름, 복사 버튼을 초기 상태에서 확인합니다.
const surface = 'paper'copied직접 조작실제 복사 버튼을 눌러 COPIED label과 polite 상태 안내를 확인합니다.
미리보기 컨트롤을 직접 조작해 이 상태를 확인합니다.
const surface = 'paper'error환경에서 확인클립보드 권한을 거부한 뒤 실제 복사 버튼의 RETRY label과 선택 가능한 원문을 확인합니다.
운영체제나 브라우저 설정을 바꾼 뒤 이 상태를 확인합니다.
const surface = 'paper'
접근성
복사 버튼 이름에는 언어를 넣습니다. 실패해도 원문을 선택할 수 있어야 합니다.
API
| 속성 | 타입 | 필수 | 설명 |
|---|---|---|---|
children | ReactNode | 예 | pre 안에 표시할 코드 내용입니다. |
language | string | 아니요 | toolbar에 표시할 언어 식별자입니다. |
source | string | 예 | 클립보드에 복사할 원문입니다. |
사용 예시
지원 importimport { CodeBlock } from "@/components/content/code-block"
<CodeBlock language="ts" source={source}>{highlightedCode}</CodeBlock>