不能直接套因语义违规致结构破坏，必须拆分为嵌套；需按 分割、转义&、设list-style-position:inside对齐缩进。
为什么 <ol></ol> 不能直接套 <pre class="brush:php;toolbar:false;"></pre> 却能显示行号
因为 <ol></ol> 默认只接受 <li> 作为子元素，而 <pre class="brush:php;toolbar:false;"></pre> 是块级容器，直接嵌套会破坏 HTML 结构合法性（浏览器会自动修正，导致行号错位或丢失）。真正可行的方式是让每行代码成为独立的 <li>，由 <ol></ol> 自动编号。
怎么把多行代码字符串拆成带行号的 <ol><li></ol> 结构
核心是按换行符切割、转义、再包裹。注意：原始换行符必须是
（不是
），且需对 、<code>>、& 做 HTML 实体转义，否则破坏结构或执行 XSS。
- 用
split(' ')拆分字符串，避免用split(/\r?\n/)—— 多余正则在简单场景反而引入空行 - 对每个
line调用line.replace(/&/g, '&').replace(/, '/g, '>') - 每项用
<li><code>${escaped} 包裹，再拼进
<ol>...</ol>
<ol></ol> 行号样式不贴合代码缩进怎么办
默认 <ol></ol> 的 list-style-position 是 outside，数字会悬在左侧，和代码文本不对齐。必须强制设为 inside，并配合 padding-left: 0 防止缩进叠加。
ol {
list-style-position: inside;
padding-left: 0;
}
ol li {
white-space: pre; /* 保留原始空格缩进 */
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}
服务端渲染或静态 HTML 中怎么安全插入行号代码块
如果不用 JS 动态生成，而是写死在 HTML 里，必须手动做两件事：转义 + 拆行。任何未转义的 或 <code>& 都会导致标签被解析、结构断裂。
- 不要手写
<ol><li>console.log(<div>test</div>);</li></ol>—— 这里的<div> 会被浏览器当成真实标签解析<li>正确写法是：<code><ol><li><code>console.log(<div>test</div>); - 行末不要留空格，
<li>后紧跟<code>，避免换行符被渲染为空白行
行号逻辑看着简单，但转义遗漏、换行符处理不一致、CSS list-style-position 默认值这几个点，几乎每次都会漏掉一个。
