ServerCodeBlock
먼저 보고, 그다음 계약을 읽습니다
shiki 문법 하이라이팅 서버 코드 블록(RSC).
Component intent의도와 경계 읽기
async React Server Component 로, shiki 로 코드를 토큰화해 <pre><code> 안을 .line/토큰 <span> 구조로 채운다. 클라이언트 CodeBlock 과 동일한 `axe-codeblock*` 마크업을 공유하되 Copy 버튼이 없다(clipboard 는 클라이언트 JS 필요). 색은 var(--shiki-*) 로 나오고 실제 값은 code-theme.css 가 디자인 토큰에 매핑해 light/dark 자동 대응. 하이라이터는 모듈 레벨 싱글턴 promise 로 캐시된다. shiki 는 server-only 이므로 "use client" 파일에서 import 금지.
예제
SSOT에 등록된 실제 API 기준 snippet입니다. standalone 배지만 독립 실행 단위이며, fragment는 주변 state·handler 문맥을 생략합니다.
import { ServerCodeBlock } from "@axe/ui/server";// app/**/page.tsx (RSC — await 가능)<ServerCodeBlock language="tsx" title="Button.tsx" code={source}/>import { ServerCodeBlock } from "@axe/ui/server";<ServerCodeBlock code={snippet} />Props
TSX 소스가 진실입니다. 주요 export 컴포넌트의 public API만 노출합니다.
| 이름 | 타입 | 필수 | 기본값 | 설명 |
|---|---|---|---|---|
code | string | 필수 | — | 하이라이팅할 코드 문자열. |
language | string | — | — | grammar 선택 + 헤더 라벨. alias 정규화(ts/typescript, js/javascript, py/python, sh/zsh/shell→bash 등). 미로드 언어는 plain text 로 fallback. 지원: ts, tsx, js, json, bash, html, css, python, rust. |
title | string | — | — | 헤더 라벨(language 보다 우선). |
className | string | — | — | 루트 <div> 에 병합. (rest props 전파 없음 — 명시된 4개 prop 만.) |
.axe-* 클래스 계약
React 밖에서도 같은 표면을 그리는 공개 계약입니다. stable은 minor 버전 안에서 이름을 바꾸지 않습니다.
| 클래스 | 안정성 | 용도 |
|---|---|---|
.axe-codeblock | stable | 블록 루트 <div>(CodeBlock 과 markup parity). |
.axe-codeblock__header | stable | 라벨 헤더 행(title/language 있을 때만). |
.axe-codeblock__lang | stable | title/language 라벨. |
.axe-codeblock__pre | stable | 코드 본문 <pre>. |
접근성
키보드, ARIA, 구현 노트를 함께 검토합니다.
상호작용 요소 없음(정적 표시) — role 불요. Copy 버튼이 없어 키보드 포커스 대상도 없다. 헤더는 title 또는 language 가 있을 때만 렌더돼 빈 헤더가 생기지 않는다.
async 서버 컴포넌트라 클라이언트 트리에서는 동작하지 않는다. code-theme.css 를 앱 globals 에서 wiring 해야 --shiki-* 변수가 채워진다(이 컴포넌트는 import 하지 않음).