Shiki代码高亮工具安装与使用指南

Shiki代码高亮工具安装与使用指南

shiki A beautiful Syntax Highlighter. 项目地址: https://gitcode.com/gh_mirrors/sh/shiki

什么是Shiki

Shiki是一个基于TextMate语法引擎的代码高亮工具，它能够为代码片段提供精准的语法高亮显示。与传统的正则表达式高亮方案不同，Shiki使用与VS Code相同的语法解析引擎，因此能够提供与编辑器一致的高亮效果。

安装Shiki

Shiki可以通过多种包管理器进行安装：

# 使用npm安装
npm install -D shiki

# 使用yarn安装
yarn add -D shiki

# 使用pnpm安装
pnpm add -D shiki

# 使用bun安装
bun add -D shiki

安装完成后，你就可以在项目中使用Shiki来高亮显示代码了。

快速开始

Shiki提供了简单易用的快捷函数，让你能够快速实现代码高亮：

import { codeToHtml } from 'shiki'

async function highlightCode() {
  const code = 'const a = 1' // 需要高亮的代码
  const html = await codeToHtml(code, {
    lang: 'javascript',       // 指定语言
    theme: 'vitesse-dark'    // 指定主题
  })
  
  console.log(html) // 输出高亮后的HTML字符串
}

这段代码会将JavaScript代码const a = 1高亮显示，并生成包含内联样式的HTML字符串。

高级用法

使用高亮器实例

如果你需要同步高亮代码，可以创建一个高亮器实例：

import { createHighlighter } from 'shiki'

async function initHighlighter() {
  const highlighter = await createHighlighter({
    themes: ['nord'],        // 预加载的主题
    langs: ['javascript']    // 预加载的语言
  })

  // 同步高亮代码
  const code = highlighter.codeToHtml('const a = 1', {
    lang: 'javascript',
    theme: 'nord'
  })
  
  return code
}

动态加载主题和语言

你可以在高亮器创建后动态加载额外的主题和语言：

await highlighter.loadTheme('vitesse-light')
await highlighter.loadLanguage('css')

性能优化建议

1. 高亮器实例应长期存在：避免在热函数或循环中重复创建高亮器实例，应该将其作为单例使用。

2. 按需加载：只加载你实际需要的主题和语言，而不是全部加载。

3. 使用快捷函数：在Node.js环境中，推荐使用快捷函数，它们会自动管理高亮器实例和资源加载。

浏览器端使用

在浏览器中，你可以通过CDN直接使用Shiki：

<script type="module">
  import { codeToHtml } from 'https://esm.sh/shiki@3.0.0'

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

特殊环境适配

云服务环境

在某些云服务环境中，需要特殊处理WASM文件：

import { createHighlighterCore, loadWasm } from 'shiki/core'

// 将WASM作为资源导入
await loadWasm(import('shiki/onig.wasm'))

// 然后正常使用高亮器

总结

Shiki是一个功能强大且灵活的代码高亮工具，无论是简单的代码片段高亮，还是复杂的集成需求，它都能提供出色的解决方案。通过合理的配置和优化，你可以在各种环境中高效地使用Shiki来提升代码展示的美观性和可读性。

shiki A beautiful Syntax Highlighter. 项目地址: https://gitcode.com/gh_mirrors/sh/shiki