单用 <code> 标签显示 XML 一定会失败，因为它是行内元素，不转义 < > 等字符，浏览器会将其解析为 HTML 标签，导致内容丢失；必须配合 <pre> 并手动将 < > & 转义为 &。
直接用 <code> 标签包裹 XML 内容会出错——浏览器会尝试解析其中的 < 和 >，导致标签被吃掉、内容消失，甚至破坏整个页面结构。必须转义 + 正确嵌套，否则 XML 一粘就废。
为什么单用 <code> 显示 XML 一定会失败
<code> 是行内元素，不保留换行、不处理 HTML 字符、不阻止解析。哪怕你写的是：
<code><root><item id="1">test</item></root></code>
浏览器也会把 <root> 当成真实 HTML 标签去解析，结果只显示 “test”，其余全丢。这不是样式问题，是语义和解析层面的根本冲突。
-
<code>不做 HTML 实体转义，<、>、&必须手动替换成、<code>>、& - XML 中的属性值（如
id="1"）里的双引号也得保留，但若没转义外层引号，HTML 解析器会提前截断 - 多行缩进和换行在
<code>里会被压成单行空格，XML 结构彻底不可读
正确做法：必须用 <pre><code> 嵌套 + 手动转义
真正能安全展示 XML 的最小合法结构是 <pre><code>，前者保格式，后者定语义。但前提是 XML 字符串本身已转义。
立即学习“前端免费学习笔记（深入）”；
- 先对原始 XML 字符串执行 HTML 实体转义：所有
<→，<code>>→>，&→& - 再把转义后的字符串放进
<pre><code>中，例如：
<pre><code><?xml version="1.0"?> <config> <host>localhost</host> <port>8080</port> </config></code></pre>
注意：<pre> 会保留缩进和换行，<code> 告诉搜索引擎“这是代码”，二者缺一不可。
常见误操作与替代方案
有人试过 <xmp> 或 <textarea readonly>，这些虽能“显示出来”，但存在严重问题：
-
<xmp>是废弃标签，现代浏览器虽兼容但无语义、不被搜索引擎识别为代码 -
<textarea>是表单控件，样式难统一，且无法用 CSS 精确控制字体/背景/滚动行为 - 用 JavaScript 的
innerText赋值看似自动转义，但它会把所有空白（包括换行）压缩成单空格，XML 格式全毁 - 直接把未转义 XML 放进
<pre>（没套<code>）也不行：搜索引擎无法区分这是代码还是普通预格式文本，SEO 和可访问性受损
如果想加语法高亮，<code> 本身做不到
<code> 标签没有任何高亮能力，它只是语义容器。要实现颜色区分（比如标签名蓝色、属性绿色、值橙色），必须引入 Prism.js 或 highlight.js，并确保它们作用在 <pre><code> 结构上，且语言类型设为 language-xml：
<pre><code class="xml"><root>...</code></pre>
关键点：高亮库只认 <code> 的 class，不认 <pre>；但 class 必须加在 <code> 上，不能加在 <pre> 上；而且转义步骤一步都不能跳——高亮库不会帮你转义 HTML 字符。
最容易被忽略的是：XML 中的注释 <!-- comment -->、CDATA 段、命名空间前缀（如 xmlns:xsi），这些在转义时都必须原样保留，否则高亮逻辑可能崩或渲染异常。
