代码块
@astryxdesign/core v0.7.1 · CodeBlock
CodeBlock 和 SyntaxTheme 从 @astryx-vue/core/Code 导出。行内 Code、分词器和复制辅助函数写在 Code 页面。
CodeBlock 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
code | string | — | 只读代码。复制按钮写下的就是这个字符串。 |
language | string | 'plaintext' | 分词用的语言。plaintext 不显示语言名。 |
syntaxTheme | SyntaxThemeDefinition | — | 这一块的语法颜色。相当于在外面套一层 SyntaxTheme。 |
title | string | — | 顶栏里的文件名或标签。 |
hasLanguageLabel | boolean | true | 顶栏是否显示语言名。 |
hasLineNumbers | boolean | false | 是否画行号槽。 |
highlightLines | number[] | — | 要强调的行，从 1 开始。和差异行叠在一起时，高亮盖住差异底色。 |
isDiff | boolean | false | 按 unified diff 给整行上色，符号后面的文本仍按 language 高亮。复制内容不变。 |
hasCopyButton | boolean | true | 是否显示复制按钮。 |
isWrapped | boolean | false | 长行是换行，还是横向滚动。 |
maxHeight | number | string | — | 正文开始滚动前的最大高度。数字按像素计。 |
isCollapsible | boolean | false | 行数达到阈值后，顶栏是否可以收起正文。 |
collapsibleThreshold | number | 10 | 出现收起控件所需的行数。 |
size | 'sm' | 'md' | 'md' | 字号。 |
width | string | 'fit-content' | CSS 宽度。100% 铺满父级。 |
container | 'card' | 'section' | 'card' | section 去掉边框、圆角和背景。 |
tokenizer | (code, language) => SyntaxToken[] | — | 自定义分词器。token 用绝对偏移，不替换被复制的文本。 |
highlightMode | 'auto' | 'ranges' | 'spans' | 'auto' | token 的绘制方式。 |
copyLabel | string | 'Copy code' | 复制前，复制控件的无障碍名称。 |
copiedLabel | string | 'Copied' | 复制成功后的名称和播报。 |
codeLabel | string | 'Code' | 代码视口的无障碍名称。 |
CodeBlock 事件
copy：代码字符串写入剪贴板之后发出。
SyntaxTheme
| 属性 | 类型 | 说明 |
|---|---|---|
theme | SyntaxThemeDefinition | 内置预设，或 defineSyntaxTheme() 的结果。[浅色, 深色] 会存成 light-dark()。组件页见 语法主题。 |
默认插槽是要吃到这些颜色的内容，通常是一个或多个 CodeBlock。
githubDark 写入 --astryx-code-syntax-* 和 --astryx-code-block-background。背景偏暗时，还会把 --astryx-code-block-border 设为 12% 不透明度的白色。差异色是同一组名字里的可选项：added、removed、diff-header、added-marker、removed-marker。语法主题没写它们时，标记跟着标点色，差异头不再另铺底色，新增和删除的底色仍用页面主题的那两个槽。