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>