Contentstable

Code

Inline code, keyboard keys, and always-dark code blocks with gate-checked syntax colors that also style Prism and highlight.js output.

Examples

Inline code and keys

Run npm run build:system, then press Ctrl + R to reload.

HTML for “Inline code and keys”

<p class="type-body">Run <code class="mp-code">npm run build:system</code>, then press <kbd class="mp-kbd">Ctrl</kbd> + <kbd class="mp-kbd">R</kbd> to reload.</p>

Code block

/* Consume the semantic tier */
.cta {
  background: var(--color-action-primary);
  min-height: 44px;
}

HTML for “Code block”

<figure class="mp-code-block">
  <figcaption class="mp-code-block__header"><span>button.css</span><span>CSS</span></figcaption>
  <pre tabindex="0"><code><span class="mp-syntax-comment">/* Consume the semantic tier */</span>
<span class="mp-syntax-keyword">.cta</span> {
  <span class="mp-syntax-function">background</span>: var(<span class="mp-syntax-string">--color-action-primary</span>);
  <span class="mp-syntax-function">min-height</span>: <span class="mp-syntax-number">44</span>px;
}</code></pre>
</figure>

Guidance

The technical-craft register. Code blocks are always dark, even on light pages; every syntax color is checked at ≥4.5:1 on --code-bg. Syntax classes are provided in three spellings — .mp-syntax-*, Prism's .token.* and highlight.js's .hljs-* — so you can drop in highlighter output unchanged.

Accessibility

Scrollable <pre> gets tabindex="0" so keyboard users can scroll it; the focus ring is drawn on the block.
Use <figure> + <figcaption> for the file name so it's announced with the code.
<kbd> for keys the user presses, <code> for literal code — screen readers can distinguish them.

API

Code classes
Class	Kind
`.mp-code`	root
`.mp-kbd`	root
`.mp-code-block`	root
`.mp-syntax-keyword`	root
`.mp-syntax-string`	root
`.mp-syntax-function`	root
`.mp-syntax-number`	root
`.mp-syntax-comment`	root
`.mp-code-block__header`	part of `.mp-code-block`

States styled: :focus-visible. Set the native attribute or ARIA state; there are no state classes.

No component tokens: Code reads the semantic tokens directly.

Design tokens consumed: --border-width-medium --border-width-thin --code-bg --code-border --code-comment --code-function --code-keyword --code-number --code-string --code-text --color-bg-secondary --color-bg-tertiary --color-border-emphasis --color-text-primary --elevation-raised --focus-ring --focus-ring-offset --font-mono --leading-code --leading-small --radius-md --radius-sm --space-3 --space-4 --space-5 --space-6 --text-code --text-xs

Source

README on GitHub CSS on GitHub Manifest (JSON)