使用Prism代码荧光笔未对齐行号

Question

我正在使用prism库来突出显示一些HTML，CSS和JavaScript代码。除了涉及行号之外，它在大多数情况下都做得非常出色。

他们看起来像：

如您所见，它们未对齐。 我怎样才能解决这个问题？ 我目前的代码如下：

<div id="html-display" class="display code-display">
        <button class="explain-code">Explain this code</button>
        <span class="current-code"><pre class="line-numbers"><code class="language-markup">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;a&lt;/title&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;author&quot; content=&quot;A A&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;design.css&quot;&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;script.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Test&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre></span>
</div>

Answer 1

我有同样的问题。通过修改.line-numbers-rows>范围选择器对其进行了修复。

.line-numbers-rows > span {
  display: block;
  counter-increment: linenumber;
  line-height: 1.2rem; // add this
}