innerHTML不能直接用于<code>标签，因为它会触发HTML解析导致代码执行而非显示；正确做法是用textContent插入已转义的纯文本，再交由高亮库处理。
直接往 <code> 标签里塞 HTML 字符串（比如用 innerHTML）会把尖括号解析成真实标签，代码就“执行”了，而不是显示出来——这不是插入代码，是执行代码。
为什么 innerHTML 不能直接用于 <code> 标签
<code> 是语义化容器，不是渲染沙盒。浏览器看到 innerHTML = '<div>hello</div>'，就会真去创建 <div> 节点，而不是显示那串文本。
- 常见错误现象：插入后页面多出一个 div，或者控制台报错“Uncaught DOMException: Failed to execute 'insertBefore' on 'Node'”，因为解析出的节点结构不合法
- 根本原因：
innerHTML总是触发 HTML 解析，而<code>内容本应作为纯文本呈现 - 正确做法：必须先对原始字符串做 HTML 实体转义，再赋给
textContent或innerText
textContent 是最安全的插入方式
它跳过 HTML 解析，原样输出字符串，且自动处理转义，不会触发 XSS、不破坏事件、不重排 DOM。
- 使用场景：展示用户提交的代码片段、文档示例、调试日志等需要“所见即所得”的内容
- 实操建议：
— 获取目标<code>元素，如const el = document.querySelector('pre code')
— 对原始代码字符串调用el.textContent = codeStr（无需手动转义）
— 若需保留换行和缩进，外层<pre>必须存在，否则空格会被浏览器合并 - 注意：
innerText受 CSS 影响（如display: none的内容不计入），textContent更可靠
需要高亮？别动 <code> 的 innerHTML
语法高亮库（如 Prism、highlight.js）内部也是基于 textContent 读取原始内容，再用 innerHTML 渲染带 <span class="token"> 的高亮结构——但这是库自己做的，你不要提前往 <code> 里写 HTML。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 错误操作：
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> 和 <code> 的 CSS 与 JS 协同下完成，光靠一次 textContent 赋值解决不了。
