css计数器方案可实现无js行号：用pre+code结构，配合counter-reset、counter-increment及::before伪元素生成行号，兼容ie11+且不影响代码复制。

HTML 本身不支持行号，必须靠 CSS 或 JavaScript 配合实现；纯 HTML + 内联样式无法自动编号，硬写 <ol></ol> 会破坏代码语义和复制体验。

用 pre + code + CSS 计数器实现无 JS 行号

这是最轻量、兼容性好（IE11+）、不影响复制的方案。核心是利用 CSS counter-reset 和 counter-increment，配合 ::before 伪元素生成行号。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• HTML 结构必须是

  <pre class="brush:php;toolbar:false;"><code class="js">...</code>

• CSS 中给 code 设置 <code>display: block，并启用计数器：counter-reset: line;
• 每行用 code::before 插入编号：content: counter(line); counter-increment: line;
• 关键：用 white-space: pre 保持换行，再用 line-height 控制行距，否则行号与代码错位

用 Prism.js 自动加行号（推荐用于生产）

如果你已在用 Prism.js 高亮代码，开启行号只需两步，且能正确处理缩进、空行、折叠等边界情况。

• 引入插件：prism-line-numbers.min.js 和对应 CSS（注意不是 prism-line-numbers.css，而是带 prism-line-numbers-theme- 的主题文件）
• 在 <code> 标签加 data-line-numbers 属性，如：<code class="html" data-line-numbers>
• 支持指定范围：data-line-numbers="2,4-6" 只显示第 2 行和 4–6 行
• 注意：Prism.highlightAll() 必须在插件加载后调用，否则行号不渲染

避免用 table 或 flex 模拟行号

有人用两个并排 <div>（一列放行号、一列放代码），或用 <code>table 套每行——这类方案看似简单，但实际问题很多：

• 复制代码时会把行号一起复制，用户粘贴后出现 1 console.log("hello");
• 响应式下容易错位，尤其小屏幕时行号列宽度难控制
• 无法跟随代码高亮语法（比如 string 关键字变色后，行号列不会自动对齐）
• 键盘导航（Tab / 方向键）顺序混乱，可访问性差

真正麻烦的是空行和缩进混合场景：CSS 计数器默认给每个 ::before 都计数，但空行要不要编号？是否跳过注释行？这些逻辑在纯 CSS 里做不了，得靠 Prism 或自定义 JS 处理——别低估这个细节，它直接影响开发者读代码时的视线定位效率。