最近阅读 阮一峰的网络日志 周刊,发现了这篇关于 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 上面看看。
参考链接
版权属于:未央花
本文链接:http://pslanys.com/archives/414.html
转载时须注明出处及本声明