#代码高亮器

呈现已经由可信渲染器处理的代码，并支持聚焦、横向滚动与局部标记。

const status = 
"就绪";render(status);

npm install @a3s-lab/ui@0.4.1

<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";
import "@a3s-lab/ui/all";

#用法

<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>

可信渲染器可以通过 data-code-token 标记 keyword、string、type、comment、heading 与 punctuation。高亮器只呈现这些语义类别，不解析也不执行源码。

#契约

| 接口 | 值 | | ------------ | --------------------------- | ------ | ---- | ------- | ------- | ------------- | | 根选择器 | .highlighter | | 原生根元素 | <pre> | | 可选语法部件 | data-code-token="keyword"、string、type、comment、heading 或 punctuation | | 状态 | ready, loading, error | | 事件 | — | | 方法 | — |

#产品边界

组件不执行代码、不推断语言，也不接收未经净化的 HTML。语法标记和安全边界属于宿主渲染器。

组件只发布可复用的交互边界。数据获取、持久化、权限、可信内容与业务实体继续由宿主产品拥有。

#可访问性

代码方向固定从左到右，颜色具有足够对比度，局部强调同时使用背景或结构而非只改变文字颜色。