Styling contract
Headless codeblock styling starts with the primitive slot selectors. After that, token classes and line emphasis are part of your authored presentation layer.
Primitive slots
The primitive only guarantees five structural selectors. Use them as the stable contract for your shell and avoid targeting ad-hoc wrapper markup.
Primitive slots
css
[data-slot="code-block"] {
border-radius: 0.85rem;
overflow: hidden;
}
[data-slot="code-block-header"] {
display: flex;
justify-content: space-between;
}
[data-slot="code-block-body"] {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
}
[data-slot="code-block-code"] {
font-family: 'IBM Plex Mono', 'Fira Code', monospace;
}
CSS starter
A practical headless shell usually layers your own block class on top of the primitive slots so token lines and owner-authored buttons stay easy to reason about.
Starter shell CSS
css
.docs-codeblock[data-slot="code-block"] {
background: var(--tng-semantic-background-base);
border: 1px solid var(--tng-semantic-border-subtle);
}
.docs-codeblock [data-slot="code-block-gutter"] {
background: color-mix(in srgb, var(--tng-semantic-background-surface) 82%, transparent);
color: var(--tng-semantic-foreground-muted);
min-width: 3rem;
}
.docs-codeblock__line {
display: block;
line-height: 1.6;
white-space: pre;
}
Token guidance
Highlighted ranges, dimmed lines, and token colors are not built into the primitive. Define them in your own line and token classes so the rendering pipeline stays under your control.
Line and token treatment
css
.docs-codeblock__line--highlight {
background: color-mix(in srgb, var(--tng-semantic-accent-brand) 14%, transparent);
border-radius: 0.35rem;
padding-inline: 0.25rem;
}
.docs-codeblock__line--dim {
opacity: 0.55;
}
.docs-codeblock__token--keyword { color: #c084fc; }
.docs-codeblock__token--string { color: #34d399; }
.docs-codeblock__token--variable { color: #38bdf8; }