prism.js必须等dom渲染完成再初始化，因为它只扫描已存在的pre>code节点，若提前调用highlightall()会因元素未挂载而报错；动态插入代码块需手动调用highlightelement()，且language-xxx类必须写在code标签上而非pre。
Prism.js 为什么必须等 标签渲染完再初始化
Prism 不会自动扫描页面，它只高亮你明确传入的 DOM 节点。如果你在 document.write 或 Vue/React 组件挂载前就调用 <code>Prism.highlightAll()，它会找不到 <code> 元素，或者只处理到部分节点。
常见错误现象：Uncaught TypeError: Cannot read property 'textContent' of null，本质是 Prism 尝试读取一个尚未存在的 <code> 的内容。
- 确保 HTML 中已有
<pre class="brush:php;toolbar:false;"><code class="js">...</code></pre> - 在
DOMContentLoaded后调用Prism.highlightAll()，或在框架中确保 DOM 已插入（如 React 的useEffect(() => { Prism.highlightAll() }, [])） - 若代码块动态插入（比如 Markdown 渲染后），需手动调用
Prism.highlightElement(codeEl)，不能只依赖highlightAll()
class="xxx" 必须写在 code 标签上，不是 pre
Prism 默认只识别 <code class="js"> 这类写法。如果把语言标识写在 <pre class="js"></pre> 上，Prism 会忽略——它不看 pre 的 class，只检查 code 自身。
使用场景：你在用 Hugo、Jekyll 或自定义 Markdown 解析器时，容易被模板逻辑误导，把 class 错配到外层容器。
- 正确：
<pre class="brush:php;toolbar:false;"><code class="python">print("hello")</code></pre> - 错误：
<pre class="python"><code>print("hello")</code></pre> - 如果无法改 HTML 结构（如受限于 CMS 输出），可用 JS 补救：
document.querySelectorAll('pre.language-js').forEach(el => el.querySelector('code').className = 'language-js')
加载 Prism CSS 时，code 标签默认样式会被覆盖
Prism 的 CSS 文件里包含 code { background: …; padding: … } 等全局重置，这会覆盖你原本为 code 设定的行内样式或基础排版，导致普通行内代码（非 pre > code）看起来突兀。
性能与兼容性影响：直接引入完整 prism.css 是最简方式，但如果你只用 JS 高亮逻辑、不依赖其样式，可删掉 CSS；或改用仅作用于 pre code 的 scoped 规则。
- 推荐做法：用
pre code { … }替代code { … }，避免污染行内<code>foo - 若用 Webpack/Vite，可通过
@import "prismjs/themes/prism.css";导入，再用 CSS 模块或 :global() 局部化 - 注意字体栈：Prism 默认用
Consolas, Monaco, ...，如目标环境缺这些，建议补上系统等宽字体如"SFMono-Regular", "Roboto Mono"
Prism 插件（如 line-numbers）需要额外加载且有 DOM 结构要求
像 line-numbers 这类插件不是开箱即用的。它要求你的代码块结构是 <pre class="line-numbers"><code>...</code></pre>，并且会在运行时往 pre 内注入 <span class="line-numbers-rows"></span> —— 如果你漏了 class="line-numbers"，插件完全静默，也不报错。
容易踩的坑：以为只要引入 JS 就生效，结果数字没出来，反复检查控制台却无报错。
- 必须同时加载插件 JS：
<script src="prism-line-numbers.min.js"></script> -
<pre class="brush:php;toolbar:false;"></pre>上要加class="line-numbers"，不是code上 - 插件依赖 Prism 主库已加载，顺序不能颠倒；若用 ES 模块，需显式
require('prismjs/plugins/line-numbers/prism-line-numbers') - 某些插件（如
autoloader）会动态加载语言文件，但网络失败时降级无声，建议预加载常用语言
复杂点在于：Prism 的“高亮”只是字符串替换 + class 注入，它不接管 DOM 生命周期。所有动态场景（编辑器预览、Tab 切换、SSR）都得你手动触发对应 API，而不是指望一次 highlightAll() 一劳永逸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
