javascript - 使用 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 > span 选择器来修复它。

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