深入解析antfu/shikiji代码高亮库的安装与使用指南-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00669/article/details/148992972

深入解析antfu/shikiji代码高亮库的安装与使用指南

前言

antfu/shikiji是一款现代化的代码语法高亮工具，它是基于shiki的改进版本。作为开发者，我们经常需要在网页或文档中展示代码片段，良好的语法高亮不仅能提升可读性，还能增强用户体验。本文将全面介绍shikiji的安装方法和核心使用技巧。

安装方式

shikiji支持多种包管理工具安装，开发者可以根据项目需求选择合适的安装方式：

# 使用npm安装
npm install -D shikiji

# 使用yarn安装
yarn add -D shikiji

# 使用pnpm安装
pnpm add -D shikiji

# 使用bun安装
bun add -D shikiji

安装时建议作为开发依赖(-D)添加，因为通常代码高亮功能是在构建阶段完成的。

核心使用方法

基础用法

shikiji的基本API设计与shiki类似，但做了一些优化和改进。最显著的变化是它不再自动加载任何主题或语言，需要开发者显式指定：

import { getHighlighter } from 'shikiji'

// 初始化时必须明确指定需要加载的主题和语言
const highlighter = await getHighlighter({
  themes: ['nord'],       // 指定主题
  langs: ['javascript']   // 指定语言
})

// 后续可以动态加载更多主题和语言
await highlighter.loadTheme('vitesse-light')
await highlighter.loadLanguage('css')

// 使用高亮器转换代码
const html = highlighter.codeToHtml('const a = 1', {
  lang: 'javascript',
  theme: 'vitesse-light'
})

这种设计使得包体积更小，加载更高效，因为只会加载实际使用的语言和主题。

按需加载策略

shikiji采用了智能的代码分割策略，所有主题和语言都以异步模块的形式提供。这意味着：

初始包体积更小
只有实际使用的语言和主题会被加载
构建工具会自动进行代码分割

高级配置选项

对于需要更精细控制的项目，shikiji提供了核心模块，允许开发者完全自定义打包内容：

import { getHighlighterCore } from 'shikiji/core'
import { getWasmInlined } from 'shikiji/wasm'
import nord from 'shikiji/themes/nord.mjs'

const highlighter = await getHighlighterCore({
  themes: [
    nord,  // 直接导入主题模块
    import('shikiji/themes/material-theme-ocean.mjs') // 动态导入
  ],
  langs: [
    import('shikiji/langs/javascript.mjs'), // 动态导入语言
    async () => customGrammarLoader()       // 自定义语法加载器
  ],
  loadWasm: getWasmInlined
})

这种方式特别适合对包大小有严格要求的项目。

不同环境下的使用

在CommonJS项目中使用

虽然shikiji是ESM模块，但可以在CommonJS项目中通过动态导入使用：

async function highlightCode() {
  const { getHighlighter } = await import('shikiji')
  
  const highlighter = await getHighlighter({
    themes: ['nord'],
    langs: ['javascript'],
  })

  return highlighter.codeToHtml(code, { lang: 'javascript' })
}

浏览器CDN直接使用

无需构建工具，直接在浏览器中使用shikiji：

<script type="module">
  import { codeToHtml } from 'https://esm.run/shikiji@0.8.0'

  document.body.innerHTML = await codeToHtml('console.log("Hello")', {
    lang: 'javascript',
    theme: 'nord'
  })
</script>

CDN使用时会自动按需加载所需资源，非常高效。

边缘计算环境特殊处理

在边缘计算环境中使用时，需要特殊处理WASM模块：

import { getHighlighterCore, loadWasm } from 'shikiji/core'
import wasm from 'shikiji/onig.wasm'

// 预先加载WASM
await loadWasm(obj => WebAssembly.instantiate(wasm, obj))

// 然后正常使用高亮功能