大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。
1.什么是 Shiki (式)A beautiful syntax highlighter based on TextMate grammar, accurate and powerful.
Shiki（式，日语中 “风格” 的意思）是一款基于 TextMate 语法和主题的语法高亮器，准确且功能强大，支持为几乎所有主流编程语言提供非常准确和快速的语法突出显示。
TextMate 是一款免费开源通用的 GUI 文本编辑器，由 Allan Odgaard 创建，适用于 macOS。 TextMate 具有声明性自定义、打开文档的选项卡、可记录宏、折叠部分、片段、shell 集成和可扩展打包系统。
借助 Shiki，开发者无需维护自定义 RegExp、CSS、 HTML。 随着 VS Code 中最喜欢的语言和主题的发展，语法突出显示也会随之发展。
Shiki 的典型特征包括：
准确美观：支持 TextMate 语法高亮且采用与 VS Code 相同的引擎，同时基于 VS Code 进行了诸多改进。Shiki 为代码片段提供最准确、最漂亮的语法高亮显示。 其由 Pine Wu 于 2018 年创建，当时作者还是 VS Code 团队的一员。⏱️ 零运行时间：与设计在浏览器中运行的现有语法高亮显示工具，例如： Prism 和 Highlight.js 不同，Shiki 采用了提前高亮显示策略。 Shiki 会将高亮显示的 HTML 发送给客户端，用零 JavaScript 生成准确、美观的语法高亮显示，这对于静态站点生成器和文档站点等特别有用。可定制：基于 HAST， 插件、转换、高度可定制。ESM 和通用：支持完全 Tree-Shakable 的 ESM，可在任何 JavaScript 运行时、浏览器、Node.js、Cloudflare Workers 等上运行。目前 Shiki 在 Github 通过 MIT 协议开源，有超过 7.8k 的 star、142k 的项目依赖量，代码贡献者 150+，是一个值得关注的前端开源项目。
2.如何使用 Shiki2.1 安装 Shiki首先安装相应依赖，支持： npm、pnpm、yarn、bun等包管理器。
npm install -D shiki// yarnyarn add -D shiki// pnpmpnpm add -D shiki// bunbun add -D shiki2.2 Shiki 简单使用开始使用 shiki 的最快方法是使用提供的速记函数 (shorthand functions)，其将按需加载必要的主题和语言，并自动将其缓存在内存中。
比如开发者可以将代码片段传递给 codeToHtml 函数并指定语言和主题，其将返回一个突出显示的 HTML 字符串，开发者可以将其嵌入到页面中。 生成的 HTML 包含每个标记的内联样式，因此也不需要额外的 CSS 来设置其样式。
import {codeToHtml} from 'shiki'const code = 'const a = 1' // input codeconst html = await codeToHtml(code, { lang: 'javascript', theme: 'vitesse-dark'})console.log(html)// 高亮的 HTML 代码更高级一点，开发者还可以使用 codeToTokens 或 codeToHast 获取中间数据结构并自行渲染：
import {codeToTokens} from 'shiki'const {tokens} = await codeToTokens('<div>当使用 WASM 并在内部按需加载主题和语言时，Shiki 提供的简写是异步执行的。 在某些情况下，开发者可能需要同步高亮代码，因此提供了 getHighlighter 函数来创建稍后可以同步使用的高亮实例。用法与 codeToHtml 几乎相同，其中每个主题和语言文件都是动态导入的 ES 模块。 但是，开发者最好明确列出语言和主题以获得最佳性能。
import {getHighlighter} from 'shiki'// `getHighlighter` 是异步的，其初始化内部和// 加载指定的主题和语言。const highlighter = await getHighlighter({ themes: ['nord'], langs: ['javascript'],})// 然后可以同步使用 `highlighter.codeToHtml`// 已加载的主题和语言。const code = highlighter.codeToHtml('const a = 1', { lang: 'javascript', theme: 'nord'})此外，如果想在创建高亮器后加载主题和语言，可以使用 loadTheme 和 loadLanguage 方法。
// 创建后加载主题和语言await highlighter.loadTheme('vitesse-light')await highlighter.loadLanguage('css')从 Shiki v1.0 开始，要求开发者显式加载所有主题和语言。
import {bundledLanguages, bundledThemes, getHighlighter} from 'shiki'const highlighter = await getHighlighter({ themes: Object.keys(bundledThemes), langs: Object.keys(bundledLanguages),})highlighter.codeToHtml('const a = 1', { lang: 'javascript', theme: 'poimandres'})参考资料https://github.com/shikijs/shiki
https://nuxt.com/blog/shiki-v1
https://www.youtube.com/watch?v=MzoPVWyov2k
https://en.wikipedia.org/wiki/TextMate
