<pre>和<code>标签仅识别真实换行符（U+000A），后端传来的"line1\nline2"中\n是字面量而非换行符，需用JSON.parse('"' + str + '"')或正则replace(/\\n/g, '\n')还原。
code 标签里显示换行符要先还原
后端传来的字符串如 "line1
line2"，在 JavaScript 中的
是字面量（两个字符），不是真实换行符；<pre> 和 <code> 只对真实的
（U+000A）生效，对转义序列无反应。
常见错误是直接把字符串塞进 textContent 或 innerHTML，结果所有
都被当普通文本显示成“反斜杠+n”。
- 用
JSON.parse('"' + str + '"')最稳妥：它会把"a\nb"自动转为"a b" - 或正则替换：
str.replace(/\n/g, ' ').replace(/\t/g, ' ')，但需确保原始字符串没双重转义 - 服务端返回时就用 JSON 格式传字符串，前端解包即得原生换行
模板引擎中不能靠 innerHTML 填充 code 内容
很多模板引擎（如 art-template、EJS）默认对变量做 HTML 转义，{{ codeStr }} 会把 < 变成 ，导致 <code><code> 里的标签语法全被破坏。
必须显式声明“不转义”：
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- art-template：用
{{{ codeStr }}}（三括号） - EJS：用
（减号） - Handlebars：用
{{{ codeStr }}} - 自研引擎务必检查是否默认 escape，否则
<div>会被渲染成文字而非标签
template 标签 + code 渲染时 cloneNode(true) 是必经步骤
如果用原生 <template> 存放含 <code> 的结构，比如：
<template id="snippet"> <pre><code class="js"></code></pre> </template>
直接取 tmpl.content.innerHTML 是空字符串；必须走 content.cloneNode(true) 才能拿到可操作的 DOM 节点。
- 填值时别碰
innerHTML，改用codeEl.textContent = unescapedCode防 XSS - 若需语法高亮，等
textContent设置完再调用hljs.highlightElement(codeEl) - IE11 及更早版本完全忽略
<template>，子节点会直接渲染——需用document.createElement('template')检测兼容性并降级
批量渲染多个 code 片段时 DocumentFragment 不可省略
循环渲染 50 个代码块，如果每轮都 container.appendChild(instance)，浏览器会反复重排重绘，卡顿明显。
- 必须用
const frag = document.createDocumentFragment()作中转 - 每次
frag.appendChild(cloned)，最后只调一次container.appendChild(frag) - 注意：frag 本身不在 DOM 树中，无法被
querySelector查到，事件绑定必须在克隆后、插入前完成
真实场景里最容易被跳过的，是「字符串中
的语义还原」和「template.content 必须 cloneNode(true) 才能取内容」这两步。漏掉任一，<code> 就只是摆设。
