innerHTML不能直接用于标签，因为它会触发HTML解析导致代码执行而非显示；正确做法是用textContent插入已转义的纯文本，再交由高亮库处理。
直接往 <code> 标签里塞 HTML 字符串（比如用 innerHTML）会把尖括号解析成真实标签，代码就“执行”了，而不是显示出来——这不是插入代码，是执行代码。
为什么 innerHTML 不能直接用于 <code> 标签
<code> 是语义化容器，不是渲染沙盒。浏览器看到 innerHTML = '<div>hello</div>'，就会真去创建 <div> 节点，而不是显示那串文本。<ul>
<li>常见错误现象：插入后页面多出一个 div，或者控制台报错“Uncaught DOMException: Failed to execute 'insertBefore' on 'Node'”，因为解析出的节点结构不合法</li>
<li>根本原因：<code>innerHTML 总是触发 HTML 解析，而 <code> 内容本应作为纯文本呈现
textContent 或 innerText
textContent 是最安全的插入方式
它跳过 HTML 解析，原样输出字符串，且自动处理转义，不会触发 XSS、不破坏事件、不重排 DOM。
- 使用场景：展示用户提交的代码片段、文档示例、调试日志等需要“所见即所得”的内容
- 实操建议：
— 获取目标<code>元素，如const el = document.querySelector('pre code')
— 对原始代码字符串调用el.textContent = codeStr（无需手动转义）
— 若需保留换行和缩进，外层<pre class="brush:php;toolbar:false;"></pre>必须存在，否则空格会被浏览器合并 - 注意：
innerText受 CSS 影响（如display: none的内容不计入），textContent更可靠
需要高亮？别动 <code> 的 innerHTML
语法高亮库（如 Prism、highlight.js）内部也是基于 textContent 读取原始内容，再用 innerHTML 渲染带 <span class="token"></span> 的高亮结构——但这是库自己做的，你不要提前往 <code> 里写 HTML。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 错误操作：
codeEl.innerHTML = '<span class="keyword">function</span>() {...}'→ 高亮库会把它当原始代码再解析一遍，结果双重转义 - 正确流程：
— 确保<code>里只有干净的纯文本（用textContent设置）
— 然后调用Prism.highlightElement(codeEl)让它自己生成高亮 DOM
— 若动态插入，高亮必须在插入后立即执行，否则 DOM 尚未更新 - 兼容性提示：某些旧版 highlight.js 版本要求
<code>必须有class属性指定语言，如class="js"
从外部文件加载代码时容易漏掉的步骤
用 fetch 加载 .js/.html 文件内容再插入，看似简单，但常因路径、编码或时机出错。
- 常见错误现象：插入后显示乱码（）、空白、或整个
<code>消失 - 关键检查点：
— 确保 fetch 的 URL 是相对路径且文件存在（404 时response.text()仍会 resolve，但内容为空）
— 服务端返回的 Content-Type 必须是text/plain或text/html，否则某些浏览器拒绝解析
— 插入前确认目标<code>元素已挂载，避免querySelector返回null - 最小可行示例：
fetch('example.js').then(r => r.text()).then(txt => {<br> const el = document.querySelector('pre code');<br> if (el) el.textContent = txt;<br>});
真正难的不是“怎么插”，而是插完之后要不要高亮、要不要支持复制、要不要响应式折行——这些都得在 <pre class="brush:php;toolbar:false;"></pre> 和 <code> 的 CSS 与 JS 协同下完成，光靠一次 textContent 赋值解决不了。
