Prism.js代码高亮失效的主因是highlightAll()未在DOM就绪后调用，需确保pre>code结构、language-前缀正确、语言模块已加载，并依框架生命周期手动触发解析。

Prism.js 能让 <code> 标签真正“活”起来——但直接套用 <code class="js"> 不一定高亮，常见原因是加载顺序、语言模块缺失或 DOM 渲染时机不对。

为什么 <code> 写对了却没高亮？

核心问题不是标签写错，而是 Prism 没在 DOM 就绪后执行解析。尤其当代码块是动态插入（比如 Markdown 渲染后、dangerouslySetInnerHTML 注入、Vue/React 组件更新后），Prism.highlightAll() 必须手动触发，且不能早于目标元素挂载。

常见错误现象：

• 页面刷新后高亮正常，但路由跳转后失效
• <pre class="brush:php;toolbar:false;">&lt;code class=&quot;python&quot;&gt;&lt;/code&gt; 显示原样文本，无颜色&lt;/li&gt;&lt;li&gt;控制台报错 &lt;code&gt;Uncaught TypeError: Prism.highlightAll is not a function&lt;/code&gt;（通常因只引入了 &lt;code&gt;prism-core.min.js&lt;/code&gt;，没加载完整版）&lt;/li&gt;&lt;/ul&gt;&lt;H3&gt;&lt;code&gt;Prism.highlightAll()&lt;/code&gt; 的调用时机怎么选？&lt;/H3&gt;&lt;p&gt;它必须在目标 &lt;code&gt;&lt;code&gt;&lt;/code&gt; 元素已存在于 DOM 中时运行。静态 HTML 可放 &lt;code&gt;&lt;body&gt;&lt;/code&gt; 底部；动态场景需配合框架生命周期：&lt;/p&gt;&lt;p&gt;&lt;span&gt;立即学习&lt;/span&gt;“&lt;a href=&quot;https://pan.quark.cn/s/cb6835dc7db1&quot; style=&quot;text-decoration: underline !important; color: blue; font-weight: bolder;&quot; rel=&quot;nofollow&quot; target=&quot;_blank&quot;&gt;前端免费学习笔记（深入）&lt;/a&gt;”；&lt;/p&gt;&lt;div class=&quot;aritcle_card flexRow&quot;&gt; &lt;div class=&quot;artcardd flexRow&quot;&gt; &lt;a class=&quot;aritcle_card_img&quot; href=&quot;/xiazai/skill11499&quot; title=&quot;cn-json-diff&quot;&gt;&lt;img src=&quot;https://img.php.cn/upload/skill/001/246/273/6adaf20cf0281539.jpg&quot; alt=&quot;cn-json-diff&quot; &gt;&lt;/a&gt; &lt;div class=&quot;aritcle_card_info flexColumn&quot;&gt; &lt;a href=&quot;/xiazai/skill11499&quot; title=&quot;cn-json-diff&quot;&gt;cn-json-diff&lt;/a&gt; &lt;p&gt;比较两个 JSON 文件并显示差异。支持嵌套结构、数组及值变更。纯 Python 标准库实现，无需 API 密钥。&lt;/p&gt; &lt;/div&gt; &lt;a href=&quot;/xiazai/skill11499&quot; title=&quot;cn-json-diff&quot; class=&quot;aritcle_card_btn flexRow flexcenter&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;span&gt;下载&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt;&lt;ul&gt;&lt;li&gt;原生 JS：用 &lt;code&gt;DOMContentLoaded&lt;/code&gt; 或 &lt;code&gt;setTimeout(..., 0)&lt;/code&gt; 确保 DOM 解析完成&lt;/li&gt;&lt;li&gt;Vue 3（Composition API）：&lt;code&gt;onMounted&lt;/code&gt; + &lt;code&gt;onUpdated&lt;/code&gt; 都要调用，否则编辑器内容更新后不重绘&lt;/li&gt;&lt;li&gt;React（如 Gatsby）：在组件 &lt;code&gt;useEffect&lt;/code&gt; 中调用，且确保 &lt;code&gt;dangerouslySetInnerHTML&lt;/code&gt; 已渲染完毕&lt;/li&gt;&lt;li&gt;Vite + &lt;code&gt;vite-plugin-prismjs&lt;/code&gt;：插件会自动注入，但若手动添加代码块仍需显式调用&lt;/li&gt;&lt;/ul&gt;&lt;H3&gt;语言类名写法和常见陷阱&lt;/H3&gt;&lt;p&gt;&lt;code&gt;class&lt;/code&gt; 值决定 Prism 加载哪个语法解析器，必须严格匹配官方支持的标识符，大小写敏感、不可缩写：&lt;/p&gt;&lt;ul&gt;&lt;li&gt;✅ 正确：&lt;code&gt;language-javascript&lt;/code&gt;、&lt;code&gt;language-typescript&lt;/code&gt;、&lt;code&gt;language-html&lt;/code&gt;、&lt;code&gt;language-css&lt;/code&gt;、&lt;code&gt;language-python&lt;/code&gt;&lt;/li&gt;&lt;li&gt;❌ 错误：&lt;code&gt;lang-js&lt;/code&gt;、&lt;code&gt;javascript&lt;/code&gt;（缺 &lt;code&gt;language-&lt;/code&gt; 前缀）、&lt;code&gt;lang-python&lt;/code&gt;、&lt;code&gt;py&lt;/code&gt;&lt;/li&gt;&lt;li&gt;⚠️ 注意：HTML 中写成 &lt;code&gt;class=&quot;html&quot;&lt;/code&gt;，不是 &lt;code&gt;class=&quot;html&quot;&lt;/code&gt;；否则 Prism 认为是通用代码块，不启用 HTML 语法解析&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;如果用了 &lt;code&gt;language-xxx&lt;/code&gt; 但对应语言模块未加载（比如只引入了基础版 &lt;code&gt;prism.js&lt;/code&gt;，没单独引入 &lt;code&gt;prism-python.min.js&lt;/code&gt;），该代码块将保持纯文本状态，无报错提示。&lt;/p&gt;&lt;H3&gt;CDN 引入时最简可用组合&lt;/H3&gt;&lt;p&gt;避免本地构建复杂度，用 CDN 是最快验证方式。但注意：官方 CDN 默认不包含所有语言，需按需拼接路径：&lt;/p&gt;&lt;pre class='brush:php;toolbar:false;'&gt;&lt;!-- 基础样式（必选）--&gt; &lt;link href=&quot;https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.css&quot; rel=&quot;stylesheet&quot;&gt; &lt;p&gt;&lt;!-- 核心解析器 + 常用语言（推荐初试）--&gt; &lt;script src=&quot;&lt;a href=&quot;https://www.php.cn/link/ddb7775a4804e74eb1c80b5a36f3ffcb&quot;&gt;https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js&quot;></script&amp;gt&lt;/a&gt;; &lt;script src=&quot;&lt;a href=&quot;https://www.php.cn/link/127c091ffa59fab0d49ec3d91c6017c4&quot;&gt;https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js&quot;></script&amp;gt&lt;/a&gt;;</pre><p><code>prism-autoloader.min.js 会根据 class 自动加载对应语言文件（如看到 language-python 就拉取 Python 插件），省去手动引入一堆 .min.js 的麻烦。但首次加载略慢，且依赖网络——生产环境建议预编译打包。

  最容易被忽略的一点：Prism 不处理 <code> 单独出现的情况，必须包裹在 <pre class="brush:php;toolbar:false;"></pre> 内；<pre class="brush:php;toolbar:false;">&lt;code&gt;&lt;/code&gt; 是硬性结构约定，漏掉 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;</pre> 或嵌套错位（比如 <code><pre class="brush:php;toolbar:false;"></pre>）都会导致失效。