Prism.js 是最轻量易用的 JavaScript 代码高亮方案,支持丰富语言和主题;需引入核心 CSS 和 JS,代码块须为
结构,按需加载语言或插件,并可手动调用 Prism.highlightAll() 处理动态内容。
JavaScript 实现代码高亮,最轻量、易用且支持丰富的语言和主题的方案之一就是
Prism.js
。它不依赖 jQuery,体积小,按需加载语法插件,适合静态页面或现代
前端
项目。
引入 Prism.js(CDN 最快上手)
直接在 HTML 的
或页面底部加入 CDN 链接即可:
引入核心 CSS(决定高亮样式):
引入核心 JS(含基础语法如 JavaScript、CSS、HTML):
此时,所有带有
class="xxx"
的
结构会自动高亮(如
language-js
、
language-html
)。
写法规范:HTML 结构必须正确
Prism 只处理符合约定结构的代码块:
立即学习
“
Java免费学习笔记(深入)
”;
function hello() {
console.log('Hello, Prism!');
}
注意要点:
PHP 8.5.5
PHP 8.5.5 是 PHP 8.5 分支的维护更新版本。该版本延续了“小步快跑”的迭代逻辑,通过深度错误修复、底层性能微调以及安全加固,旨在为开发者提供一个更健壮、更高效的运行环境。该版本严格遵守语义化版本规范,不包含破坏性变更。
下载
外层用
,内层用
必须带
class="xxx"
,比如
language-python
、
language-bash
不要写成
class="prism js"
或其他多余 class,除非你自定义了初始化逻辑
按需加载更多语言或功能(如行号、复制按钮)
Prism 默认只包含常用语言。需要 Python、PHP、JSX 等,要额外引入对应语言文件:
例如添加 Python 支持:
启用行号插件:
引入插件 CSS + JS:
然后给
加 class:
...
手动触发高亮(适用于动态插入的代码)
如果代码块是 JS 动态生成(比如从 Markdown 渲染后插入),Prism 不会自动处理,需手动调用:
高亮单个代码块:
Prism.highlightElement(codeDomNode);
高亮整个页面新插入的代码:
Prism.highlightAll();
推荐在 DOM 插入完成后调用,比如在
setTimeout(() => { Prism.highlightAll(); }, 0)
或
MutationObserver
中使用。
基本上就这些。Prism 上手不复杂但容易忽略结构和加载顺序,按规范写好 HTML + 引对资源,就能稳定工作。
