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;；漏掉任一环，高亮就完全不生效。&lt;/strong&gt;&lt;/p&gt; &lt;H3&gt;为什么单独 &lt;code&gt;&lt;code&gt;&lt;/code&gt; 标签无法触发高亮&lt;/H3&gt; &lt;p&gt;&lt;code&gt;highlight.js&lt;/code&gt; 默认只扫描 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&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; 这类内联写法不会被识别。&lt;/p&gt; &lt;ul&gt; &lt;li&gt;错误示例：&lt;code&gt;&lt;code class=&quot;javascript&quot;&gt;const a = 1;&lt;/code&gt;&lt;/code&gt; → 不高亮&lt;/li&gt; &lt;li&gt;正确结构：&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&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>

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

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

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

直接写 <div class="app"> 会被浏览器当成真实标签解析，导致 DOM 错乱或高亮失败。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <ul> <li>最稳做法：把原始代码塞进 <code><script type="text/plain"></script> 标签，再用 JS 读取 .textContent 插入 <pre class="brush:php;toolbar:false;">&lt;code&gt;&lt;/code&gt;，既保留符号又不被解析</pre>

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

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

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

要不要自己写正则高亮 HTML

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