css - 将代码行号与 CSS 对齐

Question

我正在尝试使用纯 CSS 方法（无 javascript）在我的网站（ https://qscintilla.com/custom-lexer-example/ ）上的代码片段中插入行号：

正如您在上面的屏幕截图中看到的，我正在使用 Wordpress 构建我的网站。我使用最新 Wordpress 版本中的“附加 CSS”功能插入自定义 CSS。这是我的自定义 CSS：

pre{
    counter-reset: line;
}
code{
    counter-increment: line;
}
code:before{
    content: counter(line);
    display: inline-block;
    border-right: 1px solid #ddd;
    padding: 0 .5em;
    margin-right: .5em;
    color: #888;
    -webkit-user-select: none;
}

当我像这样在我的 HTML 中插入代码片段时，它工作得很好：

<pre>
<code> This is my first codeline </code>
<code> This is my second codeline </code>
<code> This is my third codeline </code>
<code> This is my fourth codeline </code>
</pre>

不幸的是，当代码行达到两位数时，行号没有正确对齐。让我们放大问题：

当然，当代码行从两位数跳到三位数时也会出现同样的问题

我怎样才能解决这个问题？

Answer 1

如果你想要一个纯 CSS 的解决方案，只有一种方法：使用固定宽度的解决方案，即在::before伪元素上显式声明一个宽度。但是，这种方法永远不会过时，因为您必须考虑计数器可能会达到 3、4 或更多位数的情况。

pre {
  counter-reset: line;
}

code {
  counter-increment: line;
}

code::before {
  content: counter(line);
  display: inline-block;
  width: 1.5em; /* Fixed width */
  border-right: 1px solid #ddd;
  padding: 0 .5em;
  margin-right: .5em;
  color: #888;
  -webkit-user-select: none;
}

<pre>
<code>Code</code>
<code>Code</code>
<code>Code</code>
<code>Code</code>
<code>Code</code>
<code>Code</code>
<code>Code</code>
<code>Code</code>
<code>Code</code>
<code>Code</code>
<code>Code</code>
<code>Code</code>
</pre>

Answer 2

您可以使用 CSS 网格来实现。行号的宽度会动态增加，因此您将来不会因大数字而出现任何错误。看看下面；

pre {
  counter-reset: line 0;
  display: grid;
  grid-template-columns: min-content 1fr;
  grid-auto-rows: 1em;
  gap: 0.3em;
}

.line-number {
  text-align: right;
}

.line-number::before {
  counter-increment: line;
  content: counter(line);
  white-space: pre;
  color: #888;
  padding: 0 .5em;
  border-right: 1px solid #ddd;
}

<pre>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
</pre>