必须嵌套：保留空白符但无语义，声明代码语义但不保格式，单独使用均失效；语言类名须加在上以支持高亮。
<pre class="brush:php;toolbar:false;"></code> 和 <code><code></code> 不是“组合使用”的关系，而是分工明确的语义搭档：前者保留换行与空格，后者标记内联代码语义。直接嵌套 <code><pre class="brush:php;toolbar:false;"><code>...</code></pre> 才是现代 HTML 的标准写法，不是可选技巧，而是必须遵守的结构。
为什么不能只用 <pre class="brush:php;toolbar:false;"></code> 或只用 <code><code></code></H3>
<p>单独用 <code><pre class="brush:php;toolbar:false;"></code> 会保留格式但缺失语义——浏览器和屏幕阅读器不知道里面是“代码”，SEO 也不识别；单独用 <code><code></code> 则会忽略换行、缩进，所有内容挤成一行，根本没法看多行代码。</p>
<ul>
<li><code><pre class="brush:php;toolbar:false;"></code> 只负责“按原样渲染空白符”，不带任何语义</li>
<li><code><code></code> 只负责“声明这是代码片段”，不处理换行缩进</li>
<li>两者嵌套才是既保形又达意的最小完备方案</li>
</ul>
<H3><code><pre class="brush:php;toolbar:false;"><code></code> 嵌套时 class 和 language 属性该加在哪</H3>
<p>语言标识（如 <code>language-python</code>）和语法高亮类名（如 <code>hljs</code>）**必须加在 <code><code></code> 上**，<code><pre class="brush:php;toolbar:false;"></code> 只负责容器布局。否则 Prism.js、highlight.js 等工具无法定位目标节点，高亮失效。</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill9263" title="Html2md"><img
src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill9263" title="Html2md">Html2md</a>
<p>使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p>
</div>
<a href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<pre class='brush:php;toolbar:false;'><pre class="brush:php;toolbar:false;">
<code class="javascript">
function hello() {
console.log('world');
}
</code>
</pre>
<ul>
<li>错误写法：<code><pre class="js"><code>...</code></pre>（高亮库找不到 <code> 上的语言信息）
<pre class="brush:php;toolbar:false;"></pre> 加 tabindex="0"，让键盘用户能聚焦并复制整段代码复制按钮、行号、滚动这些功能怎么不破坏语义
所有增强功能（如复制按钮、行号栏、横向滚动）都应作为 <pre class="brush:php;toolbar:false;"></pre> 的子元素或伪元素添加，**绝不能塞进 <code> 内部**，否则污染代码内容本身，影响复制准确性，也破坏可访问性。
- 行号用
::before伪元素 + CSS 计数器实现，不插入真实 DOM 节点 - 复制按钮放在
<pre class="brush:php;toolbar:false;"></pre>外层包裹容器里（比如<figure></figure>），用 JS 绑定到<pre class="brush:php;toolbar:false;"></pre>的文本内容 - 横向滚动靠
<pre class="brush:php;toolbar:false;"> { overflow-x: auto; }</pre>，不是给<code>加
最常被忽略的一点：如果代码里含 &、、<code>>，必须先 HTML 实体转义（&、<、>），否则会被浏览器解析为标签——这个步骤发生在把代码塞进 <code> 之前，不是 CSS 或 JS 能补救的。
