Tooling examples

Use a readable option list for long identifiers, and a labeled source/result pair when explaining a tool. These fixtures demonstrate presentation states. Product guides own the examples verified against their lint and language-service output.

showDescriptions

Default true

Keep the explanation beside each entry.

headingLevel

Default 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 keeps each identifier above its optional default and description. It uses native definition-list semantics; long names and values wrap without shrinking the prose into a narrow table cell. For prose authored directly in MDX, compose DocumentOptionList and DocumentOptionEntry; the paragraphs, links and inline code remain part of the portable document.

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

Keep these document lists outside measured specimens. Each entry owns one term and its description; use ordinary paragraphs for separate interface details and layout constraints.

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

DocumentCodeExample reuses the shared syntax highlighter. Source-only examples may show an error or warning; paired examples can use different source and result languages. Each block has a keyboard-accessible copy button and clipboard feedback. It remains readable when copying is unavailable.

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

Use complete, verified strings. Code keeps its whitespace and may scroll inside its block; the option descriptions remain fluid. Neither component belongs inside a measured CSS lesson's flex or grid geometry. Keep the full text in the content export adapter.

See Code linting for sorting, canonical forms, conflicts and diagnostic variants, and Language service for completion, hover and formatter output.