代码高亮预览

粘贴代码就能看到彩色高亮,可切换主题、显示行号、指定高亮行,最后导出带行内样式的 HTML。

自动识别适合不确定语言的片段;语言下拉里的每一项都是按需加载的,选到才会下载对应的语法模块。

为什么要自己写颜色表

highlight.js 官方主题是以 CSS 文件形式发布的,但本站的样式全部集中在 main.css 里,页面里不允许再写 <style> 或引入外部样式表。更关键的是导出场景:邮件客户端、Word、以及大多数富文本编辑器会直接丢掉 class 属性,只保留写在元素上的行内样式。所以这里维护了一张「token 类别 → CSS 声明」的映射表,把 hljs 输出的 hljs-* 类名改写成 style。

改写的做法是只替换标签里的 class 属性,绝不碰标签之间的正文。代码里本身写着 HTML 标签或 &lt; 这类实体的地方,在高亮结果里已经是转义形式,不会被误伤,所以「去掉标签再还原实体」得到的一定和原代码一字不差,页面上也是这样验证的。

token 的粒度由 highlight.js 自己的分词规则决定:它认识关键字、字符串、注释、数字这些大类,但不认识你的业务语义,因此没法只高亮某个变量名,也不会区分「函数名」和「类名」(两者都可能是 hljs-title)。需要更细的语义高亮得换成 TextMate 语法或 LSP 方案,那是编辑器级别的工作量。

语言模块按需加载:JavaScript 之外的语法各自一个 chunk,选中 22 种语言也不会把全部体积一次性塞给访客。想省流量就固定选一个语言,别用自动识别——自动识别要把所有已注册语言都跑一遍。