必须用<pre><code>嵌套结构并做HTML实体转义：<code>不保留空白，<pre>不标识代码语义，嵌套顺序错误或缺一都会导致格式丢失、解析异常或高亮失效。
直接说结论：想让 HTML 正确展示带缩进、换行、特殊符号（比如 <、>）的代码或日志，必须用 <pre><code> 嵌套结构，并对原始内容做 HTML 实体转义——缺一不可。
为什么单用 <pre> 或 <code> 都会出问题
常见错误现象：写了一段 Python 函数，缩进四格、换三行，浏览器里却塌成一行；复制出来全是平的，没法直接粘贴运行。
-
<code>是行内元素，浏览器默认把所有换行符、制表符、连续空格压缩成单个空格 -
<pre>虽保留格式，但不声明“这是代码”，搜索引擎当普通文本索引，语法高亮库（如 Prism.js）通常跳过它 - 嵌套顺序不能反：
<code><pre>是无效结构，部分浏览器容错但高亮和无障碍支持大概率失效
正确写法：必须 <pre><code> 嵌套 + 实体转义
服务端渲染时，原始代码里的 <、>、& 必须转成 、<code>>、&；前端动态插入则优先用 textContent 而非 innerHTML。
- 静态 HTML 示例：
<pre><code class="html"><div id="app"></div></code></pre>
- 错误示例：
<pre><code><div id="app"></div></code></pre>—— 浏览器会真去解析<div>，导致标签提前闭合或 DOM 错乱 - 模板中若用 Nunjucks / Jinja2 / EJS 等，调用
escape()或htmlspecialchars()类函数
CSS 样式必须手动加，不能依赖默认
不设样式的话，<pre><code> 在某些设备上可能背景透明、字体非等宽、长行直接溢出容器。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 关键 CSS 规则：
pre code { display: block; font-family: ui-monospace, 'SFMono-Regular', monospace; background: #f5f5f5; padding: 1rem; overflow-x: auto; white-space: pre; } -
display: block是为了确保<code>按块级渲染，否则横向滚动条可能不生效 - HTML 源码中
<pre>标签本身的缩进也会被渲染——如果模板里把它缩进了 4 格，首行就多出 4 个空格；要么从行首写，要么用注释消除：<!--<pre><code>-->
行号、高亮、复制功能不是 <pre><code> 自带的
HTML5 不提供原生行号或语法高亮。这些都得靠额外手段补全，且容易踩坑。
- 行号推荐用 CSS 计数器：
counter-reset: line+code::before，但需配合white-space: pre和定位 - 高亮库（如 highlight.js）只扫描
<pre><code class="js">这种结构，class 值必须匹配语言别名（js、python），且不能漏掉<pre> - 复制按钮要绑定到
<pre>容器，取的是textContent，不是 innerHTML —— 否则会把复制成字面量
最易被忽略的一点：你看到的“格式化效果”，其实一半靠 HTML 结构，一半靠 CSS 控制，还有一半靠内容是否真正包含换行符和空格——如果后端返回的是 "line1\nline2"（字符串里的反斜杠 n），<pre> 也只会照显示反斜杠和字母 n，不会自动解析成换行。
