AI生成的代码需转义后插入<pre><code>，否则浏览器会解析HTML标签导致结构破坏、高亮失效甚至XSS风险；应使用script[type="text/plain"]、HTML实体转义或textContent+手动highlightElement三种安全方式。
AI 生成的代码块必须转义后再塞进 <pre><code>，否则浏览器会解析 HTML 标签、破坏结构、高亮直接失效——这不是库的问题，是 HTML 解析规则本身。
为什么 AI 输出的代码一贴就乱码或不高亮
AI（比如 Copilot、Claude、Kodezi）返回的代码通常是纯字符串，含原始 <、>、&。如果你直接把这串内容赋给 innerHTML 或写死在 HTML 里，浏览器会当成真实标签处理：
-
<div class="app">→ 被解析成一个 DOM 元素，后续内容错位 -
&单独出现会触发实体解析错误 -
<script>alert(1)</script>→ 真的执行（XSS 风险）
结果就是 <pre><code> 里结构残缺，highlight.js 或 Prism.js 扫不到完整代码，自然不着色。
安全插入 AI 代码的三种实操方式
核心原则：让原始字符“不被解析”，只当文本显示。
立即学习“前端免费学习笔记（深入）”；
- 最稳方案：用
<script type="text/plain">包住 AI 输出，再用 JS 读取.textContent插入<pre><code>—— 浏览器完全跳过解析，<和&原样保留 - 次选方案：对 AI 字符串做 HTML 实体转义：
<→，<code>>→>，&→&；注意&必须双写，否则会被解一次变成单个& - 慎用方案：直接用
textContent写入<code>元素，再调hljs.highlightElement(el)—— 安全但需手动触发高亮，且无法用class="html"自动识别（得显式传语言）
highlight.js 对 AI 代码块的类名和调用要求
AI 不会自动给你加 class，你得自己补，否则 highlightAll() 可能判成 plaintext：
- 类名必须是
language-xxx或lang-xxx，例如language-jsx、lang-python；html或javascript单写不生效 - 如果 AI 返回的是带 JSX/TSX 的前端代码，别用
language-javascript，优先选language-jsx或language-typescript，否则标签和类型注释不着色 - 动态插入后必须手动调
hljs.highlightElement(codeEl)；放在<head>里的脚本若没defer，highlightAll()会找不到刚生成的节点
容易被忽略的兼容性细节
AI 输出常含现代语法（可选链、top-level await），但高亮库只管词法，不管执行——真正容易翻车的是渲染层：
-
<pre>默认不换行，长行代码会横向溢出；加 CSS：white-space: pre-wrap;+overflow-x: auto; - 某些主题（如
atom-one-dark）对language-html的属性值着色很淡，和背景接近；换github-dark或vs2015主题更稳妥 - AI 有时返回带 ANSI 颜色码的终端输出（如
\x1b[32mOK\x1b[0m），这种不是 HTML 代码，highlight.js完全不处理——得用专门的 ANSI-to-HTML 库（如ansi-to-html）
