和标签仅识别真实换行符（u+000a），后端传来的"line1\nline2"中\n是字面量而非换行符，需用json.parse('"' + str + '"')或正则replace(/\\n/g, '\n')还原。
code 标签里显示换行符要先还原
后端传来的字符串如 "line1
line2"，在 JavaScript 中的
是字面量（两个字符），不是真实换行符；<pre class="brush:php;toolbar:false;"></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> 里的标签语法全被破坏。
必须显式声明“不转义”：
- art-template：用
{{{ codeStr }}}（三括号） - EJS：用
（减号） - Handlebars：用
{{{ codeStr }}} - 自研引擎务必检查是否默认 escape，否则
<div> 会被渲染成文字而非标签<h3>template 标签 + code 渲染时 cloneNode(true) 是必经步骤</h3> <p>如果用原生 <code><template></template>存放含<code>的结构，比如：
anything-to-html下载将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<template id="snippet"><pre class="brush:php;toolbar:false;"><code class="js"></code>
直接取
tmpl.content.innerHTML是空字符串；必须走content.cloneNode(true)才能拿到可操作的 DOM 节点。- 填值时别碰
innerHTML，改用codeEl.textContent = unescapedCode防 XSS - 若需语法高亮，等
textContent设置完再调用hljs.highlightElement(codeEl) - IE11 及更早版本完全忽略
<template></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>就只是摆设。 - 填值时别碰
