ドキュメント

コードウィンドウ

読みやすいソース、安定したタブ、ネイティブのコピー操作。

完全なソース

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

使用箇所：テーマのガイド.

使い方とインターフェース

共通のコードウィンドウは、ソース、タブ名、コピー結果をまとめて表示します。矢印キーでタブを切り替えられ、選択中の表示は幅を安定させます。

バーは、ソース切り替え用のタブ、実際のファイルパス、変更前後の2つのラベルなど、情報を持つ場合だけ表示します。ブロックを言語名（HTML、CSS、TypeScript）やツール名（Terminal、prompt）で名付けないでください。単独のブロックはバーを付けず、隅のコピー操作だけを残します。

コピーは処理中の状態を示し、クリップボードへの書き込みが完了してから成功を通知します。処理中に再度操作してもリクエストは1つです。書き込み中にタブを切り替えても、通知にはコピーしたソース名を示します。書き込みが拒否された場合もソースは選択でき、手動でコピーする方法を説明します。

#コードブロック

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