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