# 代码 Code

分类：内容 · React：Code / ClipboardText

代码块：轻量高亮、行号、复制按钮。

## 示例
```html
<div class="xxd-code-block" style="max-width:520px">
  <div class="xxd-code__head">sidepanel.js<button class="xxd-btn" data-variant="ghost" data-icon-only data-size="xs" aria-label="复制" data-copy-target="#code-demo code"><i data-xxd-icon="Copy" data-size="14"></i></button></div>
  <pre class="xxd-code" id="code-demo" tabindex="0" data-highlight data-lines><code data-lang="js">// 外观设置存在 chrome.storage
const store = createAppearanceStore({ key: "today-ui" });
await store.load();
Xxd.toast("已保存", { tone: "success" });</code></pre>
</div>
<p>行内代码 <code class="xxd-code-inline">--r-sm</code>，按键 <kbd class="xxd-kbd">⌘</kbd><kbd class="xxd-kbd">K</kbd></p>
```

## 属性与类名
- `data-highlight`：轻量高亮（js / ts / json / css / html / bash，data-lang）
- `data-lines`：行号
- `.xxd-code__head`：文件名 + 复制
- 类名：`xxd-code` `xxd-code-inline` `xxd-kbd` `xxd-copy` `xxd-code-block` `xxd-code__head`

## JS
```js
Xxd.highlight(codeElement, "js")
```

## 键盘与读屏
- 能横向滚动的代码块可以用键盘聚焦（JS 自动补 tabindex="0"），方向键滚动
- 复制按钮有 aria-label；高亮颜色在亮暗两种外观下都 ≥ 4.5:1

## 规则
- 行内代码 12%，代码块 6%