javascript如何实现代码高亮_Prism.js的基本用法是什么
Prism.js 是最轻量易用的 JavaScript 代码高亮方案，支持丰富语言和主题；需引入核心 CSS 和 JS，代码块须为 结构，按需加载语言或插件，并可手动调用 Prism.highlightAll() 处理动态内容。
主题；需引入核心 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 只处理符合约定结构的代码块：
function hello() {
console.log('Hello, Prism!');
}
注意要点：
- 外层用
，内层用 必须带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 + 引对资源，就能稳定工作。
