Prism.js代码高亮失效的主因是highlightAll()未在DOM就绪后调用，需确保pre>code结构、language-前缀正确、语言模块已加载，并依框架生命周期手动触发解析。
Prism.js 能让 标签真正“活”起来——但直接套用 不一定高亮，常见原因是加载顺序、语言模块缺失或 DOM 渲染时机不对。
为什么
核心问题不是标签写错，而是 Prism 没在 DOM 就绪后执行解析。尤其当代码块是动态插入（比如 Markdown 渲染后、dangerouslySetInnerHTML 注入、Vue/React 组件更新后），Prism.highlightAll() 必须手动触发，且不能早于目标元素挂载。
常见错误现象：
- 页面刷新后高亮正常，但路由跳转后失效
<code class="python"></code> 显示原样文本，无颜色
- 控制台报错
Uncaught TypeError: Prism.highlightAll is not a function（通常因只引入了prism-core.min.js，没加载完整版）
Prism.highlightAll() 的调用时机怎么选？
它必须在目标 元素已存在于 DOM 中时运行。静态 HTML 可放 底部；动态场景需配合框架生命周期：
- 原生 JS：用
DOMContentLoaded或setTimeout(..., 0)确保 DOM 解析完成 - Vue 3（Composition API）：
onMounted+onUpdated都要调用，否则编辑器内容更新后不重绘 - React（如 Gatsby）：在组件
useEffect中调用，且确保dangerouslySetInnerHTML已渲染完毕 - Vite +
vite-plugin-prismjs：插件会自动注入，但若手动添加代码块仍需显式调用
语言类名写法和常见陷阱
class 值决定 Prism 加载哪个语法解析器，必须严格匹配官方支持的标识符，大小写敏感、不可缩写：
- ✅ 正确：
language-javascript、language-typescript、language-html、language-css、language-python - ❌ 错误：
lang-js、javascript（缺language-前缀）、lang-python、py - ⚠️ 注意：HTML 中写成
class="html"，不是class="html"；否则 Prism 认为是通用代码块，不启用 HTML 语法解析
如果用了 language-xxx 但对应语言模块未加载（比如只引入了基础版 prism.js，没单独引入 prism-python.min.js），该代码块将保持纯文本状态，无报错提示。
CDN 引入时最简可用组合
避免本地构建复杂度，用 CDN 是最快验证方式。但注意：官方 CDN 默认不包含所有语言，需按需拼接路径：
<!-- 基础样式（必选）--> <link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.css" rel="stylesheet"><p><!-- 核心解析器 + 常用语言（推荐初试）--> <script src="<a%20href=" https:>https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js"></script>> <script src="<a%20href=" https:>https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>></p>
prism-autoloader.min.js 会根据 class 自动加载对应语言文件（如看到 language-python 就拉取 Python 插件），省去手动引入一堆 .min.js 的麻烦。但首次加载略慢，且依赖网络——生产环境建议预编译打包。
最容易被忽略的一点：Prism 不处理 单独出现的情况，必须包裹在 内；<code></code> 是硬性结构约定，漏掉 <code><pre class="brush:php;toolbar:false;">
）都会导致失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
