最近阅读 阮一峰的网络日志 周刊，发现了这篇关于 Shiki 性能优化 - 按需加载语法解析 的文章，了解到 Shiki 式：

又是 antfu 大佬写的（看着基本全年无休的提交，大佬真是劳模啊，感兴趣的可以看看 Shiki 的重写史 The Evolution of Shiki v1.0）。

突然想起来我自己使用的 CodeStyle 插件在 Mirages 主题下 代码高亮功能 失效了。考虑直接引入 highlightjs，但是引入 所有语言包 太大，并且引入一段代码也不是很优雅，哪怕是通过 cdn 导入。因此决定利用 Shiki 重新写一个代码高亮插件。

话不多说，先展示下实际的效果：

功能及特点

1.拥有 Shiki 所支持的代码高亮样式

可以在插件设置后台选择喜欢的主题，如下图所示：

2. 动态加载所需语言的高亮文件

根据当前文章里面的代码块的语言，通过 cdn 动态加载高亮代码所需要的文件，减少不必要的文件加载。

例如，下面这段代码块：

import { createBaseClass } from "middle";

import type {} from "types";

// this will trigger an error
// index.ts:3:14 - error TS2742: The inferred type of 'Subclass' cannot be named without
// a reference to '../middle/node_modules/types/lib'. This is likely not portable. A type annotation is necessary.
export class Subclass extends createBaseClass() {}

只需要加载这几个文件： shiki/core、shiki/langs/typescript.mjs、shiki/wasm、shiki/themes/vitesse-light、shiki/langs、shikijs/core/wasm-inlined

下图的 name 叫 +esm 那几个文件就是，具体大小如下图所示：

代码的话，直接找 chatgpt 糊弄一番就行，感兴趣的可以去 github 上面看看。

---

参考链接

1. 安装 | Shiki