Code blockstandard

코드를 보여 주는 상자(코드 블록, code block)입니다. 제목 줄, 복사 버튼, 줄 번호, 줄 강조(추가·삭제·강조)를 갖습니다. shadcn base-nova 의 원본을 그대로 담은 아이템입니다. 색 입히기는 `use-highlighted-code` 가 맡고 이 아이템은 글자를 그대로 받습니다.

설치

pnpm

pnpm dlx shadcn@4.23.0 add @uikit/code-block

의존 아이템button use-highlighted-code

코드를 보여 주는 상자(코드 블록, code block)입니다. 제목 줄, 복사 버튼, 줄 번호, 줄 강조(추가·삭제·강조)를 갖습니다. shadcn base-nova 의 원본을 그대로 담은 아이템입니다. 색 입히기는 use-highlighted-code 가 맡고 이 아이템은 글자를 그대로 받습니다.

설치

pnpm dlx shadcn@4.23.0 add @uikit/code-block

사용

tsx

import {  CodeBlock,  CodeBlockActions,  CodeBlockContent,  CodeBlockCopyButton,  CodeBlockHeader,  CodeBlockTitle,} from "@/components/ui/code-block";
const source = "pnpm dlx shadcn@4.23.0 add @uikit/button";
export function InstallCommand() {  return (    <CodeBlock>      <CodeBlockHeader>        <CodeBlockTitle>Terminal</CodeBlockTitle>        <CodeBlockActions>          <CodeBlockCopyButton value={source} />        </CodeBlockActions>      </CodeBlockHeader>      <CodeBlockContent lineNumbers>{source}</CodeBlockContent>    </CodeBlock>  );}

속성

참고: shadcn 문서. Base UI 부품이 아니라서 API 링크는 없습니다.

부품	`data-slot`	주요 속성
`CodeBlock`	`code-block`	`variant`: `"default"` \| `"destructive"`, `size`: `"default"` \| `"sm"`. `data-variant`·`data-size` 로 남습니다
`CodeBlockHeader`, `CodeBlockTitle`, `CodeBlockFooter`	`code-block-header` 등	`div` 속성. 제목은 한 줄로 자릅니다
`CodeBlockActions`	`code-block-actions`	헤더 안에서는 오른쪽, 상자의 직계 자식이면 오른쪽 위에 떠서 마우스를 올리거나 포커스할 때 보입니다
`CodeBlockCopyButton`	`code-block-copy-button`	`value`(필수, 복사할 글), `variant`(기본 `ghost`), `size`(기본 `icon-xs`), `onClick`
`CodeBlockContent`	`code-block-content`	`pre`. `wrap`, `lineNumbers`, `startLine`(기본 1)
`CodeBlockLine`	`code-block-line`	`variant`: `"default"` \| `"added"` \| `"highlighted"` \| `"removed"`

기본으로 지키는 것

복사 버튼은 value 를 클립보드에 쓰고 2초 동안 Copied(aria-label, data-copied, aria-live="polite" 영역)로 바뀝니다. 복사가 거절되거나 navigator.clipboard 가 없어도(보안 문맥이 아님) 바뀌지 않고 던지지도 않습니다. onClick 이 먼저 불립니다.
lineNumbers 는 children 이 문자열일 때만 줄로 나눕니다. 끝의 개행 하나는 빈 줄을 만들지 않습니다. 문자열이 아니면 그대로 그리고 직접 CodeBlockLine 을 놓습니다.
빈 줄은 개행 하나를 담아서 선택해 복사해도 빈 줄이 남습니다.
본문은 dir="ltr" 이고 tabindex="0" 이라 키보드로 스크롤할 수 있습니다.
알 수 없는 variant 는 던지지 않고 변형 클래스 없이 그립니다.

접근성

키	동작
`Tab`	복사 버튼, 본문(`pre`) 순서로 옮깁니다
`Enter`, `Space`	복사 버튼을 누릅니다
방향키	포커스한 본문을 스크롤합니다

복사 버튼 이름은 Copy·Copied 고정이라 다른 언어로는 aria-label 속성으로 바꿉니다. 복사는 navigator.clipboard 가 있는 보안 환경(HTTPS)에서만 동작합니다.

의존

npm: class-variance-authority, cn, lucide-react. 아이템: button, use-highlighted-code.