Prism 是一个面向现代 Web 标准构建的轻量级、可扩展语法高亮器,用于为网页中的代码片段生成带有语法标记的 HTML。它通过 prism.css、prism.js 和规范的 HTML5 code 标签工作,使用者可以为代码元素添加 code.language-xxxx 类名后完成高亮。与只提供固定样式的代码展示方式相比,Prism 将语言定义、主题样式和插件机制分开,既能通过 CSS 调整 .comment、.string、.property 等类别的外观,也能扩展语言和功能。
核心功能
代码语法高亮
Prism 可以识别带有 language-xxxx 或 lang-xxxx 类名的代码元素,并根据对应的语言定义进行高亮。highlightAll 会查找当前页面中符合条件的代码元素,highlightElement 则可以处理单个元素;没有对应语言语法时,代码会以编码后的原文输出,而不是套用不存在的语法定义。
多语言与嵌入式语言支持
Prism 的语言定义以 grammar 的形式组织,官网示例包含 Markup、HTML、MathML、SVG、XML、CSS 和 C-like 等定义。Markup 中还可以把 CSS 嵌入 style 标签或 style 属性,并通过 addInlined 与 addAttribute 处理嵌入式语言;语言定义也可以通过 extend 创建副本并追加或覆盖 token。
可扩展的语言定义
使用者可以定义新语言,或者在已有语言上增加新的 token。Prism.languages.extend 用于复制语言并追加定义,insertBefore 用于在已有 token 前插入内容;官网同时提供 languages 命名空间及深度优先遍历等辅助能力,用于修改和组织语言 grammar。嵌套 token 可以继续使用内部 grammar 进行处理,但官网代码注释指出,互相嵌入不同语言或同一语言可能造成无限递归,需要谨慎使用。
插件与钩子机制
Prism 提供 plugins 命名空间以及 hooks 机制,插件可以在高亮流程的不同阶段介入。官网列出的阶段包括高亮前、分词前后、插入前、高亮后和完成时;hooks.add 可以为指定 hook 注册回调,hooks.run 会按注册顺序执行这些回调。高亮 token 在输出时会生成包含 token 与 token 类型的 HTML class,也可以通过 wrap hook 修改标签、class 和属性。
CSS 主题与样式控制
Prism 的样式全部通过 CSS 完成,官网给出的类别包括 .comment、.string 和 .property 等,因此主题不依赖 JavaScript 逻辑。首页展示了 Default、Dark、Funky、Okaidia、Twilight、Coy、Solarized Light 和 Tomorrow Night 等主题名称,使用者可以据此选择或调整代码展示风格。
轻量与异步处理
Prism 的核心文件压缩并使用 gzip 后为 2KB,语言定义每个增加约 0.3–0.5KB,主题约为 1KB。高亮可以使用 Web Workers 并行执行;highlightElement 支持通过异步参数把较大代码块交给 Worker 处理,以减少对界面的阻塞。不过异步高亮默认关闭,并且要正常工作,所需的语言定义需要包含在主 prism.js 文件中。
使用方式
Prism 的基本接入方式是同时引入 prism.css 和 prism.js,再在 HTML5 的 code 元素上使用 code.language-xxxx 类名。脚本默认会在页面加载后调用 highlightAll,也可以设置 Prism.manual 或使用 data-manual 属性来关闭自动高亮。它可以在浏览器中处理页面元素,也能在 Web Worker 中运行;官网代码还包含 Node.js 环境下的导出处理。除面向元素的高亮方法外,还提供 highlight、tokenize 等 JavaScript 方法,分别返回高亮 HTML 和 token 流。
适用人群与场景
网站开发者可以使用 Prism 为文档、教程和示例页面中的 HTML、CSS、JavaScript 或其他语言代码添加高亮。需要展示多种代码语言的技术文档维护者,可以通过语言 class 选择 grammar,并让同一语言 class 继承到多个代码片段。希望定制代码主题的前端开发者可以直接修改 CSS 类别;需要处理大段代码或扩展高亮流程的开发者,则可以使用 Web Workers、插件和 hooks 机制。
注意事项
Prism 的异步高亮默认关闭;如果要使用 Web Workers,所需的语言定义必须被包含在主 prism.js 文件中。若元素没有有效的 language-xxxx 类名,或没有加载对应 grammar,Prism 不会按目标语言进行语法高亮。官网正文展示了 MIT 许可信息,但没有提供定价或注册要求。