正确做法是必须嵌套：...，前者声明预格式化语义，后者标明代码内容类型；单独用会丢失代码语义、影响高亮与可访问性，且HTML特殊字符须转义以防DOM错乱。
只用 标签写多行代码会塌成一行</H3>
<p>浏览器把 <code> 当作行内元素处理，所有换行、缩进、多余空格全被合并——哪怕你写了 4 层缩进的 Python 函数，最终渲染出来就是一整行，括号错位、逻辑难辨。</p>
<p>常见错误现象：</p>
<ul>
<li>代码块看起来“挤在一起”，缩进消失</li>
<li>JS 中的 <code>{ 和 } 不对齐，调试时眼花
正确做法：
- 单个标识符（如
useState、fetch()、margin-left）用标签包裹</li> <li>任何含换行或缩进的代码片段，绝不能只用 <code>
- 哪怕只有两行，也得走
<pre class="brush:php;toolbar:false;"> 嵌套路径</li> </ul> <H3><pre class="brush:php;toolbar:false;"> 单独用会丢失“这是代码”的语义</H3> <p><pre class="brush:php;toolbar:false;"> 确实保留空格和换行，但它只说自己是“预格式化文本”，不声明内容类型。搜索引擎可能当普通段落索引，屏幕阅读器读作“一段对齐文字”，而不是“JavaScript 函数”。</p><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> <p>后果很实际：</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> <ul> <li>语法高亮库（如 <code>highlight.js）默认不扫描纯，直接跳过</li> <li>CSS 写 <code>pre { background: #f0f0f0; }</code>，结果把日志、ASCII 图、诗歌全染了色</li> <li>无障碍工具无法区分代码和普通文本，影响可访问性评分</li> </ul> <p>所以必须嵌套：<pre class='brush:js;toolbar:false;'>...，是语义锚点，<pre class="brush:php;toolbar:false;"> 是格式容器，缺一不可。</p> <H3>HTML 特殊字符不转义会导致 DOM 错乱</H3> <p>如果代码里含 <code><
、>、&，又没做 HTML 实体转义，浏览器会在解析阶段直接当成标签执行。比如这段：<div id="app"></div>
不转义就写成
<div id="app"></div>，浏览器真会渲染一个空div，后续所有内容偏移、截断甚至 XSS 风险。安全写法：
- 服务端输出统一调用
htmlspecialchars()（PHP）或类似转义函数 - 前端 JS 动态插入时，用
textContent赋值，别用innerHTML - 手动转义对照：
→ <code>，<code>>→>，&→&
缩进用 Tab 还是空格？CSS 怎么防长行溢出
Tab 在不同环境宽度不一致（4px / 8px / 某些 CMS 自动转空格），导致代码块首行缩进错位、对齐崩坏。而
对源码缩进极其敏感——HTML 模板里 <pre class="brush:php;toolbar:false;"> 如果缩进写，那些空格也会被渲染出来。 <p>实操要点：</p>
- 缩进一律用空格，推荐 2 或 4 个，全文档统一
标签从 HTML 行首开始写，或用注释消除缩进：<code><!--<pre class="brush:php;toolbar:false;"><code>--></code>
- CSS 必加三句：
pre { overflow-x: auto; }、pre code { display: block; }、code { font-family: ui-monospace, 'SFMono-Regular', monospace; } - 别信浏览器默认样式，
pre在 Safari 和 Firefox 里 padding/margin 差异极大，必须显式重置
最易忽略的是：没设
pre code { display: block; }，code默认是行内元素，长代码行会撑破容器或被截断，根本没法横向滚动。 - 服务端输出统一调用
