MENU

ShikiHighlighter——Typecho 插件

July 19, 2024 • Read: 1761 • 前端

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

Shiki|500

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

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

话不多说,先展示下实际的效果:

实际效果|600

功能及特点

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

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

后台设置|500

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/coreshiki/langs/typescript.mjsshiki/wasmshiki/themes/vitesse-lightshiki/langsshikijs/core/wasm-inlined

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

加载文件

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


参考链接

  1. 安装 | Shiki
Last Modified: August 15, 2024