Code

A readable code surface with optional language context, copy action, and overflow controls.

Anatomy

1 .code-root Code block surface and clipping boundary.
2 .code-header Language, filename, and copy-action row.
3 .code-title Language or filename label.
4 .code-content Scrollable Shiki-painted code content; syntax colors remain owned by Shiki.
5 .code-copy-trigger Copy action placement; button appearance comes from the button recipe.
6 .code-overflow-control Expansion control layered over clipped code.

CSS

.button-root {
	color: var(--md-sys-color-on-primary);
}

Default

Use a code surface for readable snippets that people may need to scan, copy, or expand without editing.