CodeHighlight 设计文档
代码语法高亮:底层用 prismjs(严格对齐 Semi Design),DOM = div.cd-code-highlight(cd-light-scrollbar)[.cd-code-highlight-defaultTheme] > pre > code(根 class 顺序对齐 Semi:外部 class 在前);给 <code> 元素加 language-<lang> class 后 Prism.highlightElement 就地高亮,仅写纯文本节点规避 XSS(不用 {@html} 拼未处理内容)。支持 lineNumber 行号、defaultTheme 内置配色开关(Semi 固定 dabblet 配色,写死色值 + 色板阶梯,非 token 驱动、不随明暗自适应,与 Semi 一致)。语言包按需由使用方 import "prismjs/components/prism-<lang>.js"。根节点无 role/aria-label/tabindex(Semi 源码无此增强,严格对齐不加)。无组件级 token(对齐 Semi 空 variables.scss)。
← API 文档使用建议
代码语法高亮:底层用 prismjs(严格对齐 Semi Design),DOM = div.cd-code-highlight(cd-light-scrollbar)[.cd-code-highlight-defaultTheme] > pre > code(根 class 顺序对齐 Semi:外部 class 在前);给 <code> 元素加 language-<lang> class 后 Prism.highlightElement 就地高亮,仅写纯文本节点规避 XSS(不用 {@html} 拼未处理内容)。支持 lineNumber 行号、defaultTheme 内置配色开关(Semi 固定 dabblet 配色,写死色值 + 色板阶梯,非 token 驱动、不随明暗自适应,与 Semi 一致)。语言包按需由使用方 import "prismjs/components/prism-<lang>.js"。根节点无 role/aria-label/tabindex(Semi 源码无此增强,严格对齐不加)。无组件级 token(对齐 Semi 空 variables.scss)。
Accessibility
- 严格对齐 Semi:根节点无 role/aria-label/tabindex,无交互控件、不夺焦、不锁滚。
设计变量
该组件暂无专属设计变量。