Skip to content

转换器

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

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

ts
import {  } from 'shiki'

const  = await ('foo\bar', {
  : 'js',
  : 'vitesse-light',
  : [
    {
      () {
        this.(, 'language-js')
      },
      (, ) {
        .['data-line'] = 
        if ([1, 3, 4].())
          this.(, 'highlight')
      },
      (, , ) {
        .['data-token'] = `token:${}:${}`
      },
    },
  ]
})

我们也提供了一些常用的转换器供你使用,查看 shiki-transforms 了解更多。

转换器钩子

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

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

markdown
```html meta=here

You can access the raw meta using:

ts
options.meta
// => { meta: 'here', __raw: 'meta=here' }