标签不能安全显示源码，因其仅具语义性而不阻止html解析；必须先对、"、&四字符实体转义，或用textcontent赋值，再嵌入中。
<code> 标签本身不能安全显示 <script></script> 源码——直接放进去，浏览器会解析并执行它，甚至触发 XSS。
为什么 <code> 里写 <script></script> 会出事
因为 <code> 只是语义标签，不阻止 HTML 解析。只要内容里有未转义的 <script></script>，浏览器就会当成真实脚本加载执行。
- 常见错误现象：
<code><script>alert(1)</script>页面一打开就弹窗 - 更危险的是：
<code><script src="malicious.js"></script>会发起外部请求 - 哪怕只是展示一段带
的比较逻辑（如 <code>x ），漏转义也会导致后续 HTML 结构错乱
正确做法：必须先转义，再塞进 <pre class="brush:php;toolbar:false;"><code></code></pre>
多行 <script></script> 源码属于块级代码片段，必须用 <pre class="brush:php;toolbar:false;"><code></code> 组合，并确保所有 HTML 特殊字符已实体化。</pre>
- 手动转义四类字符：
→ <code><，>→>，"→"，&→& - 别只转
和 <code>>，漏掉&会导致<被二次解析成 - 示例原始脚本：
<script>console.log("Hello & World");</script> - 转义后应为：
<script>console.log("Hello & World");</script> - 再放进 HTML：
<pre class="brush:php;toolbar:false;"><code class="html"><script>...</script></code></pre>
用 JavaScript 动态插入更可靠
手动转义容易漏，尤其面对用户输入或后端返回的原始字符串时，推荐用 textContent 自动完成转义。
- 不要用
innerHTML设置含 HTML 字符的字符串，否则又绕回解析风险 - 正确写法：
document.querySelector('code').textContent = '<script>fetch("/api")</script>'; - 这样浏览器原样显示字符串，不解析、不执行、不触发事件
- 如果需要语法高亮，先设
textContent，再调用hljs.highlightElement(el)（highlight.js）或Prism.highlightElement(el)
别踩这些坑
很多人以为加个 <code> 就万事大吉，结果上线后发现脚本被悄悄执行了。
- 误用
<code>包裹多行内容：它不保留换行缩进，<code>function() {<br> return true;渲染出来是一整行 - 混用
textContent和innerHTML：先用textContent设值，又用innerHTML改同一元素，后者会覆盖并重新解析 - 依赖
<pre class="brush:php;toolbar:false;"><code></code> 自动转义：它只保留格式，不处理内容，该解析还是解析</pre> - 给
<code>加white-space: pre：破坏段落流，长代码溢出容器，且基线对不齐
最稳妥的路径就一条：原始字符串 → 实体转义（或 textContent）→ 塞进 <pre class="brush:php;toolbar:false;"><code></code> → 如需高亮，再交给 highlight 库处理。中间任何跳步，都可能让 <code><script></script></code> 源码从“被展示”变成“被执行”。</pre>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
