<code>是行内语义标签，仅允许包裹文本及其他行内元素，禁止嵌套<div>等块级元素；多行代码必须用<pre><code>结构，前者保留格式，后者声明语义，且原始代码需转义特殊字符、class名须严格匹配高亮库要求。

code 标签里不能塞

 或块级元素</H3>
<p><pre class="brush:php;toolbar:false;"> 是行内语义标签，只允许包含文本和其他行内内容。一旦往里面塞 <pre class="brush:php;toolbar:false;">、<div>、<p>、<ul> 这类块级元素，浏览器会直接“修复” DOM：把 <code> 提前闭合，块级内容被挤到外面，导致结构断裂、样式失效、JS 获取内容异常。</p>
<p>常见错误写法：<code><code><pre>console.log(1)</pre></code></p>
<p>结果不是你想要的代码块，而是解析成：<code><code></code><pre>console.log(1)</pre><code></code></p>
<ul>
<li><code> 只能包裹纯文本或行内标签（如 <strong>、<em>、<span>）</li>
<li>想展示多行、带缩进的代码？必须用 <pre class='brush:php;toolbar:false;'> 结构，而不是反过来</li>
<li>HTML5 虽然放宽了部分嵌套限制，但 <code> 的内容模型没变——W3C 仍定义它为 <a href="https://www.php.cn/link/d7ccb841e1c86abdc1d1d6e6bacb6f17">phrasing content only</a></li>
</ul>

<H3>pre 标签必须在外层，code 标签必须在内层</H3>
<p>所有主流高亮库（Prism.js、highlight.js）、屏幕阅读器、搜索引擎和 HTML 规范，都只认 <pre class="brush:php;toolbar:false;"><code> 这一固定嵌套顺序。颠倒成 <code><pre class="brush:php;toolbar:false;"> 是非法嵌套，浏览器会自动修正 DOM，造成格式崩坏、高亮不触发、辅助技术读作“预格式化文本”而非“Python 代码”。</p><div class="aritcle_card flexRow">
                                                        <div class="artcardd flexRow">
                                                                <a class="aritcle_card_img" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
                                                                                src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher"  onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
                                                                <div class="aritcle_card_info flexColumn">
                                                                        <a href="/xiazai/skill6712" title="Wechat HTML Publisher">Wechat HTML Publisher</a>
                                                                        <p>直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
                                                                </div>
                                                                <a href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
                                                        </div>
                                                </div><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><pre class="brush:php;toolbar:false;"> 负责保留换行、空格、制表符；<code> 负责声明语义：“这是计算机源码”</li>
<li>单独用 <pre class="brush:php;toolbar:false;">：格式对，但语义缺失 → 高亮库默认不扫描它，SEO 不识别为代码片段</li>
<li>单独用 <code>：语义对，但它是行内元素 → 所有换行和多余空格被压缩成单个空格，Python 函数直接塌成 <code>def hello():print("Hi")

正确写法只有这一种：

<pre class="brush:php;toolbar:false;">function foo() { return true; }

原始代码含 、& 必须先实体化

如果没转义，浏览器在 HTML 解析阶段就把

当成真实标签执行，而不是显示为字符串。后果很直接：DOM 提前截断、后续内容错位、

 整体失效。</p>
<ul>
<li>错误示例：<pre class="brush:php;toolbar:false;"><code><div id="app"></div>

→ 浏览器尝试解析

，导致 被提前闭合 <li>正确做法：把 ，> 替换成 <code>>，& 替换成 &

推荐用工具处理：Node.js 用 he.escape()，PHP 用 htmlspecialchars()，前端渲染前用 DOMPurify.sanitize() 配合 SAFE_FOR_XML: true

别依赖编辑器自动转义——很多 Markdown 渲染器或 CMS 在插入代码块时跳过这步

class 名必须匹配高亮库要求

即使

<pre class="brush:php;toolbar:false;"> 结构完全正确、字符也全转义了，如果 class 写错，Prism.js 或 highlight.js 依然不会生效。它们靠 class 属性识别语言类型和触发高亮逻辑。</p>
<ul>
<li>Prism.js 认 <code>class="javascript"

或 class="lang-js"，不认 class="js" 或 class="javascript"

highlight.js 认 class="hljs python" 或 class="python"，旧版还支持 class="python"，但新版本已弃用

不要手写 class：用 Prism.js 就统一用 language-xxx 前缀；用 highlight.js 就查官网当前文档确认格式

注意大小写：language-HTML 和 language-html 在多数库中效果不同

实际排版时最容易被忽略的，是「原始代码转义」和「class 命名一致性」这两步——结构对了，但没转义或 class 拼错，整段代码照样白搭。