必须是嵌套结构：pre为外层容器保留格式，code为内层标签声明语义；颠倒或单独使用会导致dom修正、高亮失效、无障碍支持缺失；class须加在code上并匹配高亮库要求，代码中、&须转义，pre需css设置white-space: pre-wrap和overflow-x: auto。

pre 必须是外层容器，code 必须嵌套在内部

浏览器解析时，<code><pre class="brush:php;toolbar:false;">...</pre> 是非法结构，HTML 解析器会自动修正 DOM：把 <pre class="brush:php;toolbar:false;"></pre> 提到外面、<code> 孤立成行内元素，最终导致缩进丢失、高亮不触发、屏幕阅读器读作“普通文本”而非“代码”。唯一被 HTML 规范、Prism.js、highlight.js 和 SEO 工具共同认可的结构是 <pre class="brush:php;toolbar:false;">&lt;code&gt;...&lt;/code&gt;</pre>。

class 属性必须加在 code 标签上，且命名要匹配高亮库

高亮库靠 <code> 的 class 判断语言类型，写错位置或格式等于没写：

• ✅ 正确：<code class="javascript">、<code class="lang-python">
• ❌ 错误：<pre class="javascript">&lt;code&gt;&lt;/code&gt;（class 在 pre 上）、&lt;code&gt;&lt;code class=&quot;js&quot;&gt;&lt;/code&gt;（highlight.js 默认不认简写）、&lt;code&gt;&lt;code lang=&quot;js&quot;&gt;&lt;/code&gt;（部分库不支持 lang 属性）&lt;/code&gt;&lt;/code&gt;</pre>

原始代码中的 、& 必须转义，否则会被浏览器解析为标签

比如直接写 <div>hello</div>，浏览器会尝试渲染这个 <div>，可能导致 DOM 错乱或脚本执行。正确做法是先做 HTML 实体转义： <ul> <li><code> → <code><

> → >

& → &

服务端输出前编码，或前端用 textContent 动态插入，比正则替换更可靠。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

pre 默认不换行也不滚动，需手动加 CSS 控制显示

<pre class="brush:php;toolbar:false;"></pre> 原生行为是强制保留空格+换行，但超出容器宽度时既不折行也不出现横向滚动条，用户只能拖拽查看——体验极差。必须加一行 CSS 修复：

pre {
  white-space: pre-wrap;
  overflow-x: auto;
}

注意：别只写 white-space: pre-line，它会吃掉缩进；也别漏掉 overflow-x: auto，否则长行依然不可见。

嵌套顺序、类名位置、字符转义、CSS 补丁——这四点缺一不可。漏掉任意一个，轻则高亮失效，重则页面结构错乱。