工具示例

长标识符应使用易读的选项列表；说明工具时，则使用附标签的源代码／结果组合。这些 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 区域内。内容导出适配器也须保留完整文字。

排序、规范形式、冲突与诊断变体请参阅代码检查；补全、悬停信息与格式化输出则请参阅语言服务。