highlight.js必须将嵌套在<pre>中，因其默认仅扫描<pre>结构；class需为language-xxx或lang-xxx；引入后无反应需排查DOM加载时机、CSS是否引入及是否误用已废弃的initHighlightingOnLoad()。

为什么必须嵌在<code><pre class="brush:php;toolbar:false;">&lt;/code&gt;里&lt;/H3&gt; &lt;p&gt;highlight.js 默认只扫描 &lt;code&gt;&lt;pre class='brush:php;toolbar:false;'&gt;</pre> 这种嵌套结构，单独的 <code> 标签（比如放在 <p></p> 里）它直接跳过——这不是 bug，是设计约定。因为 <pre class="brush:php;toolbar:false;">&lt;/code&gt; 能保留换行、空格和缩进，而语法高亮依赖这些格式信息才能正确解析。&lt;/p&gt; &lt;p&gt;常见错误现象：&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;code&gt;&lt;p&gt;&lt;code class=&quot;javascript&quot;&gt;let x = 1;&lt;/code&gt;&lt;/p&gt;&lt;/code&gt; —— 完全不触发高亮&lt;/li&gt; &lt;li&gt;&lt;code&gt;&lt;div&gt;&lt;code class=&quot;html&quot;&gt;...&lt;/code&gt;&lt;/div&gt;&lt;/code&gt; —— 同样被忽略&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;正确写法只有这一种结构：&lt;code&gt;&lt;pre class='brush:html;toolbar:false;'&gt;<div></div></pre>。注意：class 值必须是 language-xxx 或 lang-xxx，比如 language-css、lang-js，否则无法识别语言。

立即学习“前端免费学习笔记（深入）”；

引入后没颜色？先查这三件事

高亮“看不见”基本不是库的问题，而是加载链断了。按顺序排查比重装更快：

wechat-article-extraction-mp-weixin-qq-com news-webpage-cleaning blog-post-parsing metadata-extraction-title-author-date multiple-output-formats-markdown-json-plain-text batch-processing-support

基于三引擎设计，从微信文章、新闻和博客网页提取干净内容，支持标题作者日期元数据，多格式和批量处理。

下载

• DOM 是否就绪？脚本若放在 里且没加 defer，执行 hljs.highlightAll() 时 <pre class='brush:php;toolbar:false;'></pre> 还没生成，自然找不到目标
• CSS 文件漏了？只引 JS 不引 CSS，代码能显示但全是黑白——CDN 地址要配对，比如 JS 用 highlight.min.js，CSS 就得用 atom-one-dark.min.css 这类主题文件
• 是否误用了废弃 API？v11+ 已移除 initHighlightingOnLoad()，统一用 highlightAll()；老教程抄过来容易卡在这一步

动态插入代码后怎么高亮

Vue、React 或 AJAX 加载内容后，highlightAll() 不会自动重跑。必须手动触发：

• 对单个新元素：拿到 <code> 节点后调 hljs.highlightElement(el)，前提是该节点已设好 class="xxx"
• 对整页重扫：再次调 hljs.highlightAll()，适合小范围更新
• 注意语言声明不能省：哪怕你加载了 powershell.min.js，也得显式写 class="powershell"，否则 highlightElement() 无法推断语言

示例（fetch 后高亮）：codeEl.className = 'language-python'; hljs.highlightElement(codeEl);

HTML 示例代码里的 和 <code>> 怎么安全显示

你写的 HTML 示例如果直接塞进 <code> 标签，浏览器会当成真实标签解析，导致结构错乱甚至高亮失败。不能靠手动转义（<、>），太容易漏。

最稳做法：<script type="text/plain"></script> 包住原始代码，再用 JS 读取 .textContent 插入到 <pre class='brush:php;toolbar:false;'></pre> 中——既保留符号原样，又不被 HTML 解析器吃掉。

次选方案：用实体替换，但注意 & 要写成 &（两个 &），否则会被解成一个 &，造成后续转义失效。