捆绑包

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

INFO

如果您正在构建一个 web 应用程序，或者在一个对性能敏感的环境中，使用 细粒度捆绑 来减少捆绑大小和内存使用量总是更好的选择。了解更多关于 最佳性能实践。

捆绑包预设

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

shiki/bundle/full

捆绑包大小：6.4 MB (压缩后)，1.3 MB (gzip)，包含异步块

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

shiki/bundle/web

捆绑包大小：4.2 MB (压缩后)，748 KB (gzip)，包含异步块

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

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

import {
  BundledLanguage,
  BundledTheme,
  codeToHtml,
  createHighlighter
} from 'shiki/bundle/web'

const highlighter = await createHighlighter({
  langs: ['html', 'css', 'js'],
  themes: ['github-dark', 'github-light'],
})

细粒度捆绑

当导入 shiki 时，所有的主题和语言都会作为异步块被捆绑。通常这对你来说不会是问题，因为如果你不使用它们，它们不会被加载。在某些情况下，如果你想控制要捆绑的内容，你可以使用核心并自己组合捆绑包。

// 直接导入主题和语言模块，只有你导入的才会被捆绑。
import nord from '@shikijs/themes/nord'

// `shiki/core` 入口不包含任何主题、语言或 wasm 二进制文件。
import { createHighlighterCore } from 'shiki/core'
import { createOnigurumaEngine } from 'shiki/engine/oniguruma'

const highlighter = await createHighlighterCore({
  themes: [
    // 你需要传入导入的模块，而不是字符串
    nord,
    // 或者动态导入以实现代码分割
    import('@shikijs/themes/material-theme-ocean')
  ],
  langs: [
    import('@shikijs/langs/javascript'),
    // shiki 会尝试与默认导出互操作
    () => import('@shikijs/langs/css'),
    // 或者返回自定义语法的 getter
    async () => JSON.parse(await fs.readFile('my-grammar.json', 'utf-8'))
  ],
  // `shiki/wasm` 包含了以 base64 字符串内嵌的 wasm 二进制。
  engine: createOnigurumaEngine(import('shiki/wasm'))
})

// 可选，创建后加载主题和语言
await highlighter.loadTheme(import('@shikijs/themes/vitesse-light'))

const code = highlighter.codeToHtml('const a = 1', {
  lang: 'javascript',
  theme: 'material-theme-ocean'
})

INFO

简写 只在捆绑包预设中可用。对于细粒度捆绑，你可以使用 createSingletonShorthands 自行创建简写，或者自行移植。