Code
본문, 목록, 밀도 높은 메타데이터 안에서도 읽기 쉬운 인라인 코드 토큰이에요.
핵심 속성
TRCode는 짧은 인라인 기계 판독용 텍스트를 위한 시맨틱 <code> 요소를 렌더링해요. 코드 요소의 네이티브 속성, className, style, ref를 지원하며 주변 글꼴 크기를 상속해요. 독립된 코드 예시에는 Code Block을 사용하세요.
설치
pnpm add @tinyrack/ui긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
스타일
@import '@tinyrack/ui/components/code.css';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
가져오기
import { TRCode } from '@tinyrack/ui/components/code';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
플레이그라운드
내용을 편집해 짧은 명령어, 긴 식별자, 여러 줄 조각을 확인할 수 있어요. 초기화하면 기본 인라인 명령어로 돌아가요.
사용법
예시
콘텐츠 맥락 고유 링크
인라인 코드는 본문, 설정값, 긴 토큰에서도 시맨틱 표현을 유지해요.
API
TRCodeProps는 React의 네이티브 ComponentProps<'code'>를 확장해요. 기본 글꼴 크기는 주변 본문에서 상속돼요. break-spaces와 overflow-wrap: anywhere가 공백을 보존하면서 긴 토큰을 문맥 안에서 줄바꿈해요. 줄 장식은 잘라서 이어지기 때문에 여백과 테두리가 줄마다 붙지 않고 줄바꿈된 구간의 처음과 끝에만 놓여요. 덕분에 코드가 컨테이너를 벗어나지 않아요.
| CSS 토큰 | 기본값 | 용도 |
|---|---|---|
--tr-code-background | --tinyrack-surface-muted | 인라인 코드 배경 |
--tr-code-border | --tinyrack-border | 장식 테두리 색상 |
--tr-code-border-width | --tinyrack-border-width-default | 테두리 두께 |
--tr-code-color | --tinyrack-text | 코드 텍스트 색상 |
--tr-code-font-family | --tinyrack-font-mono | 코드 서체 |
--tr-code-font-size | inherit | 주변 텍스트 크기 |
--tr-code-line-height | --tinyrack-leading-sm | 여러 줄 리듬 |
--tr-code-radius | --tinyrack-radius-sm | 모서리 반경 |
--tr-code-padding-x | --tinyrack-space-xs | 인라인 방향 여백 |
--tr-code-padding-y | --tinyrack-space-3xs | 블록 방향 여백 |