标签不自动转义，因它仅是语义标记，浏览器仍会解析其中的、&等字符；必须手动按顺序转义&、、"才能安全显示html代码。

直接在 <code> 标签里写 <img> 会导致浏览器解析它，不是显示代码，而是试图渲染图片——必须转义。

为什么 <code> 标签本身不自动转义

<code> 只是语义标签，告诉浏览器“这段是代码”，但不改变 HTML 解析行为。浏览器仍会照常处理其中的 、<code>>、& 等字符。

• 常见错误现象：页面中突然出现空白图、控制台报 Failed to load resource、<code><div>hello</div> 渲染成真实 <div> 块<li>根本原因：HTML 解析器在构建 DOM 时，不区分你用的是 <code><pre class="brush:php;toolbar:false;"></pre> 还是 <code>，只要看到 就开始匹配标签
• 所以 <code> 必须和转义配合使用，不能单独依赖它“防解析”

手动转义的 4 个必须步骤（顺序不能错）

转义顺序错误会导致二次解析，比如把 先转成 <code><，再把 & 转成 &，结果变成 —— 页面上就真显示 <code>< 了。

• 第一步：先把所有 & 替换为 &（这是最危险的，必须最先做）
• 第二步：把所有 替换为 <code><
• 第三步：把所有 > 替换为 >
• 第四步：把所有 " 替换为 "（仅当字符串会被塞进双引号属性时才需这步，但建议统一做）

例如原始 HTML：<img src="x.jpg" alt="A & B"> → 转义后应为：<img src="x.jpg" alt="A & B">


html-deploy
使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。
下载

用 textContent 替代手动替换更可靠

前端动态插入代码片段时，靠正则替换容易漏或错，推荐用 DOM API 借力浏览器自身转义逻辑。

• 创建临时元素：const temp = document.createElement('div')
• 赋值 textContent：temp.textContent = '<img src="x.jpg">'
• 取回已转义内容：temp.innerHTML → 得到 <img src="x.jpg">
• 再把结果塞进 <code> 或 <pre class="brush:php;toolbar:false;">&lt;code&gt;&lt;/code&gt; 里</pre>

注意：不要用 innerText，它受 CSS 影响；也不要直接设 innerHTML 到目标节点，那等于又放回解析流程。

服务端模板里插值要确认是否默认转义

不同模板引擎对变量插值的默认行为差异极大，同一行 {{ html_snippet }} 在不同环境可能一个安全、一个直接 XSS。

• Django / Jinja2 / Twig / Vue（{{ }}）：默认转义，安全
• EJS： 不转义， 转义 —— 写错一个符号就破防
• Handlebars：{{ }} 转义，{{{ }}}} 不转义
• PHP 原生：<?php echo $html; ?> 完全不转义，必须手动调 htmlspecialchars($html, ENT_QUOTES)

上线前务必查清模板层策略，别假设“框架会兜底”。尤其当数据来自用户输入或第三方 API 时，& 和 漏一个，XSS 就成立。