ai生成的代码需转义后插入，否则浏览器会解析html标签导致结构破坏、高亮失效甚至xss风险；应使用script[type="text/plain"]、html实体转义或textcontent+手动highlightelement三种安全方式。
AI 生成的代码块必须转义后再塞进 <pre class="brush:php;toolbar:false;"><code></code>，否则浏览器会解析 HTML 标签、破坏结构、高亮直接失效——这不是库的问题，是 HTML 解析规则本身。</pre>
为什么 AI 输出的代码一贴就乱码或不高亮
AI（比如 Copilot、Claude、Kodezi）返回的代码通常是纯字符串，含原始 、<code>>、&。如果你直接把这串内容赋给 innerHTML 或写死在 HTML 里，浏览器会当成真实标签处理：
<div class="app"> → 被解析成一个 DOM 元素，后续内容错位 <li> <code>→ 变成空格，但&单独出现会触发实体解析错误-
<script>alert(1)</script>→ 真的执行（XSS 风险） - 最稳方案：用
<script type="text/plain"></script>包住 AI 输出，再用 JS 读取.textContent插入<pre class="brush:php;toolbar:false;"><code></code> —— 浏览器完全跳过解析，<code> 和 <code>&</code> 原样保留</code></pre> - 次选方案：对 AI 字符串做 HTML 实体转义：
→ <code><，>→>，&→&；注意&必须双写，否则会被解一次变成单个& - 慎用方案：直接用
textContent写入<code>元素，再调hljs.highlightElement(el)—— 安全但需手动触发高亮，且无法用class="html"自动识别（得显式传语言） - 类名必须是
language-xxx或lang-xxx，例如language-jsx、lang-python；html或javascript单写不生效 - 如果 AI 返回的是带 JSX/TSX 的前端代码，别用
language-javascript，优先选language-jsx或language-typescript，否则标签和类型注释不着色 - 动态插入后必须手动调
hljs.highlightElement(codeEl)；放在里的脚本若没defer，highlightAll()会找不到刚生成的节点 -
<pre class="brush:php;toolbar:false;"></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）
结果就是 <pre class="brush:php;toolbar:false;"><code></code> 里结构残缺，<code>highlight.js</code> 或 <code>Prism.js</code> 扫不到完整代码，自然不着色。</pre>
安全插入 AI 代码的三种实操方式
核心原则：让原始字符“不被解析”，只当文本显示。
highlight.js 对 AI 代码块的类名和调用要求
AI 不会自动给你加 class，你得自己补，否则 highlightAll() 可能判成 plaintext：
容易被忽略的兼容性细节
AI 输出常含现代语法（可选链、top-level await），但高亮库只管词法，不管执行——真正容易翻车的是渲染层：
