Code Block

핵심 속성

설치

pnpm add @tinyrack/ui

@import '@tinyrack/ui/components/code-block.css';

import { TRCodeBlock } from '@tinyrack/ui/components/code-block';

플레이그라운드

const status = 'healthy';

사용법

강조 예시는 trShikiWebHighlighter를 사용해요. 예제를 복사하기 전에 Shiki를 추가하세요.

pnpm add shiki

const status = 'healthy';

예시

rack-a: healthy

{
  "status": "healthy"
}

const region = 'icn';

const message = 'A deliberately long line that wraps inside narrow documentation layouts';

export const Status = () => <span>정상</span>;

export const ready = true;

.status {
  color: green;
}

<span>정상</span>

# 상태

<Status />

status = 'healthy'

pnpm verify

조합한 복사 예시에는 다음 애플리케이션 동작 import도 필요해요.

import { useState } from 'react';
import { TRButton } from '@tinyrack/ui/components/button';
import '@tinyrack/ui/components/button.css';

API

TRCodeBlock은 문법을 하나도 포함하지 않아요. highlighter 속성이나 TRCodeHighlighterProvider로 하이라이터를 주입하면, 사용할 수 있는 language 값도 그 선택을 따라요. 설정 방법은 구문 강조를 참고하세요.

강조는 하이드레이션 후에 실행돼요. 원본 소스는 SSR에 안전하며 하이라이터가 응답하기 전에도 보여요. code나 language를 변경하면 오래된 작업을 취소해 이전 비동기 결과가 현재 소스를 덮어쓰지 못하게 해요.

블록은 상태를 data-highlight에 표시해요. language가 없으면 plain, 하이라이터가 동작하는 동안은 pending, 성공하면 highlighted, 하이라이터에 해당 문법이 없으면 unsupported, 하이라이터를 설정하지 않았으면 no-highlighter, 하이라이터가 예외를 던지면 error예요. 성공 이외의 모든 결과는 SSR 대체 콘텐츠를 그대로 유지하므로, 빈 블록 대신 읽을 수 있는 일반 텍스트로 남아요. onHighlightFailure 핸들러가 없으면 error만 언어마다 한 번 콘솔에 보고돼요. 하이라이터 미설정과 미지원 언어는 일반 텍스트가 올바른 표시인 설정 상태이므로 조용히 넘어가고 data-highlight로만 드러나요.

그 밖의 네이티브 pre 속성과 이벤트도 전달돼요. 주변 문맥만으로 소스를 식별할 수 없다면 aria-label을 추가하세요. 강조는 접근 가능한 원문을 바꾸지 않아요.

스타일

wrap={false}이면 긴 줄을 가로로 스크롤해 표시해요. wrap이면 긴 토큰도 사용 가능한 너비 안에서 줄바꿈하며 두 모드 모두 부모 경계 안에 머물러요.