Python缩进是语法核心，用空白字符标识代码块层级，同一代码块必须缩进一致，推荐4空格、禁混Tab与空格，缩进错误直接引发IndentationError。
单用 标签写多行代码一定会塌成一行</H3>
<p>这不是 bug，是规范行为。<code> 是行内元素，浏览器默认把换行符、制表符、连续空格全压缩成一个空格。哪怕你手敲了 4 层缩进的 Python 函数，最终渲染出来就是 function foo() { return true; } 这样一整行，括号错位、逻辑难辨。</p>
<ul>
<li>复制到编辑器里也是平的，没法直接运行</li>
<li>屏幕阅读器读作普通文字，不会提示“这是一段 JavaScript 代码”</li>
<li>语法高亮库（如 Prism.js、highlight.js）通常忽略没嵌在 <pre class="brush:php;toolbar:false;"> 里的 <code></li>
</ul>
<H3>必须用 <pre class='brush:php;toolbar:false;'> 嵌套，顺序不能颠倒</H3>
<p><pre class="brush:php;toolbar:false;"> 负责保留换行、缩进和空格；<code> 负责声明“这是代码”，提供语义、影响 SEO 和无障碍访问。两者缺一不可，且嵌套顺序必须是 <pre class="brush:php;toolbar:false;"> 包 <code>，反过来或漏嵌都会出问题。</p>
<ul>
<li>错误写法：<code>function foo() {\n return true;\n} → 渲染为单行
function foo() {\n return true;\n} → 搜索引擎当普通文本索引，高亮库不识别语言<pre class="brush:php;toolbar:false;">function foo() {
return true;
}HTML 特殊字符必须转义，否则解析失败
只要原始代码含 、<code>>、&，就必须实体化。否则浏览器会在解析阶段就把它当标签执行，不是“展示代码”，而是“运行代码”。
- 例如：
<div id="app"></div>直接塞进<code>，<div> 会被解析，后续内容错位甚至整个 <pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;"> 提前闭合</li> <li>服务端渲染建议统一调用 <code>htmlspecialchars()</pre> 或等效函数 <li>前端动态插入时优先用 <code>textContent，别用innerHTML - 必须设等宽字体：
font-family: ui-monospace, 'SFMono-Regular', monospace; - 必须加
pre code { display: block; }，否则仍按行内处理，横向滚动失效</li> <li>必须设 <code>overflow-x: auto
防止长行溢出容器 标签本身的缩进也会被渲染：如果模板里把 <pre class="brush:php;toolbar:false;"> 写在缩进后，首行就会多出几个空格；要么让标签从行首开始，要么用注释消除：<code><!--<pre class="brush:php;toolbar:false;"><code class="js">--></code>
CSS 必须显式重置，否则代码块可能不可见
不加样式，代码块在不同设备上可能完全不可见、无背景、无滚动、字体非等宽——尤其移动端容易被忽略。
立即学习“前端免费学习笔记（深入）”；
标签在源码中的物理位置——它前面的空白字符（空格、换行、制表符）全会被渲染出来，导致代码块第一行开头莫名缩进。这个细节在 SSR 或静态生成中特别隐蔽，调试时往往卡很久才意识到不是 CSS 问题，而是 HTML 结构本身带了不可见空格。
