应使用textContent安全替换代码文本，若用Prism.js等高亮库，须调用highlightElement()重刷；动态创建需同时包含pre和code标签，确保样式与高亮正常。
直接修改 <code> 标签的文本内容会丢失语法高亮
很多用户以为用 textContent 或 innerHTML 改完就完事了，结果发现原本带 class 的高亮样式没了，或者 <pre><code> 里嵌套的 HTML 实体被转义/未转义，显示异常。根本原因是：多数语法高亮库（如 Prism.js、highlight.js）把原始代码字符串存在 data-* 属性或 DOM 外部缓存里，DOM 变了但高亮没重绘。
- 先确认你是否用了高亮库——检查
<code>标签是否有class="js"或类似属性 - 如果用了，不能只改
textContent，必须触发重新高亮 - 如果没用高亮库，改
textContent最安全；改innerHTML要小心 XSS，尤其内容来自用户输入
用 textContent 安全替换纯文本内容
这是最轻量、最可控的方式，适合展示静态代码片段，且不依赖任何高亮库。
const codeEl = document.querySelector('pre code');
codeEl.textContent = 'function hello() {\n console.log("dynamic");\n}';
- 自动转义 HTML 字符（
<→），防止执行意外标签 - 不会破坏已有 class 或属性，高亮库下次初始化仍可识别语言类型
- 注意换行符要显式写成
\n，浏览器不会把字符串中的\n当作真实换行，除非父级<pre>存在
用 highlightElement() 重刷 Prism.js 高亮
如果你用的是 Prism.js（常见于文档站），改完内容后必须手动调用其 API，否则高亮还是旧的。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
const codeEl = document.querySelector('pre code');
codeEl.textContent = 'const x = 42;';
Prism.highlightElement(codeEl); // 关键：必须显式调用
-
Prism.highlightElement()会读取codeEl.className（如language-js）决定语法类型 - 确保 Prism 已加载完成再调用，否则报
Prism is not defined - 若代码含 HTML 标签（比如演示 JSX），需先用
Prism.util.encode处理，否则会被浏览器解析：Prism.util.encode('<div>')
动态插入带格式的代码块时，别漏掉 <pre> 包裹
单独改 <code> 标签内容没问题，但如果你是用 JS 创建新代码块，容易只生成 <code> 而忽略外层 <pre>——这会导致缩进丢失、换行失效、字体不等宽。
立即学习“前端免费学习笔记（深入）”；
const preEl = document.createElement('pre');
const codeEl = document.createElement('code');
codeEl.className = 'language-python';
codeEl.textContent = 'print("hello")';
preEl.appendChild(codeEl);
document.body.appendChild(preEl);
<p>// ✅ 正确：pre + code 成对出现
// ❌ 错误：只 append codeEl，没有 pre
-
<pre>提供空白符保留和等宽字体基础样式，<code>仅语义化标记 - 某些 CSS 框架（如 Bootstrap）的代码样式依赖
pre code组合选择器，缺一不可 - 如果用 innerHTML 插入，记得写全：
'<pre><code class="js">...</code></pre>'
实际中最容易被忽略的是：高亮库的状态与 DOM 不同步。改完 textContent 后不调 Prism.highlightElement() 或 hljs.highlightElement()，看起来内容变了，但颜色和 token 划分还是旧的——这种“半生效”状态最难排查。
