Use Shiki StyleToClass Transformer
Shiki 作为比较流行的代码高亮工具，提供比 highlight.js更准确的代码高亮效果；以 console.log("hello")为例，Shiki 高亮器按照代码语义将其拆分为 6 部分；其被 <span>标签包裹，标签的内联样式中可能有 color,font-style等属性以及一些 CSS 变量[1]，用于实现颜色[2]以及字体[3]的多主题适配
JS
const code = await codeToHtml('console.log("hello")', { lang: "javascript", themes: { light: "min-light", dark: "nord" },});HTML
<code> <span class="line"> <span style="color:#1976D2;--shiki-dark:#D8DEE9">console</span> <span style="color:#6F42C1;--shiki-dark:#ECEFF4">.</span> <span style="color:#6F42C1;--shiki-dark:#88C0D0">log</span> <span style="color:#24292EFF;--shiki-dark:#D8DEE9FF">(</span> <span style="color:#22863A;--shiki-dark:#ECEFF4">"</span> <span style="color:#22863A;--shiki-dark:#A3BE8C">hello</span> <span style="color:#22863A;--shiki-dark:#ECEFF4">"</span> <span style="color:#24292EFF;--shiki-dark:#D8DEE9FF">)</span> </span></code>HTML
<code> <span class="line"> <span class="_sk_p7ztx5">console</span> <span class="_sk_8gyisu">.</span> <span class="_sk_18gpmt">log</span> <span class="_sk_23aifj space">(</span> <span class="_sk_23aifj">"</span> <span class="_sk_8gyisu">hello</span> <span class="_sk_18gpmt">""</span> <span class="_sk_p7ztx5 space">)</span> </span></code>上面的示例输出中，HTML 体积尚可接受，一是代码量很小，此外是仅应用了 min-light 和 nord 两种主题，且这两个主题仅在实例代码中嵌入了 color 属性以及 --shiki-dark 变量；
当这些条件不满足时，输出的 HTML 体积会大幅增加。例如个人博客中包含一些长代码片段，同时应用了 catppuccin-latte, catppuccin-mocha, tokyo-night, nord, tokyo-night 5 种主题，输出的 HTML 就略显臃肿；下文将记录如何使用 styleToClass Transformer 来优化 Shiki 高亮器的输出。
