CodeBlock

AI가 생성한 코드를 표시하는 블록 컴포넌트입니다. 복사 버튼, 라인 번호, 파일명 표시를 지원합니다.

Installation

bash

npx @axis-ds/cli add code-block --agentic

Usage

tsx

import { CodeBlock } from '@axis-ds/agentic-ui'

export function Example() {
  return (
    <CodeBlock
      code={`function hello() {
  console.log('Hello, World!')
}`}
      language="typescript"
      filename="hello.ts"
      showLineNumbers
    />
  )
}

Interactive Demo

use-user.tstypescript

1 import { useState, useEffect } from 'react'
2 
3 interface User {
4   id: string
5   name: string
6   email: string
7 }
8 
9 export function useUser(userId: string) {
10   const [user, setUser] = useState<User | null>(null)
11   const [loading, setLoading] = useState(true)
12 
13   useEffect(() => {
14     fetch(`/api/users/${userId}`)
15       .then(res => res.json())
16       .then(data => {
17         setUser(data)
18         setLoading(false)
19       })
20   }, [userId])
21 
22   return { user, loading }
23 }

Variants

파일명 + 라인 번호

example.js

1 const greeting = "Hello!"
2 console.log(greeting)

언어만 표시

sql

SELECT * FROM users
WHERE active = true
ORDER BY created_at DESC

최대 높이 제한

scrollable.ts

1 import { useState, useEffect } from 'react'
2 
3 interface User {
4   id: string
5   name: string
6   email: string
7 }
8 
9 export function useUser(userId: string) {
10   const [user, setUser] = useState<User | null>(null)
11   const [loading, setLoading] = useState(true)
12 
13   useEffect(() => {
14     fetch(`/api/users/${userId}`)
15       .then(res => res.json())
16       .then(data => {
17         setUser(data)
18         setLoading(false)
19       })
20   }, [userId])
21 
22   return { user, loading }
23 }

Props

Prop	Type	Default	Description
`code`Required	`string`	-	표시할 코드 문자열
`language`	`string`	-	언어 힌트 (표시용)
`filename`	`string`	-	파일 이름
`showLineNumbers`	`boolean`	false	라인 번호 표시 여부
`onCopy`	`(code: string) => void`	-	복사 콜백
`maxHeight`	`string`	-	최대 높이 (CSS 값)
`className`	`string`	-	추가 CSS 클래스

codeRequired

Type:string

표시할 코드 문자열

language

Type:string

Default:-

언어 힌트 (표시용)

filename

Type:string

Default:-

파일 이름

showLineNumbers

Type:boolean

Default:false

라인 번호 표시 여부

onCopy

Type:(code: string) => void

Default:-

복사 콜백

maxHeight

Type:string

Default:-

최대 높이 (CSS 값)

className

Type:string

Default:-

추가 CSS 클래스

Accessibility

복사 버튼에 aria-label이 제공되고, 장식 요소는 role="presentation" / aria-hidden 처리됩니다.

Key	Action
`Tab`	복사 버튼으로 이동합니다.
`Enter / Space`	코드를 클립보드에 복사합니다.

코드는 pre/code 구조로 보존되어 스크린리더가 인식합니다.