可行但需满足内容已转义和dom结构干净两个前提，否则浏览器会解析未闭合或错乱的导致格式崩坏、样式失效、复制异常等问题。
<pre class="brush:php;toolbar:false;"></pre> 里直接写多个 <span></span> 是可行的，但必须满足两个硬性前提：内容已转义、DOM 结构干净。否则浏览器会把未闭合或嵌套错乱的 <span></span> 当作 HTML 解析，导致格式崩坏或样式失效。
为什么 <pre class="brush:php;toolbar:false;"></pre> 里放 <span></span> 容易出问题
常见错误现象包括：<span></span> 标签被浏览器自动闭合、高亮颜色只显示前半段、复制代码时带入多余标签、缩进被吃掉、textContent 读取结果和渲染不一致。
根本原因是：<pre class="brush:php;toolbar:false;"></pre> 本身不阻止 HTML 解析——它只保留空白符和换行。只要里面出现未转义的 或 <code>&，浏览器就会尝试解析成标签；而如果手动拼接的 <span></span> 没处理好父子关系（比如在 <span class="string">"hello"</span> 后面又插一个 <span class="keyword">if</span>），就可能触发 DOM 自动修正，破坏你预设的嵌套结构。
- 不要用
innerHTML += '<span>...</span>'动态追加，容易引发嵌套污染 - 避免在
<pre class="brush:php;toolbar:false;"></pre>内混用原始文本与未转义 HTML 片段 - 若需动态生成，先构建完整字符串再一次性赋值给
innerHTML，而不是多次修改
<pre class="brush:php;toolbar:false;"></pre> + <code> + <span></span> 的标准嵌套结构
语义上必须是 <pre class="brush:php;toolbar:false;"><code><span>...</span></code></pre>，不能省略 <code>。因为 <pre class="brush:php;toolbar:false;"></pre> 只管格式，<code> 才声明“这是计算机代码”，这对屏幕阅读器、SEO 和 CSS 选择器都关键。
正确示例：
<pre class="brush:php;toolbar:false;"><code class="js"><span class="keyword">function</span> <span class="title">greet</span>() {<br><span class="string">"Hello"</span>;<br>}</code>
-
<pre class="brush:php;toolbar:false;"></pre>外层容器，负责保留换行和空格 <code>必须存在，且推荐带class="xxx"用于后续 CSS 或 JS 识别- 所有
<span></span>必须严格包裹在<code>内部，不能跨出 - 原始代码中的
、<code>>、&必须转义为<、>、&
动态插入 <span></span> 时怎么避免 DOM 崩坏
最安全的方式不是操作 innerHTML，而是用 Range + DocumentFragment 在指定文本位置插入节点。尤其当你要对已有 <pre class="brush:php;toolbar:false;"><code></code> 内容做增量高亮时，直接改 <code>innerHTML</code> 会清空当前 selection、丢失光标位置、甚至让已有的 <code><span></span></code> 被重新解析。</pre>
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
关键步骤：
- 先调用
element.textContent获取纯文本内容，确保不误读已有标签 - 用正则或语法分析器确定高亮起止偏移（基于纯文本坐标）
- 创建
Range对象，定位到目标文本节点的 start/end 位置 - 用
range.surroundContents(span)包裹，而非拼字符串 - 若需批量高亮，先收集所有 range，再按从后往前顺序执行
surroundContents，防止前面插入影响后面 offset
注意：surroundContents 要求 range 必须完全落在单个 Text 节点内。如果 <code> 下已有其他 <span></span>，就得先用 element.normalize() 合并相邻文本节点，否则会报错。
CSS 样式必须显式设置 white-space 和 font-family
即使结构正确，<span></span> 也可能不显示效果，常见原因是继承了非等宽字体或默认换行策略。
最小可用样式：
pre code {
white-space: pre;
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}
pre code span {
padding: 0 2px;
border-radius: 3px;
}
span.keyword { color: #d32f2f; }
span.string { color: #388e3c; }
-
white-space: pre确保子元素不破坏预格式化行为（仅设在code上即可，pre默认就是pre） - 等宽字体链必须写全，尤其要包含系统级 fallback，否则 macOS 上可能回退到非等宽字体
- 不要给
<span></span>设display: inline-block，除非你明确需要控制换行行为——它会干扰pre的原生布局逻辑
真正难的不是插入 <span></span>，而是保证每次插入后，文本节点依然连续、selection 不跳、复制内容不含标签、屏幕阅读器能准确朗读语义。这些细节一旦忽略，用户在编辑、复制、无障碍访问时就会立刻感知异常。
