代码 | astryx-vue

Props

Code

名称	类型	默认值	说明
`color`	`CodeColor`	`'primary'`	行内代码的文字颜色：`primary`、`secondary`，或者 `inherit`（跟随周围文字）。
`size`	`'inherit'`	-	字号。不传时使用代码字阶，传 `inherit` 则跟随周围的字号和行高。

CodeBlock

名称	类型	默认值	说明
`code`	`string`	-	要展示的只读代码。无论代码块怎样着色，复制按钮写入的都是这个原字符串。
`language`	`string`	`'plaintext'`	着色使用的语言。不认识的语言不做着色，`plaintext` 还会隐藏语言标签。
`title`	`string`	-	显示在头部栏的文件名或标签。只给标题也会生成头部。
`hasLanguageLabel`	`boolean`	`true`	是否在头部显示语言名。语言为 `plaintext` 时始终不显示。
`hasLineNumbers`	`boolean`	`false`	是否显示行号栏。行号栏宽度按最大行号计算。
`highlightLines`	`number[]`	-	要从 1 开始高亮的行号，这些行会加上底色。超出范围的行号没有效果。
`hasCopyButton`	`boolean`	`true`	是否显示复制按钮。有头部时放在头部，没有头部时浮在右上角。
`isWrapped`	`boolean`	`false`	长行是否折行，而不是横向滚动。
`maxHeight`	`number \| string`	-	超过这个高度后代码正文纵向滚动。数字按像素处理，所以 `0` 是合法的零像素高度。
`isCollapsible`	`boolean`	`false`	是否可以从头部折叠正文。只有头部可见并且行数达到 `collapsibleThreshold` 时才会出现折叠控件。
`collapsibleThreshold`	`number`	`10`	出现折叠控件所需的行数。
`size`	`'sm' \| 'md'`	`'md'`	文字大小。`md` 使用代码字阶，`sm` 使用辅助文字字号。
`width`	`string`	`'fit-content'`	任意 CSS 宽度取值。`fit-content` 贴着最长一行（带一个最小宽度下限，短代码也仍然像一块代码），`100%` 撑满父容器。
`container`	`'card' \| 'section'`	`'card'`	容器样式。`card` 带边框、圆角和背景；`section` 三者都去掉，让代码块融入所在的表面。
`tokenizer`	`(code: string, language: string) => SyntaxToken[]`	-	内置分词器不覆盖的语言可以用它自定义。token 使用绝对偏移。它只影响着色，不会改变显示或复制的文本。
`highlightMode`	`'auto' \| 'ranges' \| 'spans'`	`'auto'`	语法着色的实现方式。`auto` 优先使用 CSS Custom Highlight API，不支持时回退到 span 元素。
`copyLabel`	`string`	`'Copy code'`	复制前复制按钮的无障碍名称和悬停提示。
`copiedLabel`	`string`	`'Copied'`	复制成功后复制按钮的名称，以及礼貌播报的文本。
`codeLabel`	`string`	`'Code'`	代码视口的无障碍名称；当可折叠的头部没有可见标题和语言标签时，也用它作为头部的名称。

事件

名称	载荷	说明
`copy`	-	代码字符串写入剪贴板之后触发。写入失败时不触发。

插槽

名称	说明
`default`	`Code` 的行内代码内容。`CodeBlock` 的内容来自 `code` 属性，不渲染插槽。

导出

除两个组件外，这些也从 @astryx-vue/core/Code 导出：

名称	签名	说明
`tokenize`	`(code, language) => TokenLine[]`	把字符串分词成每行一组 token，偏移相对行首。语言不认识时返回空数组。
`tokenizeAsync`	`(code, language, signal?) => Promise<TokenLine[]>`	结果相同，但会在分块之间让出主线程。signal 被中止时返回已经处理完的行。
`flatTokensToLines`	`(tokens, code) => TokenLine[]`	把自定义分词器返回的绝对偏移 token 转换成相对行首的 token。
`applyHighlightRanges`	`(element, tokenLines) => () => void`	用 CSS Custom Highlight API 着色，返回清理函数。
`useCopyToClipboard`	`(options?) => { copy, isCopied }`	复制到剪贴板的行为，附带一个短暂的“已复制”状态。重复复制会重新开始计时，默认两秒。
`SYNC_TOKENIZE_THRESHOLD`	`number`	低于这个长度的代码同步分词，更长的代码分块处理。
`HIGHLIGHTED_TOKEN_TYPES`	`readonly string[]`	样式表已经着色的 token 类型，自定义分词器可以直接复用。

主题变量

代码块读取以下 token，neutral 主题已经给出默认值：

名称	说明
`--astryx-font-family-code`	行内代码、代码块和头部的等宽字体栈。
`--astryx-text-code-size`	行内代码和 `md` 代码块的字号。
`--astryx-code-background`	行内代码的背景色。
`--astryx-code-block-background`	代码块和吸顶头部的背景色。`section` 容器会把它设成透明。
`--astryx-code-block-border`	`card` 容器的边框、头部下边框和行号分界线的颜色。
`--astryx-code-block-focus`	可折叠头部控件的焦点环颜色。
`--astryx-code-block-highlight-background`	`highlightLines` 中列出的行的背景色。
`--astryx-code-syntax-*`	语法着色：keyword、string、comment、number、function、type、variable、operator、constant、tag、attribute、property、punctuation。

原生属性

Code 的根元素是 <code>，CodeBlock 的根元素是 <pre>。

以下内容传入根元素：

HTML 属性。
aria-* 属性。
data-* 属性。
class。
style。

class 和 style 会与组件自身的合并，style 里的 width 优先于 width 属性。复制按钮、代码视口和折叠区域是内部元素，各自有自己的无障碍名称，不通过根元素设置。