代码装饰

我们提供了一个装饰代码的 API，用来将渲染后指定位置的代码元素包裹在自定义类或前缀中。

import {  } from 'shiki'

const  = `
const x = 10
console.log(x)
`.()

const  = await (, {
  : 'vitesse-light',
  : 'ts',
  : [ 
    {
      // line 和 character 都是从 0 开始索引的
      : { : 1, : 0 },
      : { : 1, : 11 },
      : { : 'highlighted-word' }
    }
  ]
})

渲染的结果是 (已使用 CSS 样式化)：

const x = 10
console.log(x)

你也可以用代码相对偏移位置 (以 0 作为索引) 来指定位置：

const  = await (, {
  : 'vitesse-light',
  : 'ts',
  : [ 
    {
      : 21,
      : 24,
      : { : 'highlighted-word' }
    }
  ]
})

这会渲染出：

const x = 10
console.log(x)

在转换器中使用代码装饰

对于一些高级的用例，你可以使用转换器 API 来完全控制标签和 HAST 树。

如果你想在转换器中添加代码装饰，你可以使用以下的方法：

import { , ShikiTransformer } from 'shiki'

const : ShikiTransformer = {
  : 'my-transformer',
  (, ) {
    // 用某种方式生成代码装饰
    const  = ()

    // 确保装饰数组存在
    . ||= []
    // 添加代码装饰
    ..(...)
  }
}

const  = await (, {
  : 'vitesse-light',
  : 'ts',
  : [
    
  ]
})

注意，你只能在 preprocess 钩子添加代码装饰，在往后的钩子中，装饰数组的修改会被忽略。