HTML 代码显示 code 与 pre 的区别-html教程-PHP中文网

正确做法是必须嵌套：...，前者声明预格式化语义，后者标明代码内容类型；单独用会丢失代码语义、影响高亮与可访问性，且HTML特殊字符须转义以防DOM错乱。

html 代码显示 code 与 pre 的区别

只用

 标签写多行代码会塌成一行

浏览器把 当作行内元素处理，所有换行、缩进、多余空格全被合并——哪怕你写了 4 层缩进的 Python 函数，最终渲染出来就是一整行，括号错位、逻辑难辨。

常见错误现象：

代码块看起来“挤在一起”，缩进消失
JS 中的 { 和 <code>} 不对齐，调试时眼花
复制到编辑器里还要手动重排格式

正确做法：

单个标识符（如 useState、fetch()、margin-left）用
```
 标签包裹
```
任何含换行或缩进的代码片段，绝不能只用

哪怕只有两行，也得走

<pre class="brush:php;toolbar:false;"> 嵌套路径

 单独用会丢失“这是代码”的语义

 确实保留空格和换行，但它只说自己是“预格式化文本”，不声明内容类型。搜索引擎可能当普通段落索引，屏幕阅读器读作“一段对齐文字”，而不是“JavaScript 函数”。
<p>后果很实际：</p>

语法高亮库（如 highlight.js）默认不扫描纯 <pre class="brush:php;toolbar:false;">，直接跳过</pre>
CSS 写 pre { background: #f0f0f0; }，结果把日志、ASCII 图、诗歌全染了色
无障碍工具无法区分代码和普通文本，影响可访问性评分

所以必须嵌套：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

...

，

、>、&，又没做 HTML 实体转义，浏览器会在解析阶段直接当成标签执行。比如这段：

服务端输出统一调用 htmlspecialchars()（PHP）或类似转义函数
前端 JS 动态插入时，用 textContent 赋值，别用 innerHTML
手动转义对照： → <code>，<code>> → >，& → &

缩进用 Tab 还是空格？CSS 怎么防长行溢出

Tab 在不同环境宽度不一致（4px / 8px / 某些 CMS 自动转空格），导致代码块首行缩进错位、对齐崩坏。而

 对源码缩进极其敏感——HTML 模板里 <pre class="brush:php;toolbar:false;"> 如果缩进写，那些空格也会被渲染出来。
<p>实操要点：</p>

缩进一律用空格，推荐 2 或 4 个，全文档统一
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 默认是行内元素，长代码行会撑破容器或被截断，根本没法横向滚动。