工具範例

長識別字應使用易讀的選項清單；說明工具時，則使用附標籤的來源／結果組合。這些 fixtures 用來示範呈現狀態；經 lint 與語言服務輸出驗證的範例，仍由產品 Guide 維護。

showDescriptions

預設值 true

Keep the explanation beside each entry.

headingLevel

預設值 3

Choose a heading level that fits the document.

caption

Describe what the reader should notice.

<button>Save</button>

<button type="button">Save</button>

.card { width: red; }

<div class="flex"></div>

.flex { display: flex; }

DocumentOptions 將各識別字放在選填的預設值與說明上方。元件使用原生定義清單語意；長名稱與值會換行，不會將文字擠進狹窄的表格儲存格。直接在 MDX 撰寫內容時，可組合 DocumentOptionList 與 DocumentOptionEntry，讓段落、連結與行內程式碼保留在可攜文件中。

<DocumentOptionList label="Component interfaces">  <DocumentOptionEntry name="DemoSurface">    **Interface:** `elevation`, native div props.    A bordered surface with no implicit layout or padding. Elevation is opt-in.  </DocumentOptionEntry></DocumentOptionList>

這些文件清單應放在測量主體之外。每個項目包含一個術語及其說明；獨立的介面細節與版面限制則使用一般段落。

<DocumentOptions label="Feature settings" options={[  {    name: 'masterCSS.suggestSyntax',    defaultValue: 'true',    description: 'Offer contextual completion items.'  }]} />

DocumentCodeExample 重用共用語法上色。僅有來源的範例可顯示錯誤或警告；成對範例的來源與結果可使用不同語言。每個區塊都有可透過鍵盤操作的複製按鈕與剪貼簿回饋，無法複製時仍可閱讀。

<DocumentCodeExample  title="A stable class order"  language="mcss"  source="p-md flex"  result="flex p-md"  sourceLabel="Before sorting"  resultLabel="After sorting"/>

請使用完整、經驗證的字串。程式碼保留空白，並可在自己的區塊內捲動；選項說明則隨寬度自然換行。兩種元件都不應放在 CSS 教學中需要測量的 flex 或 grid 區域內。內容匯出轉接器也須保留完整文字。

排序、標準形式、衝突與診斷變體請參閱程式碼檢查；補全、懸停資訊與格式化輸出則請參閱語言服務。