탐색
문서

코드 창

읽기 쉬운 소스, 안정적인 탭, 네이티브 복사 동작입니다.

전체 소스

<article class="p-card r-card b(1) b-solid b-line-divider bg-surface-raised fg-text-body">  <p class="m(0) font-mono text-xs fg-brand">FIELD NOTES / 024</p>  <h2 class="mt-sm mb-xs text-xl font-medium fg-text-strong">Room for the details</h2>  <p class="m(0) text-sm">Color, spacing and radius come from three shared project tokens.</p></article>

언어 간 공유 팔레트

키워드, 이름, 속성, 값은 밝고 어두운 모드에서 같은 시각 역할을 유지하며 주석은 조용하고 읽기 쉽게 표시합니다.

// A small, reusable componenttype CardProps = { title: string; featured?: boolean }export function Card({ title, featured = false }: CardProps) {  const count = 3  return (    <article className="p-lg r-lg bg-surface-raised">      <h2>{title}</h2>      <p data-featured={featured}>{count} new ideas</p>    </article>  )}

사용 위치: 테마 가이드.

사용법과 인터페이스

공유 코드 창은 소스 텍스트, 탭 이름, 복사 피드백을 함께 표시합니다. 방향 키로 탭을 전환하며 선택된 영역은 안정적인 너비를 유지합니다.

막대는 소스를 전환하는 탭, 실제 파일 경로, 변경 전후의 두 레이블처럼 정보를 전달할 때만 표시합니다. 블록 이름을 언어(HTML, CSS, TypeScript)나 도구(Terminal, prompt)로 붙이지 마세요. 단일 블록은 막대 없이 모서리 복사 동작만 유지합니다.

복사는 처리 중 상태를 표시하고 클립보드 쓰기가 끝난 뒤 성공을 알립니다. 처리 중 동작을 반복해도 요청은 하나로 유지됩니다. 쓰기 중에 탭을 바꿔도 확인 메시지는 복사한 소스 이름을 표시합니다. 쓰기가 거부되면 소스를 선택할 수 있게 유지하고 수동 복사 방법을 설명합니다.

#코드 블록

<!-- A readable card in either appearance --><article class="p-lg r-lg bg-surface-raised">  <h2 class="text-2xl fg-text-strong">A place for ideas</h2>  <a class="fg-text-blue:hover@sm" href="https://rc.css.master.co/guide">Explore the guide</a></article>

#CSS와 Master CSS 지시문

/* Shared tokens and native CSS use the same palette. */@theme {  --font-family-sans: "Inter";  --color-brand: #3764a5;  --spacing-card: 1.5rem;  --radius-card: 0.75rem;  --color-surface-card: light-dark(    var(--color-zinc-0),     var(--color-zinc-95)   );}@utility card {  padding: var(--spacing-card);  color: var(--color-brand);}.card:hover {  opacity: 0.85;  transform: translateY(-2px);}@safelist "p-lg fg-text-blue:hover@sm";

#인라인 코드

#일반 텍스트

app/  globals.css  components/    Card.tsx

#추가·삭제된 코드 줄

console.log('hewwo') console.log('hello') console.log('goodbye')

#코드 줄 강조

console.log('hewwo')console.log('hello') console.log('goodbye')

#코드 줄 포커스

console.log('hewwo')console.log('hello') console.log('goodbye')

#코드 단어 표시

const foo = 'bar'

#경고와 오류 표시

<p class="(font-size:12px)">Review the text size.</p>
<p class="unknown-utility">Check the class name.</p>