转换器

Shiki 使用了 hast，这是一种用于 HTML 的 AST 格式，用来处理结果并生成 HTML。

你可以使用自己的 transformers 修改 hast 树来自定义生成的 HTML；你也可以传递自定义函数来修改不同类型节点的树，例如：

import { codeToHtml } from 'shiki'

const code = await codeToHtml('foo\bar', {
  lang: 'js',
  theme: 'vitesse-light',
  transformers: [
    {
      code(node) {
        this.addClassToHast(node, 'language-js')
      },
      line(node, line) {
        node.properties['data-line'] = line
        if ([1, 3, 4].includes(line))
          this.addClassToHast(node, 'highlight')
      },
      span(node, line, col) {
        node.properties['data-token'] = `token:${line}:${col}`
      },
    },
  ]
})

我们还提供了一些常用的转换器供您使用，详情请参见 @shikijs/transformers 和 @shikijs/colorized-brackets。

转换器钩子

• preprocess - 在代码标签化之前调用，你可以使用它在代码渲染为标签之前进行修改。
• tokens - 在代码标签化之后调用，你可以使用它来修改标签。
• span - 对每个 <span> 标签及每个标记都调用。
• line - 对每行 <span> 标签调用。
• code - 对每个 <code> 标签调用，这将会包裹所有的行。
• pre - 对每个 <pre> 标签调用，并将其包裹在 <code> 标签中。
• root - HAST 树的根，通常情况下只有 <pre> 一个子标签。
• postprocess - 在 HTML 生成后调用，用来修改最终输出，在 codeToHast 中不会被调用。

元

转换器还可以访问受支持的集成中的 Markdown meta 字符串。

```html foo=bar baz-qux="qu ux"

你可以使用以下方式访问原始元信息：

this.options.meta
// => { __raw: 'foo=bar baz-qux="qu ux"' }

强制转换器顺序

为了兼容性或细粒度控制，有时需要强制 Shiki 转换器的顺序。你可以通过 enforce 修饰符控制转换器的位置：

• pre：在普通转换器之前调用
• 默认：作为普通转换器调用
• post：在普通转换器之后调用

示例：

import type { ShikiTransformer } from 'shiki'

const customTransformer: ShikiTransformer = {
  name: 'my-transformer',
  enforce: 'pre',
  code(node) {
    // ...
  },
}