<code>标签本身不提供高亮，仅声明语义并渲染为等宽字体；真正实现语法高亮必须同时满足四要素：<pre><code>嵌套结构、语言类名（如class="javascript"）、HTML实体转义、配套CSS主题与JS库（如highlight.js），缺一不可。
code 标签本身不提供高亮，只声明语义、渲染为等宽字体。真正实现语法高亮，必须配合 、语言 class、转义、CSS 和 JS 库四要素，缺一不可。 <H3>为什么 <pre class="brush:php;toolbar:false;"> 单独写永远不高亮</H3> <p>浏览器原生把 <code> 当作行内元素：换行被压缩、缩进丢失、< 和 > 会被解析成真实标签。highlight.js 和 Prism.js 都默认忽略 <code> 单独出现的场景——它们只扫描 <pre class='brush:php;toolbar:false;'> 这个嵌套结构。</p> <ul> <li><code><p><code class="js">const x = 1;→ 完全跳过，不解析也不报错
<div>
<code class="html"><div></div> → 没 ，高亮库根本看不到它</li>
<li><code><pre class="brush:php;toolbar:false;"><code>if (x < 10) { →
<pre class="brush:php;toolbar:false;"> 的 class 必须是 language-xxx</H3>
<p>highlight.js 不认 <code>class="js"
或 class="javascript"，只识别 language-js、language-python、lang-html 这类带标准前缀的写法。
- 正确：
<pre class='brush:js;toolbar:false;'>console.log('hi');</pre>
- 错误：
<pre class='brush:js;toolbar:false;'>console.log('hi');</pre>（v11+ 版本直接忽略）
- 不确定语言时可用
class="plaintext"，强制不着色但保留格式
- Prism.js 对 class 更宽容，但统一用
language-xxx 可避免跨库迁移问题
HTML 特殊字符必须提前转义
<pre class='brush:js;toolbar:false;'>console.log('hi');</pre>
<pre class='brush:js;toolbar:false;'>console.log('hi');</pre>（v11+ 版本直接忽略）class="plaintext"，强制不着色但保留格式language-xxx 可避免跨库迁移问题代码里含 、&，不转义就不是“展示代码”，而是让浏览器执行代码或破坏 DOM。这不是高亮库的问题，是 HTML 解析阶段就错了。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 原始代码：
<div id="app"></div> - 错误写法：
<pre class='brush:html;toolbar:false;'><div id="app"></div></pre>（浏览器真会创建 div 元素） - 正确做法：手动转义为
<div id="app"></div>，或用<script type="text/plain">包裹再读取.textContent - 服务端输出建议调用
htmlspecialchars()；前端动态插入必须用el.textContent = rawCode，绝不用innerHTML
脚本和 CSS 加载顺序不能错
哪怕结构、class、转义全对，加载时机或样式缺失也会导致“有代码没颜色”——看起来像高亮失败，其实是链路断了。
-
hljs.highlightAll()必须在 DOM 就绪后执行：document.addEventListener('DOMContentLoaded', () => hljs.highlightAll())，或把 script 放在</body>前 - 只引
highlight.min.js不引 CSS（如atom-one-dark.min.css），代码能显示但全是黑底白字 - v11+ 已废弃
hljs.initHighlightingOnLoad()，用了会静默失败或控制台报错 - CDN 地址要配对：
https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/styles/下的 CSS 文件名需与 JS 引入版本一致
<code> 这个结构在 CMS、Markdown 渲染器、Vue/React 生命周期里被悄悄破坏——比如编辑器自动删空格、模板引擎合并标签、SSR 输出未转义。一旦结构变形，高亮就彻底静默失效，连报错都没有。</code>
