Skip to content

捆绑包

主要的 shiki 包入点通过动态导入捆绑了所有支持的主题和语言。大多数情况下,效率应该不成问题,因为语法只有在需要时才会被导入或下载。然而,当你将 shiki 捆绑到浏览器运行时或 Web Worker 中时,即使这些文件没有被导入,它们仍然会增加你的分发大小。我们提供了 细粒度捆绑 以帮助你根据需要逐个组合语言和主题。

捆绑包预设

方便起见,我们还提供了一些预制的捆绑包供你使用。

shiki/bundle/full

捆绑包大小: 6.4 MB (minified),1.3 MB (gzip),包含异步块

shiki 相同,这个捆绑包捆绑了所有的主题和语言。

shiki/bundle/web

捆绑包大小: 4.2 MB (minified),748 KB (gzip),包含异步块

这个捆绑包捆绑了所有的主题和一些常见的 Web 语言(例如 HTML,CSS,JS,TS,JSON 和 Markdown 等)以及一些框架语法(例如 Vue,JSX 和 Svelte 等)的支持。

该捆绑包中可以使用 shiki 的所有功能。

ts
import {
  
BundledLanguage
,
BundledTheme
,
codeToHtml
,
createHighlighter
} from 'shiki/bundle/web' const
highlighter
= await
createHighlighter
({
langs
: ['html', 'css', 'js'],
themes
: ['github-dark', 'github-light'],
})

细粒度捆绑

导入 shiki 时,所有的主题和语言都被捆绑为异步块(async chunks)。通常情况下,如果你不使用它们,你就不必在意,因为它们不会被加载。某些情况下,如果你要控制这些捆绑包的内容,你可以使用核心(shiki/core)来组合自己的捆绑包。

ts
// `shiki/core` 不包含任何主题、语言和 WASM 二进制文件
import { 
createHighlighterCore
} from 'shiki/core'
// `shiki/wasm` 包含以 BASE64 字符串内联的 WASM 二进制文件 import
getWasm
from 'shiki/wasm'
// 直接导入需要的主题和语言模块,只有导入的模块会被捆绑 import
nord
from 'shiki/themes/nord.mjs'
const
highlighter
= await
createHighlighterCore
({
themes
: [
// 传入导入的包,而不是字符串
nord
,
// 如果你需要进行块分割(chunk splitting),请使用动态导入 import('shiki/themes/material-theme-ocean.mjs') ],
langs
: [
import('shiki/langs/javascript.mjs'), // shiki 会尝试使用模块的默认导出 () => import('shiki/langs/css.mjs'), // 或者一个返回自定义语法的 getter async () =>
JSON
.
parse
(await fs.readFile('my-grammar.json', 'utf-8'))
],
loadWasm
:
getWasm
}) // 可选的,在创建后加载主题和语言 await
highlighter
.
loadTheme
(import('shiki/themes/vitesse-light.mjs'))
const
code
=
highlighter
.
codeToHtml
('const a = 1', {
lang
: 'javascript',
theme
: 'material-theme-ocean'
})

注意

简写 只在 shiki 捆绑包中可用。对于细粒度捆绑,你可以使用 createSingletonShorthands 来创建一个简写函数或者尝试自己实现。

以 MIT 许可证发布