prism.js需按pre>code结构引入并调用prism.highlightall()；默认仅支持html/css/js，python等需额外加载语言插件；行号与复制按钮需分别引入line-numbers和copy-to-clipboard插件及对应css；动态渲染内容须手动调用highlightelement。
Prism.js 怎么引入才能让 标签生效
Prism.js 不会自动高亮页面里所有 标签，必须显式调用 <code>Prism.highlightAll()，或依赖其自动执行机制——但这个机制只在 DOM 加载完成、且 <code>pre 包裹 code 时才触发。
常见错误是直接写：<code class="js">console.log(1)，没包 pre，结果完全不生效。
- 正确结构必须是：
<pre class="brush:php;toolbar:false;"><code class="js">...</code></pre> - 引入顺序：先加载
prism.css（样式），再加载prism.js（脚本） - 如果 JS 在
中加载，需确保调用Prism.highlightAll()在 DOM 就绪后，例如用DOMContentLoaded或把 script 放在前
为什么用了 language-python 却显示成纯文本
Prism 默认只包含 HTML/CSS/JavaScript 三种语言的高亮能力。Python、Java、Go 等需手动引入对应语言插件，否则 class="python" 会被识别，但无语法解析逻辑，最终退化为无样式纯文本。
- 去 Prism 官网下载页 勾选需要的语言（如 Python、JSON、Bash），再下载
prism.js和prism.css - 或者用 npm：
npm install prismjs，然后按需导入：import 'prismjs/components/prism-python' - 注意：CSS 文件也得同步引入对应语言的 class 规则，否则 token（如
.token.keyword）没样式
如何让行号和复制按钮同时工作
Prism 的 line-numbers 和 copy-to-clipboard 都是插件，不是默认功能，且有依赖关系：行号插件要求代码块必须是 pre > code 结构，并在 pre 上加 class="line-numbers"；复制按钮则依赖 toolbar 插件作为容器基础。
- 必须引入三个 JS 文件：
prism.js+prism-line-numbers.js+prism-copy-to-clipboard.js（后者隐式依赖prism-toolbar.js） - CSS 也要对应引入：
prism-line-numbers.css，否则行号区域无宽度、遮挡内容 - HTML 示例：
<pre class="line-numbers"><code class="js">...</code></pre>—— 注意不是给code加line-numbers
Vue/React 项目中动态渲染的代码块不生效怎么办
框架内用 v-html 或 dangerouslySetInnerHTML 插入的 pre/code，DOM 渲染后 Prism 并不知道——它只在初始化时扫描一次，或监听 DOMContentLoaded，不会劫持后续 DOM 变更。
- 在组件挂载/更新后手动调用：
Prism.highlightElement(codeEl)（传入单个code元素）或Prism.highlightAll() - React 中可在
useEffect里查到code节点后调用；Vue 3 的onMounted+nextTick更稳妥，因为要等v-html真正完成 - 避免重复高亮：同一个元素被多次
highlightElement会报错"Language never defined"，建议加标记（如data-prism-highlighted）跳过已处理节点
最易被忽略的是语言名大小写和连字符：写成 language-jsx 没问题，但写成 language-JSX 或 language_jsx 就会失效；Python 是 language-python，不是 language-py。这类细节错一个，高亮就静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
