将代码行号与 CSS 对齐

Question

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

如您在上面的屏幕截图中所见，我正在使用 Wordpress 构建我的网站。我使用最新 Wordpress 版本的 "Additional 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>

将代码行号与 CSS 对齐

Align code line numbers with CSS

css

pre

css-counter