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