Code Block

설치 확인

코드 표시와 복사

1. 목적과 출처

코드 표시와 복사

출처: shadcn 기본 제공 (Base UI 기반 base-nova 스타일)
프로젝트: src/components/ui/code-block.tsx
Registry: @adcapsule/code-block

2. 프리뷰와 변형

오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.

구성 모양

머리말 + 복사

Code Block
구성	모양
머리말 + 복사	save.tsx `import { Button } from "@/components/ui/button" // 주요 버튼export function Save() { return <Button size="sm">저장</Button>}`
줄 번호, 작게 size="sm"	`{ "registries": { "@adcapsule": "http://localhost:3000/r/{name}.json" }}`

save.tsx

import { Button } from "@/components/ui/button"
// 주요 버튼export function Save() {  return <Button size="sm">저장</Button>}

줄 번호, 작게 size="sm"

{  "registries": {    "@adcapsule": "http://localhost:3000/r/{name}.json"  }}

3. 속성 바꿔 보기

save.tsx

import { Button } from "@/components/ui/button"
// 주요 버튼export function Save() {  return <Button size="sm">저장</Button>}

언어

머리말과 복사줄 번호

const lines = useHighlightedCode(code, "tsx")

<CodeBlock>
  <CodeBlockHeader>
    <CodeBlockTitle>파일 이름</CodeBlockTitle>
    <CodeBlockActions><CodeBlockCopyButton value={code} /></CodeBlockActions>
  </CodeBlockHeader>
  <CodeBlockContent>
    {lines.map((line, i) => <CodeBlockLine key={i}>{line}</CodeBlockLine>)}
  </CodeBlockContent>
</CodeBlock>

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/code-block

npm 패키지: class-variance-authority, lucide-react
함께 설치: @adcapsule/button, @adcapsule/utils

처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결

import { CodeBlock, CodeBlockContent, CodeBlockLine } from "@/components/ui/code-block"
import { useHighlightedCode } from "@/hooks/use-highlighted-code"

const lines = useHighlightedCode(code, "tsx")
<CodeBlock>
  <CodeBlockContent>{lines.map((l, i) => <CodeBlockLine key={i}>{l}</CodeBlockLine>)}</CodeBlockContent>
</CodeBlock>

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

강조하려면 훅도 설치: npx shadcn@4.23.0 add @adcapsule/use-highlighted-code (Code Block만 설치하면 강조 없이 보임)
언어는 src/lib/highlighter.tsx 목록(tsx, bash, json 등)
lineNumbers, wrap
CodeBlockLine variant: added·removed·highlighted
CodeBlockCopyButton value로 복사

공통으로 유지할 토큰

syntax.* (코드 강조 색, 다크·라이트)
border.strong (테두리)
radius.lg (10px)

2. 프리뷰와 변형

오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.

구성 모양

머리말 + 복사

Code Block
구성	모양
머리말 + 복사	save.tsx `import { Button } from "@/components/ui/button" // 주요 버튼export function Save() { return <Button size="sm">저장</Button>}`
줄 번호, 작게 size="sm"	`{ "registries": { "@adcapsule": "http://localhost:3000/r/{name}.json" }}`

save.tsx

import { Button } from "@/components/ui/button"
// 주요 버튼export function Save() {  return <Button size="sm">저장</Button>}

줄 번호, 작게 size="sm"

{  "registries": {    "@adcapsule": "http://localhost:3000/r/{name}.json"  }}

3. 속성 바꿔 보기

save.tsx

import { Button } from "@/components/ui/button"
// 주요 버튼export function Save() {  return <Button size="sm">저장</Button>}

언어

머리말과 복사줄 번호

const lines = useHighlightedCode(code, "tsx")

<CodeBlock>
  <CodeBlockHeader>
    <CodeBlockTitle>파일 이름</CodeBlockTitle>
    <CodeBlockActions><CodeBlockCopyButton value={code} /></CodeBlockActions>
  </CodeBlockHeader>
  <CodeBlockContent>
    {lines.map((line, i) => <CodeBlockLine key={i}>{line}</CodeBlockLine>)}
  </CodeBlockContent>
</CodeBlock>

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/code-block

npm 패키지: class-variance-authority, lucide-react
함께 설치: @adcapsule/button, @adcapsule/utils

처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결

import { CodeBlock, CodeBlockContent, CodeBlockLine } from "@/components/ui/code-block"
import { useHighlightedCode } from "@/hooks/use-highlighted-code"

const lines = useHighlightedCode(code, "tsx")
<CodeBlock>
  <CodeBlockContent>{lines.map((l, i) => <CodeBlockLine key={i}>{l}</CodeBlockLine>)}</CodeBlockContent>
</CodeBlock>

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

강조하려면 훅도 설치: npx shadcn@4.23.0 add @adcapsule/use-highlighted-code (Code Block만 설치하면 강조 없이 보임)
언어는 src/lib/highlighter.tsx 목록(tsx, bash, json 등)
lineNumbers, wrap
CodeBlockLine variant: added·removed·highlighted
CodeBlockCopyButton value로 복사

공통으로 유지할 토큰

syntax.* (코드 강조 색, 다크·라이트)
border.strong (테두리)
radius.lg (10px)

1. 목적과 출처

2. 프리뷰와 변형

3. 속성 바꿔 보기

4. 설치와 사용

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

공통으로 유지할 토큰

6. 관련 패턴·템플릿

1. 목적과 출처

2. 프리뷰와 변형

3. 속성 바꿔 보기

4. 설치와 사용

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

공통으로 유지할 토큰

6. 관련 패턴·템플릿