API reference
The headless codeblock primitive is intentionally small. It only marks the major structural regions so you can build your own shell without coupling styles to wrapper internals.
Slot directives
Apply the primitives to the major regions of your authored shell. The directives only attach stable data-slot attributes.
Primitive structure
html
<section tngCodeBlock>
<header tngCodeBlockHeader>...</header>
<div tngCodeBlockBody>
<ol tngCodeBlockGutter aria-hidden="true"></ol>
<pre><code tngCodeBlockCode>...</code></pre>
</div>
</section>
Slot contract
These are the only selectors the primitive adds for you. Everything else in the shell is owner-authored markup.
| Directive | Host | Slot value | Use |
|---|---|---|---|
tngCodeBlock | Root container | code-block | Overall shell background, border, radius, and layout. |
tngCodeBlockHeader | Header region | code-block-header | Top bar for title, language badges, and owner-authored actions. |
tngCodeBlockBody | Body wrapper | code-block-body | Main layout region for gutter and code content. |
tngCodeBlockGutter | Line-number list | code-block-gutter | Optional gutter region when you render your own line numbers. |
tngCodeBlockCode | <code> element | code-block-code | Code typography, token coloring, and line treatment surface. |
Stable primitive selectors
css
[data-slot="code-block"]
[data-slot="code-block-header"]
[data-slot="code-block-body"]
[data-slot="code-block-gutter"]
[data-slot="code-block-code"]
Owner-managed behavior
- Token markup and syntax-color classes are authored by you or your chosen renderer.
- Copy buttons, keyboard shortcuts, and clipboard feedback are not part of the primitive.
- Line-number content, highlighted ranges, and dimmed lines are all owner-managed presentation.
- The primitive does not inject a highlighting adapter or render HTML for you.