HTML5不支持原生行号，需用CSS计数器或JavaScript实现；标准写法是嵌套，CSS方案用counter-reset/increment配合::before，JS方案则分割textContent并动态插入带序号的HTML结构。
HTML5 本身不提供原生的行号显示功能，<pre class="brush:php;toolbar:false;"></code> 和 <code><code></code> 标签仅负责语义化地呈现预格式化文本和代码片段，但不支持自动添加行号。要实现带行号的代码演示，需结合 CSS 或 JavaScript 手动注入行号——这是最常用、兼容性好且语义清晰的做法。</p>
<H3>理解 <pre class="brush:php;toolbar:false;"> 与 <code> 的正确嵌套关系</H3>
<p><code><pre class="brush:php;toolbar:false;"></code> 用于保留空格与换行，<code><code></code> 表示内联或块级代码语义。标准写法是将 <code><code></code> 嵌套在 <code><pre class="brush:php;toolbar:false;"></code> 内，既保证格式，又明确语义：</p>
<p><font color="#666"><pre class="brush:php;toolbar:false;"><code class="js">console.log('Hello');<br>function test() {<br> return true;<br>}<br></code></pre>
注意：不要颠倒顺序（如 <code><pre class="brush:php;toolbar:false;"></code>），也不要在 <code><pre class="brush:php;toolbar:false;"></code> 外单独用 <code><code></code> 包裹多行代码——这会导致换行丢失或样式错乱。</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<H3>用 CSS 计数器（counter）实现纯静态行号</H3>
<p>无需 JS，利用 CSS <code>counter-reset</code> 和 <code>counter-increment</code> 可为每行生成序号。关键在于将代码按行拆分为 <code><span></code> 或使用 <code>::before</code> 伪元素定位：</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a>
<p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p>
</div>
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<ul>
<li>给 <code><code></code> 设置 <code>counter-reset: line;</code></li>
<li>为每行内容（例如 <code><code></code> 内的换行符所分隔的逻辑行）添加 <code>counter-increment: line;</code></li>
<li>用 <code><code>::before</code> 显示行号，并配合 <code>white-space: pre;</code> 和绝对定位对齐</li>
</ul>
<p>实际中更推荐将代码每行包裹进 <code><div class="line"></code>，再用 CSS 控制：<br><font color="#666"><pre class="brush:php;toolbar:false;"><code><div class="line">1. console.log('start');</div><div class="line">2. for (let i = 0; i < 5; i++) {</div></code></pre><br>然后通过 <code>.line::before { counter-increment: line; content: counter(line) ". "; } 渲染行号。
用 JavaScript 动态插入行号（推荐用于真实项目）
对可维护性和灵活性要求高时，JS 是更可靠的选择。基本思路是读取 <code> 的 textContent，按 \n 分割成数组，再逐行包装并插入序号：
- 选择所有
pre code元素 - 对每个代码块，提取文本、分割为行、映射为带
<span class="line-num"></span>和<span class="line-text"></span>的 HTML 片段 - 替换原始内容，并添加 CSS 控制宽度、对齐与高亮
示例片段（无依赖）：
document.querySelectorAll('pre code').forEach(block => {
const lines = block.textContent.split('\n');
const numbered = lines.map((line, i) =>
`${i + 1}${line}`
).join('');
block.innerHTML = numbered;
});
补充：行号区域与代码区的视觉分离技巧
为提升可读性，建议将行号列设为固定宽度、右对齐、浅灰背景，代码内容左对齐并留出足够内边距：
.line { display: flex; }
.line-num { width: 40px; text-align: right; padding-right: 12px; color: #999; background: #f5f5f5; }
.line-text { flex: 1; font-family: 'SFMono-Regular', Consolas, monospace; }
避免使用表格或浮动布局——flex 方案简洁、响应友好，且与代码语义不冲突。
