文件

程式碼視窗

清楚易讀的原始碼、穩定的分頁與原生複製操作。

完整原始碼

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