html：如何向源代码块添加行号

我想用行号显示源代码，方式如下：

根据换行符、空格和制表符，可以在不使用行号的情况下复制和粘贴代码

这些数字是正确的

这段代码可以循环使用

我尝试了以下方法

有序列表 这几乎奏效，但2号失败。另外还有一个问题，即换行符继续位于行号（左边距旁边）下，而不是行首（列表）下

同步线路和预同步 这是我在中发现的一个建议，但它明确指出必须禁用换行，因此#3失败。这也让我感到非常不安，因为我在一些网站上看到这些区块被破坏

---

是否有一种方法可以在不使用JavaScript的情况下完成此操作？

我建议使用codemirror来完成此操作，而不是自己编写

您可以免费获得您描述的功能和许多其他很棒的东西：

---

您需要将

display:inline块

添加到

：：在

伪元素之前：

例如

pre.code code::before {
  content: counter(listing) ". ";
  display: inline-block;
  width: 8em;
  padding-left: auto;
  margin-left: auto;
  text-align: right;
}

那么你所有的其他风格都可以

---

解释：默认情况下，

：在

之前和

：：在

之后，伪元素具有

显示

样式的

内联

如果要开始设置

宽度

，

文本对齐

等，则需要明确声明

块的
显示
样式

或

内联块

---

示例：

pre.code{
空白：预包装；
}
pre.code:：before{
计数器复位：挂牌；
}
预编码{
反增量：挂牌；
}
pre.code:：before{
内容：柜台（挂牌）“.”；
显示：内联块；
宽度：8em；/*现在可以工作了*/
左填充：自动；/*现在可以工作了*/
左边距：自动；/*现在可以工作了*/
文本对齐：右；/*现在可以工作了*/
}

第一行
缩进行后跟空行

下一行由一个空格组成

此行末尾有一个空格
	；以及一个前导和结束选项卡	
填充到
10个
行
虽然从技术上讲，鲁宁已经回答了我的问题（谢谢），但事实是，我对结果并不完全满意，因为我在发布问题后没有陈述一些我认为重要的其他条件，而这些条件在解决方案中失败了：

当一条线环绕时，它应该在上面的线下，而不是在行号下面
数字和文本列都应该是可风格化的（值得注意的是，整个列的背景应该很容易改变）
我尝试了另一个
内联块的解决方案
，但失败了#5，并且在调整任何宽度时出现问题

非常接近，但不太接近。我知道
不会飞的另一种选择是使用桌子。它不会飞，因为浏览器需要

以及HTML：


缩进行
未缩进行
	；以制表符	开头和结尾的行

上述行应为空
我希望这行太长了，因为它太长了，应该会溢出浏览器中网页的右侧边距
最多填充十个
要检查的行
对齐
编号的



更新：由于我发布了这个问题，了解到GeSHi语法highlighter可以选择使用以下模式，该模式也满足所有必要条件，并且对于那些对表过敏的人来说可能更容易接受：


代码
代码

您有什么理由需要自己实施吗？似乎在做这件事，更多地看看你能用xmp标签做些什么。@dave我现在已经检查了代码美化。它不符合上面的必要条件#1（Python所必需的前导空格在复制粘贴时丢失），并且行号在我的浏览器中没有正确显示（只有空行有行号）。谢谢，但我不想使用JS。我编辑了这个问题来澄清这一点。有没有关于该工具生成什么HTML的提示？嗯，没有。我前面没有编辑器，所以我无法测试这个解决方案。嗯，不是真的。我前面没有编辑器，因此无法测试此解决方案。您是否尝试过为每个代码的内容添加一个带有类的嵌套span，然后应用一个左边距来缩进它？我已经查看了CodeMirror。虽然它确实做到了我所要求的（除了需要JS的部分），但它实际上是一个成熟的编辑器，对于仅仅展示代码片段来说太重了。它似乎依赖于底层的textarea来允许文本选择，因此它实际上需要两份代码副本。滚动需要JS活动才能工作。这不是我想要的，但是谢谢。一个更轻量级的版本是，但我没有亲自使用过。这就成功了，谢谢！仍然存在一个问题，即包装的行位于行号之下，而不是列表。关于如何解决这个问题有什么提示吗？我在上面添加了一个稍微不同的CSS方法，使用浮动和清除，这意味着换行不会从行号下面开始。谢谢。它并没有像我期望的那样工作，但是我已经成功地使用了一个单独的
内联块
来组合文本部分（以及
垂直对齐
用于数字部分）。在编写上述CSS三年半后，我发现我需要类似的东西来启用按钮（用于移动浏览器）它可以在屏幕上显示网页的HTML源代码（与使用
查看源代码：
在URL栏中预先显示URL相比，点击按钮更不方便）。请参阅：不使用
浮动<
<style type="text/css">
    pre.code {
        white-space: pre-wrap;
    }
    pre.code:before {
        counter-reset: listing;
    }
    pre.code code {
        counter-increment: listing;
    }
    pre.code code:before {
        content: counter(listing) ". ";
        width: 8em;         /* doesn't work */
        padding-left: auto; /* doesn't work */
        margin-left: auto;  /* doesn't work */
        text-align: right;  /* doesn't work */
    }
</style>
...
<pre class="code">
<code>first line</code>
<code>   indented line followed by empty line</code>
<code></code>
<code>the following line consists of one single space</code>
<code> </code>
<code>this line has a space at the end </code>
<code>&#9;and one leading and ending tab&#9;</code>
<code>fill to</code>
<code>ten</code>
<code>lines</code>
</pre>

CodeMirror.fromTextArea(document.getElementById("myDiv"), {
    lineNumbers: true,
    mode: "htmlmixed"
  });

pre.code code::before {
  content: counter(listing) ". ";
  display: inline-block;
  width: 8em;
  padding-left: auto;
  margin-left: auto;
  text-align: right;
}