CodeBlock

@hua-labs/ui

v1.1.0

신택스 하이라이팅, 복사 기능, macOS 스타일 헤더를 갖춘 코드 표시 컴포넌트입니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { CodeBlock, InlineCode } from "@hua-labs/hua";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

라이브 데모

기본 스타일 (다크 테마)

tsx

1import { useState } from 'react';
2import { Button, Card } from '@hua-labs/hua';
3function Counter() {
4  const [count, setCount] = useState(0);
5 
6  return (
7    <Card className="p-4">
8      <p>Count: {count}</p>
9      <Button onClick={() => setCount(count + 1)}>
10        Increment
11      </Button>
12    </Card>
13  );
14}

파일명 표시

hua.config.tstypescript

1// hua.config.ts
2export default {
3  theme: {
4    primary: '#3b82f6',
5    secondary: '#64748b',
6  },
7  plugins: ['forms', 'typography'],
8};

라이트 테마

javascript

const message = "Hello, World!";
console.log(message);

줄 번호 없이

bash

npm install @hua-labs/hua

최대 높이 제한 (스크롤)

javascript

1// Long code example
2console.log('Line 1');
3console.log('Line 2');
4console.log('Line 3');
5console.log('Line 4');
6console.log('Line 5');
7console.log('Line 6');
8console.log('Line 7');
9console.log('Line 8');
10console.log('Line 9');
11console.log('Line 10');
12console.log('Line 11');
13console.log('Line 12');
14console.log('Line 13');
15console.log('Line 14');
16console.log('Line 15');
17console.log('Line 16');
18console.log('Line 17');
19console.log('Line 18');
20console.log('Line 19');
21console.log('Line 20');

인라인 코드

패키지를 설치하려면 {code} 명령어를 사용하세요. npm install @hua-labs/hua

Props

이름	타입	기본값	설명
`code*`	`string`	-	표시할 코드 내용
`language`	`string`	-	프로그래밍 언어 (표시용)
`filename`	`string`	-	헤더에 표시할 파일명
`showLineNumbers`	`boolean`	`false`	줄 번호 표시
`showCopyButton`	`boolean`	`true`	복사 버튼 표시
`onCopy`	`() => void`	-	코드 복사 시 콜백 함수
`theme`	`"dark" \| "light"`	`"dark"`	색상 테마
`maxHeight`	`string \| number`	-	최대 높이 (스크롤 활성화)
`copySuccessMessage`	`string`	`"Copied!"`	Message to display when code is successfully copied

코드 예시

docs:common.basicUsagetsx

1// Via framework (recommended)
2import { CodeBlock } from '@hua-labs/ui/data';
3// Or direct import
4// import { CodeBlock } from '@hua-labs/ui/data';
5 
6<CodeBlock
7  code="console.log('Hello, World!')"
8  language="javascript"
9/>

docs:components.codeBlock.examples.withFilenametsx

1<CodeBlock
2  code={configCode}
3  language="typescript"
4  filename="hua.config.ts"
5  showLineNumbers
6/>

docs:components.codeBlock.examples.lightThemetsx

1<CodeBlock
2  code="const greeting = 'Hello'"
3  language="typescript"
4  theme="light"
5/>

docs:components.codeBlock.examples.inlineCodetsx

1import { InlineCode } from '@hua-labs/ui/data';
2 
3<p>
4  Use the <InlineCode>npm install</InlineCode> command.
5</p>

신택스 하이라이팅

CodeBlock은 sugar-high 라이브러리를 사용하여 신택스 하이라이팅을 제공합니다. 대부분의 프로그래밍 언어를 지원합니다.

접근성

•복사 버튼: 복사 액션에 대한 aria-label 적용
•키보드: 복사 버튼 키보드 접근 가능
•시각적 피드백: 복사 시 체크 아이콘 표시

Table Timeline