跳到主要内容
项目详情

Prism 是一个面向现代 Web 标准构建的轻量级、可扩展语法高亮器,用于为网页中的代码片段生成带有语法标记的 HTML。它通过 prism.css、prism.js 和规范的 HTML5 code 标签工作,使用者可以为代码元素添加 code.language-xxxx 类名后完成高亮。与只提供固定样式的代码展示方式相比,Prism 将语言定义、主题样式和插件机制分开,既能通过 CSS 调整 .comment.string.property 等类别的外观,也能扩展语言和功能。

核心功能

代码语法高亮

Prism 可以识别带有 language-xxxxlang-xxxx 类名的代码元素,并根据对应的语言定义进行高亮。highlightAll 会查找当前页面中符合条件的代码元素,highlightElement 则可以处理单个元素;没有对应语言语法时,代码会以编码后的原文输出,而不是套用不存在的语法定义。

多语言与嵌入式语言支持

Prism 的语言定义以 grammar 的形式组织,官网示例包含 Markup、HTML、MathML、SVG、XML、CSS 和 C-like 等定义。Markup 中还可以把 CSS 嵌入 style 标签或 style 属性,并通过 addInlinedaddAttribute 处理嵌入式语言;语言定义也可以通过 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.cssprism.js,再在 HTML5 的 code 元素上使用 code.language-xxxx 类名。脚本默认会在页面加载后调用 highlightAll,也可以设置 Prism.manual 或使用 data-manual 属性来关闭自动高亮。它可以在浏览器中处理页面元素,也能在 Web Worker 中运行;官网代码还包含 Node.js 环境下的导出处理。除面向元素的高亮方法外,还提供 highlighttokenize 等 JavaScript 方法,分别返回高亮 HTML 和 token 流。

适用人群与场景

网站开发者可以使用 Prism 为文档、教程和示例页面中的 HTML、CSS、JavaScript 或其他语言代码添加高亮。需要展示多种代码语言的技术文档维护者,可以通过语言 class 选择 grammar,并让同一语言 class 继承到多个代码片段。希望定制代码主题的前端开发者可以直接修改 CSS 类别;需要处理大段代码或扩展高亮流程的开发者,则可以使用 Web Workers、插件和 hooks 机制。

注意事项

Prism 的异步高亮默认关闭;如果要使用 Web Workers,所需的语言定义必须被包含在主 prism.js 文件中。若元素没有有效的 language-xxxx 类名,或没有加载对应 grammar,Prism 不会按目标语言进行语法高亮。官网正文展示了 MIT 许可信息,但没有提供定价或注册要求。

轻量核心核心文件压缩并使用 gzip 后为 2KB,语言和主题分别增加约 0.3–0.5KB 与 1KB。
多语言高亮通过 language class 和 grammar 处理 Markup、CSS、C-like 等语言,并支持 HTML、XML、SVG 等关联定义。
可扩展架构可以定义新语言、扩展已有语言,并通过插件架构添加新功能。
CSS 样式控制所有样式通过 CSS 完成,能够针对 comment、string、property 等类别调整外观。
Web Worker 并行在可用时支持使用 Web Workers 并行高亮,以避免处理大型代码块时阻塞界面。

用户评论 (0)

还没有用户评论

成为第一个分享使用体验的人

查看更多

Prism 截图

官网首页截图

写评论

分享你的使用体验,至少 10 个字。评论可以发多条,打分在右侧卡片单独进行。

还需 10 个字 · 0 / 500