Syntax highlighter

미리보기

로컬 미리보기입니다. 실제 계정, 환경, 실행 데이터에는 영향을 주지 않습니다.

import { Button } from '@surflane/ui'

// Built from the same design tokens.
export function RunAction() {
  const count = 3
  return <Button disabled={count === 0}>Deploy service</Button>
}

사용법

Platform Quiet에서 소스 코드를 강조합니다. 중립 표면과 저채도 OKLCH 색을 쓰는 전용 코드 테마입니다. 키워드는 보라색, 문자열은 세이지, 함수와 타입은 파란색, 숫자는 앰버입니다. 속성과 구두점은 중립을 유지하고 주석은 이탤릭이나 흐린 불투명도 없이 읽기 쉽게 유지합니다. 복사 액션은 이 하이라이터를 공유하는 CodeBlock을 사용하세요.

• 강조를 코드 검증이나 실행 결과로 제시하지 마세요. 별도로 보고하세요.
• HTML을 주입하거나 소스를 실행하지 마세요. 일반 코드 문자열로 전달하세요.
• 공백, 줄 바꿈, 한글 텍스트를 제거하거나 자동 수정하지 마세요. 원본 소스를 그대로 전달하세요.
• 모든 소스가 강조되길 기대하지 마세요. 지원하지 않는 언어, 엔진 로드 실패, 50,000자 초과 소스는 일반 텍스트로 유지됩니다.

크기: SizeProvider size="small" 포털까지 포함해 구성 전체의 크기를 바꿉니다. 기본 크기는 Default입니다. 크기 안내 및 비교

구성

labeled ScrollArea → pre → code → semantic token spans; inline mode returns only code

키보드와 접근성

소스는 기본 텍스트 선택과 복사를 유지합니다. ScrollArea에서 가로로 스크롤됩니다. wrap을 설정하면 소스를 바꾸지 않고 시각적으로 줄을 끊습니다. 색은 두 테마 모두에서 최소 4.5:1을 충족하고 강제 색 모드에서는 시스템 텍스트 색을 사용합니다.

각 컨트롤에 목적을 설명하는 이름을 지정하세요. 오류 메시지를 해당 컨트롤에 연결하고, 상태를 색만으로 알리지 마세요. 자동 검사는 수동 키보드 및 보조 기술 테스트를 대신하지 않습니다.

예시 코드

공유 컴포넌트는 디자인 토큰에서 스타일을 가져옵니다. 각 예시는 자체 구성과 접근성 속성을 설정합니다. 호출하는 화면이 콜백, ref, 제품 데이터를 정의합니다.

// Highlighting needs shiki: npm install shiki
import { SyntaxHighlighter, CodeBlock } from '@surflane/ui'
import { SyntaxHighlighting } from '@surflane/ui/syntax-highlighting'

<SyntaxHighlighting>
  <SyntaxHighlighter code={source} language='tsx' label='Source preview' />
  <CodeBlock code={source} language='tsx' label='Copyable example' />
</SyntaxHighlighting>

주요 API

표는 공통 래퍼의 주요 props를 나열합니다. 전체 타입은 패키지 타입 선언을 참조하세요.

관련 토큰