Skip to content

@shikijs/rehype

NPM versionNPM downloadsGitHub

适用于 rehype 的 Shiki 插件。

安装

bash
npm i -D @shikijs/rehype

使用方法

ts
import { 
unified
} from 'unified'
import
remarkParse
from 'remark-parse'
import
remarkRehype
from 'remark-rehype'
import
rehypeStringify
from 'rehype-stringify'
import
rehypeShiki
from '@shikijs/rehype'
const
file
= await
unified
()
.use(
remarkParse
)
.use(
remarkRehype
)
.use(
rehypeShiki
, {
// 也可以是只有单个主题的 `theme` 字段
themes
: {
light
: 'vitesse-light',
dark
: 'vitesse-dark',
} }) .use(
rehypeStringify
)
.process(await fs.readFile('./input.md'))

细粒度捆绑

在默认情况下,会导入完整的 shiki 捆绑包。如果你使用了 细粒度捆绑,你可以从 @shikijs/rehype/core 中导入 rehypeShikiFromHighlighter 并传入你自己的高亮器:

ts
import { 
unified
} from 'unified'
import
remarkParse
from 'remark-parse'
import
remarkRehype
from 'remark-rehype'
import
rehypeStringify
from 'rehype-stringify'
import
rehypeShikiFromHighlighter
from '@shikijs/rehype/core'
import {
getHighlighterCore
} from 'shiki/core'
import
getWasm
from 'shiki/wasm'
const
highlighter
= await
getHighlighterCore
({
themes
: [
import('shiki/themes/vitesse-light.mjs') ],
langs
: [
import('shiki/langs/javascript.mjs'), ],
loadWasm
:
getWasm
}) const
raw
= await fs.readFile('./input.md')
const
file
= await
unified
()
.use(
remarkParse
)
.use(
remarkRehype
)
.use(
rehypeShikiFromHighlighter
,
highlighter
, {
// 也可以是只有单个主题的 `theme` 字段
themes
: {
light
: 'vitesse-light',
dark
: 'vitesse-dark',
} }) .use(
rehypeStringify
)
.processSync(
raw
) // 也可以同步处理

功能

行高亮

警告

已废弃,在 v0.10.0 版本中已被默认禁用,并会在下一个次版本(minor)中移除。应该考虑使用 transformerNotationHighlight

除了支持 shiki 的功能以外,此插件还支持行的高亮。你可以以 {<line-numbers>} 的格式在代码块语言标注后指定你要高亮的行;以逗号分隔行号(<line-number>),并用大括号包裹。每一个行号可以是一个单独的数(如 {2} 会高亮第 2 行, {1,4} 会高亮第 1 行和第 4 行),或者指定一个范围(如 {5-7} 会高亮第 5 到第 7 行,{1-3,5-6} 会高亮第 1 行到第 3 行,及第 5 行到第 6 行)。 例如:

md
```js {1,3-4}
console.log('1') // 高亮
console.log('2')
console.log('3') // 高亮
console.log('4') // 高亮
```

以 MIT 许可证发布