文档

代码窗口

清晰易读的源代码、稳定的标签页与原生复制操作。

完整源代码

<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>

@theme {  --color-brand: var(--color-text-link);  --spacing-card: 1.5rem;  --radius-card: .75rem;}

跨语言共用配色

关键字、名称、属性与值在明暗模式中保持相同视觉角色，注释则保持低调易读。

// 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>  )}

{  "name": "Collection",  "featured": true,  "limit": 12,  "tags": ["design", "development"],  "cursor": null}

# Build and preview the projectpnpm run buildpnpm run preview -- --host "localhost"

flex gap-md p-lgfg-text-strong bg-surface-raisedfg-text-blue:hover@smpadding:1rem (width:calc(100%-2rem))

使用于主题指南.

用法与接口

共用代码窗口将源代码、标签页名称与复制反馈放在一起。可用方向键切换标签页，选中的内容区保持稳定宽度。

只有需要传达信息时才显示标题栏，例如切换源代码的标签页、真实文件路径，或前后比较的两个标签。不要用语言（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";

#行内代码

js -> const foo = 'bar'
ts -> const options: Options = {}
css -> body { background: red; }
mcss -> (text-align:center)
无标签 -> collection.html

#纯文本

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>