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

【问题标题】：Line numbers misaligned using Prism code highlighter使用 Prism 代码荧光笔未对齐的行号
【发布时间】：2016-09-12 16:38:07
【问题描述】：

我正在使用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>

【问题讨论】：

我有同样的问题，必须硬编码（即以 px 定义，而不是相对）code[class*="language-"]s 和 .line-numbers-rows > span:befores text-heightprism.css 中的属性（主题 Twilight，Okaidia 似乎工作）。
文字高度？你是说行高吗？

标签： javascript html css highlight prism.js

【解决方案1】：

我有同样的问题。通过修改 .line-numbers-rows > span 选择器来修复它。

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

【讨论】：