HTML5不支持原生行号，需用CSS计数器或JavaScript实现；标准写法是嵌套，CSS方案用counter-reset/increment配合::before，JS方案则分割textContent并动态插入带序号的HTML结构。
HTML5 本身不提供原生的行号显示功能， 和 标签仅负责语义化地呈现预格式化文本和代码片段，但不支持自动添加行号。要实现带行号的代码演示，需结合 CSS 或 JavaScript 手动注入行号——这是最常用、兼容性好且语义清晰的做法。
理解 与 <code> 的正确嵌套关系</code>
用于保留空格与换行， 表示内联或块级代码语义。标准写法是将 嵌套在 内，既保证格式，又明确语义：
<code class="js">console.log('Hello');<br>function test() {<br> return true;<br>}<br></code>
注意：不要颠倒顺序（如 ），也不要在 外单独用 包裹多行代码——这会导致换行丢失或样式错乱。
用 CSS 计数器（counter）实现纯静态行号
无需 JS，利用 CSS counter-reset 和 counter-increment 可为每行生成序号。关键在于将代码按行拆分为 或使用 ::before 伪元素定位：
- 给
设置counter-reset: line; - 为每行内容（例如
内的换行符所分隔的逻辑行）添加counter-increment: line; - 用
::before显示行号，并配合white-space: pre;和绝对定位对齐
实际中更推荐将代码每行包裹进 <code><div class="line">1. console.log('start');</div>
<div class="line">2. for (let i = 0; i <br>然后通过 <code>.line::before { counter-increment: line; content: counter(line) ". "; }</code> 渲染行号。<h3>用 JavaScript 动态插入行号（推荐用于真实项目）</h3>
<p>对可维护性和灵活性要求高时，JS 是更可靠的选择。基本思路是读取 <code><code></code> 的 <code>textContent</code>，按 <code>\n</code> 分割成数组，再逐行包装并插入序号：</code></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="DeepBI DHTML 页面生成器" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="overflowclass">DeepBI DHTML 页面生成器</a>
<p class="overflowclass">生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur</p>
</div>
<a rel="nofollow" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul>
<li>选择所有 <code>pre code</code> 元素</li>
<li>对每个代码块，提取文本、分割为行、映射为带 <code><span class="line-num"></span></code> 和 <code><span class="line-text"></span></code> 的 HTML 片段</li>
<li>替换原始内容，并添加 CSS 控制宽度、对齐与高亮</li>
</ul>
<p>示例片段（无依赖）：<br><font color="#666">document.querySelectorAll('pre code').forEach(block => {<br> const lines = block.textContent.split('\n');<br> const numbered = lines.map((line, i) =><br> `<span class="line"><span class="line-num">${i + 1}</span><span class="line-text">${line}</span></span>`<br> ).join('');<br> block.innerHTML = numbered;<br>});</font></p>
<h3>补充：行号区域与代码区的视觉分离技巧</h3>
<p>为提升可读性，建议将行号列设为固定宽度、右对齐、浅灰背景，代码内容左对齐并留出足够内边距：</p>
<p><font color="#666">.line { display: flex; }<br>.line-num { width: 40px; text-align: right; padding-right: 12px; color: #999; background: #f5f5f5; }<br>.line-text { flex: 1; font-family: 'SFMono-Regular', Consolas, monospace; }</font></p>
<p>避免使用表格或浮动布局——flex 方案简洁、响应友好，且与代码语义不冲突。</p>
</div></code>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
