CodeHighlight
代码语法高亮：底层用 prismjs（对齐 Semi Design），给 <code> 元素加 language-<lang> class 后 Prism.highlightElement 就地高亮，仅写纯文本节点规避 XSS（不用 {@html} 拼未处理内容）。支持 lineNumber 行号、defaultTheme 内置 token 驱动配色开关。语言包按需由使用方 import "prismjs/components/prism-<lang>.js"。长代码块可滚动、可键盘聚焦，role=region + i18n aria-label。
如何引入
import { CodeHighlight } from '@chenzy-design/svelte';基础用法
传入 code 与 language，基于 prismjs 输出语法高亮。
多语言
通过 language 指定语言，prismjs 内置常见语言，其余按需引入。
行号
lineNumber 控制是否显示行号（默认开启）。
API 参考
CodeHighlight
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
code | 源码文本；作为 textContent 写入，不解析 HTML | string | '' |
language | Prism 语言 id（js/ts/css/markup…）；非内置语言需使用方先 import 对应 prismjs 语言包 | string | 'markup' |
lineNumber | 显示行号（Prism line-numbers 插件） | boolean | true |
defaultTheme | true 套用内置 token 驱动配色；false 仅结构，配色交给使用方 | boolean | true |
class | 根 <pre> 附加类名 | string | '' |
style | 根 <pre> 内联样式 | string | '' |
Accessibility
- 根 <pre> 为 role=region 命名的滚动区（aria-label 走 i18n CodeHighlight.codeBlock），tabindex=0 让长代码块可键盘滚动聚焦（WCAG 2.1.1）；无交互控件、不夺焦、不锁滚。
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-code-highlight-bg | var(--cd-color-fill-0) | 代码块背景色 |
--cd-code-highlight-color | var(--cd-color-text-0) | 普通字符/无 token 文本色 |
--cd-code-highlight-linenumber-border | var(--cd-color-border) | 行号列右侧分隔线 |
--cd-code-highlight-linenumber-color | var(--cd-color-text-3) | 行号数字颜色 |
--cd-code-highlight-token-comment | var(--cd-color-text-2) | comment/prolog/doctype/cdata |
--cd-code-highlight-token-function | var(--cd-color-secondary) | function/class-name |
--cd-code-highlight-token-keyword | var(--cd-color-primary) | keyword/atrule/attr-value |
--cd-code-highlight-token-number | var(--cd-color-warning) | number/boolean/tag/property/constant/symbol |
--cd-code-highlight-token-operator | var(--cd-color-text-1) | operator/entity/url |
--cd-code-highlight-token-punctuation | var(--cd-color-text-1) | punctuation |