必须同时使用 和 标签： 保留空格、制表符和换行， 提供代码语义；仅用其一会导致格式丢失或语义缺失。

单用

 标签无法保留空格和制表符

code 是行内元素，浏览器默认按 <code>white-space: normal 渲染：连续空格、制表符（\t）、换行符（\n）全被压缩成单个空格。你写：

<code>function foo() {<br>  return 42;<br>};</code>

实际渲染为：function foo() { return 42; };——所有缩进和换行消失，语义断裂。

必须嵌套

 才能真正保留格式

pre 提供 white-space: pre 行为，是保留空白符的基础设施；code 则负责语义标注（表示这是计算机代码）。二者缺一不可：

• pre 确保空格、\t、\n 原样输出
• code 告诉辅助技术/搜索引擎“这是代码”，利于可访问性和 SEO
• 仅用 pre 会丢失语义；仅用 code 会丢失格式

正确写法（顶格，无前置缩进）：

<pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;"><code class="js">function foo() {<span></span><br>  return 42;<br>}</code>

顶格书写 + 避免 HTML 源码缩进

pre

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

会把 HTML 源码中标签内的换行和空格也当作文本节点渲染。常见错误：

• 编辑器自动缩进 pre 内容 → 左侧多出 2–4 个空格
• pre 被包裹在 div 中且换行后缩进 → 首行缩进被渲染
• 后端模板未 trim() 输出字符串 → 开头带换行或空格

务必让 <pre class="brush:php;toolbar:false;"></pre> 的开始标签紧贴第一行代码，例如：

<div class="snippet"><pre class="brush:php;toolbar:false;"><code>console.log("hello");</code>