#Highlighter

Presents code already processed by a trusted renderer with keyboard focus, horizontal scrolling, and bounded emphasis.

const status = 
"ready";render(status);

npm install @a3s-lab/ui

<pre class="highlighter" tabindex="0">
  <code><span data-code-line><span data-code-token="keyword">const</span> status = <mark><span data-code-token="string">"ready"</span></mark>;</span><span data-code-line>render(status);</span></code>
</pre>

import "@a3s-lab/ui/a3s.css";

#Usage

<pre class="highlighter" tabindex="0">
  <code><span data-code-line><span data-code-token="keyword">const</span> status = <mark><span data-code-token="string">"ready"</span></mark>;</span><span data-code-line>render(status);</span></code>
</pre>

Trusted renderers may mark keyword, string, type, comment, heading, and punctuation tokens with data-code-token. Highlighter styles those semantic categories but never parses or executes source text.

#Contract

| Surface | Value | | ------------------- | --------------------------- | ------ | ---- | ------- | ------- | ------------- | | Root selector | .highlighter | | Native root | <pre> | | Optional token part | data-code-token="keyword", string, type, comment, heading, or punctuation | | States | ready, loading, error | | Events | — | | Methods | — |

#Product boundary

It never executes code, guesses a language, or accepts unsanitized HTML. Tokenization and the trust boundary belong to the host renderer.

The component publishes a reusable interaction boundary only. Data fetching, persistence, permission, trusted content, and business entities remain host-owned.

#Accessibility

Code remains left-to-right, colors meet contrast requirements, and highlighted regions use structure or background rather than color alone.