254 - 《关于语法高亮》

前几天做 Docaid 时要加语法高亮，做了调研和尝试，以下是个人理解。不是啥新东西，只不过我刚接触这块。

1、语法高亮有老中青三代。老一代是 highlight.js；中一代是 prism；青一代有 shiki 和基于 shiki 的 rehype-pretty-code，以及 sandpack（没想到吧…）。

2、highlight.js 是用地最广也是最老的，支持高亮 html 里的 <pre><code> 标签。用法是，1）引入 css，2）引入 js，3）执行 hljs 的初始化函数。支持的环境包括浏览器、node 和 worker。主题切换通过引入相应的 css 即可实现，主题列表可以在 unpkg.com/highlight.js/styles 中找到。同时出于性能考虑，你可能不需要支持那么多语言，可以通过只加载 core + 对应语言的方式实现。

<link rel="stylesheet" href="/path/to/styles/default.min.css">
<script src="/path/to/highlight.min.js"></script>
<pre><code class="language-html">...</code></pre>
<script>hljs.highlightAll();</script>

3、prism 看起来更现代一些，docusaurus 和 dumi 用的这个。用法和 highlight.js 差不多，1）引入 css，2）引入 js，无需执行初始化函数。支持浏览器和 node 环境。主题也是通过切换 css 实现，但官方主题比较少，只有 7 个。出于性能考虑，prism 支持通过 core + autoloader 的方式自动加载相关语言。之所以说 prism 更现代，是因为他有一套插件机制，并且官方提供了像行高亮、显示语言、关键词高亮、Toolbar、复制代码按钮、Treeview 等更现代的功能。

<link rel="stylesheet" href="/path/to/themes/prism.css" />
<pre><code class="language-css">p { color: red }</code></pre>
<script src="/path/to/prism.js"></script>

4、shiki 最年轻，typescript 官网、vitepress 官网、vscode 官网、nextra 2 等都用他。shiki 的特点是「使用TextMate语法对字符串进行标记」，这意味着他可以支持任意 vscode 主题包。使用 shiki 会有一些门槛，比如他不支持自动对 <pre><code> 做高亮，他只提供了把代码转成 html 的功能，所以我们通常会将他和 markdown 解析器结合使用。shiki