html:如何在源代码块中添加行号

Question

我想用行号显示源代码,方式如下:

1. 可以复制和粘贴代码,不包含行号,尊重换行符,空格和制表符.
2. 这些数字是正确的.
3. 代码可以环绕.

我尝试了以下方法.

订购清单

<style type="text/css">
    ol.code > li {
        white-space: pre-wrap;
    }
</style>
...
<ol class="code">
    <li>first line</li>
    <li>   indented line followed by empty line</li>
    <li></li>
    <li>the following line consists of one single space</li>
    <li> </li>
    <li>this line has a space at the end </li>
    <li>&#9;and one leading and ending tab&#9;</li>
    <li>fill to</li>
    <li>ten</li>
    <li>lines</li>
</ol>

这在大多数情况下都有效,但在复制和粘贴时,行中的前导空格和制表符不会复制到我的浏览器中(Iceweasel).所以#1以这种方式失败了.

预售柜台

<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>

这几乎可行,但#2失败了.它有一个额外的问题,包裹线继续在行号下(左边距旁边),而不是在行开始(列表)下.

同步线和前

这是我在https://www.sitepoint.com/best-practice-for-code-examples/中找到的建议,但它明确表示必须禁用换行,因此#3失败.这也让我感到非常不安,因为我看到这些街区在一些网站上破了.

没有JavaScript,有没有办法做到这一点？

Answer 1

您需要添加display: inline-block到您的::before伪元素:

例如.

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

那么你所有的其他风格都会奏效.

说明:默认情况下,::before和::after伪元素具有display的风格inline.

您需要显式声明display的风格block或者inline-block如果你要开始设置width,text-align等等.

例:

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) ". ";
  display: inline-block;
  width: 8em;         /* doesn't work */
  padding-left: auto; /* doesn't work */
  margin-left: auto;  /* doesn't work */
  text-align: right;  /* doesn't work */
}

<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>

补充: 使用的另一种CSS方法floats,clears这意味着当换行时,它们不会包含在行号下面:

pre.code {
  white-space: pre-wrap;
  margin-left: 8em;
}

pre.code:before {
  counter-reset: listing;
}

pre.code code {
  counter-increment: listing;
  text-align: left;
  float: left;
  clear: left;
}

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

Answer 2

虽然从技术上讲，我的问题已经由 Rounin 回答了（谢谢），但事实是我对结果并不完全满意，因为我没有说明在发布问题后我认为很重要的其他几个必要条件，但他们在该解决方案中失败了：

4. 当一行环绕时，它应该在上面一行的下面，而不是在行号下面。
5. 数字和文本列都应该是可样式化的（特别是，整个列的背景应该很容易改变）。

我尝试了另一个 的解决方案inline-block，但它失败了#5，并且在调整到任何宽度时遇到了问题。

<OL>非常接近，但不完全在那里。<OL>我知道不会飞的另一种选择是使用桌子。它不会飞，因为浏览器需要一个<PRE>元素才能正确复制/粘贴空格和制表符。

然后突然间，一个解决方案在我脑海中响起。强制一个不是表格的元素表现得好像它是一个表格，这是table-xxxx显示值的确切目的！

所以我们开始了。在 Iceweasel 24.7.0 和 Chromium 35.0.1916.153 中测试。该演示包括额外的样式，作为该方法多功能性的示例。

CSS：

/* Bare bones style for the desired effect */
pre.code {
    display: table;
    table-layout: fixed;
    width: 100%; /* anything but auto, otherwise fixed layout not guaranteed */
    white-space: pre-wrap;
}
pre.code::before {
    counter-reset: linenum;
}
pre.code span.tr {
    display: table-row;
    counter-increment: linenum;
}
pre.code span.th { /* used for line numbers */
    display: table-cell;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}
pre.code span.th::before {
    content: counter(linenum);
    text-align: right;
    display: block;
}
pre.code span.th {
    width: 4em; /* or whatever the desired width of the numbers column is */
}
pre.code code {
    display: table-cell;
}

和 HTML：

<pre class="code">
<span class="tr first-row"><span class="th"></span><code>   indented line</code></span>
<span class="tr"><span class="th"></span><code>unindented line</code></span>
<span class="tr"><span class="th"></span><code>&#9;line starting and ending with tab&#9;</code></span>
<span class="tr"><span class="th"></span><code></code></span>
<span class="tr"><span class="th"></span><code>the above line should be empty</code></span>
<span class="tr"><span class="th"></span><code>overlong line that wraps around or so I hope because it's really long and should overflow the right sided margin of the web page in your browser</code></span>
<span class="tr"><span class="th"></span><code>fill up to ten</code></span>
<span class="tr"><span class="th"></span><code>lines to check</code></span>
<span class="tr"><span class="th"></span><code>alignment</code></span>
<span class="tr"><span class="th"></span><code>of numbers</code></span>
</pre>

带有额外样式的演示

更新：自从我发布了这个问题，了解到 GeSHi 语法荧光笔可以选择使用以下模式，这也满足所有要求，并且可能更容易被那些对表格过敏的人接受：

<ol>
  <li><pre>code</pre></li>
  <li><pre>code</pre></li>
  <li><pre>...</pre></li>
</ol>