Javascript 使用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>

解释这个代码

!DOCTYPE html
html
头
标题/标题
meta charset=“UTF-8”
meta name=“author”content=“A”
link rel=“stylesheet”type=“text/css”href=“design.css”
script type=“text/javascript”src=“jquery.js”/script
script type=“text/javascript”src=“script.js”/script
/头
身体
h1测试/h1
/身体
/html

---

我也有同样的问题。通过修改。行号行>范围选择器修复了此问题

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

---

我也有同样的问题，必须硬编码（即在px中定义，而不是相对的）

code[class*=“language-”]

s和

。行号行数行数span:before

s

text height

属性在

prism.css

（在主题暮色中，Okaidia似乎起作用）。文本高度？你是说线条高度吗？