highlight.js 必须用 结构、language-xxx 类名、DOM 就绪后调用 highlightAll()，单独 不生效；需引入 CSS，HTML 特殊字符要转义或用 text/plain 脚本标签。

直接用 highlight.js 是最稳的路径，但必须写对 <pre class="brush:php;toolbar:false;">&lt;code&gt;&lt;/code&gt; 结构、声明 language 类、等 DOM 就绪再调用 &lt;code&gt;highlightAll()&lt;/code&gt;；漏掉任一环，高亮就完全不生效。</pre>

为什么单独 <code> 标签无法触发高亮

highlight.js 默认只扫描 <pre class="brush:php;toolbar:false;">&lt;code&gt;&lt;/code&gt; 这种嵌套结构 —— 它的设计逻辑是“预格式化内容才值得语法解析”，所以 &lt;code&gt;&lt;p&gt;&lt;code&gt;console.log(1)&lt;/code&gt;&lt;/p&gt;&lt;/code&gt; 这类内联写法不会被识别。</pre>

• 错误示例：<code class="javascript">const a = 1; → 不高亮
• 正确结构：<pre class="brush:php;toolbar:false;">&lt;code class=&quot;js&quot;&gt;const a = 1;&lt;/code&gt;</pre>
• class 值必须是 language-xxx 或 lang-xxx（如 language-html、lang-py），写成 js 或 javascript 无效
• 如果页面里真有零星几处内联代码要高亮，得手动调 hljs.highlightElement(el)，不能依赖自动扫描

DOM 加载时机和初始化方式怎么选

常见错误是脚本放在 里就调 hljs.highlightAll()，此时 <pre class="brush:php;toolbar:false;">&lt;code&gt;&lt;/code&gt; 节点还没生成，自然没反应。</pre>

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 推荐写法：把 script 放在 前，或用 DOMContentLoaded 包裹：document.addEventListener('DOMContentLoaded', () => hljs.highlightAll());
• 别用已废弃的 hljs.initHighlightingOnLoad()，新版文档已移除该 API
• 如果代码块是 JS 动态插入的（比如 Markdown 渲染后），需在插入完成后手动调一次 hljs.highlightAll()，不能只靠初始加载
• CSS 文件必须引入，否则即使解析成功，也看不到颜色 —— 检查浏览器开发者工具中是否报 404 加载失败

HTML 特殊字符怎么安全放进 <code> 里

直接写 <div class="app"> 会被浏览器当成真实标签解析，导致 DOM 错乱或高亮失败。<ul> <li>最稳做法：把原始代码塞进 <code><script type="text/plain"></script> 标签，再用 JS 读取 .textContent 插入 <pre class="brush:php;toolbar:false;">&lt;code&gt;&lt;/code&gt;，既保留符号又不被解析</pre>

次选方案：手动转义， → <code>，<code>> → >，& → &（注意 & 要写两次，否则会被解一次）

千万别用 innerHTML 直接拼接未转义字符串，会丢事件监听器、表单值、动态节点

如果用的是服务端渲染（如 Next.js），优先在构建时完成转义，避免客户端 JS 多一层处理

要不要自己写正则高亮 HTML

可以，但不推荐。简单匹配 ]*> 看似能标红标签，但很快会遇到边界问题：自闭合标签、属性里的 、JS 字符串中的 HTML 片段、注释里的 <code>