javascript - 如何使用 prism.js 在某些行突出显示 Java 代码

Question

Prism.js 突出显示行号不起作用。经过大量故障排除后，高亮 div 的绝对定位似乎相互重叠(见图 )。这是我用来下载 prism.js 的页面:https://prismjs.com/download.html#themes=prism-dark&languages=markup+css+clike+javascript+c+cpp+java+javadoclike+javadoc&plugins=line-highlight+line-numbers+highlight-keywords

我的代码如下:

<div class="code-block">
<pre data-line="1-8, 10" data-start="31"><code class="language-java">public AlignmentResults unMarshallAlignmentResult(File alignmentFile) {
AlignmentResults alignmentResults;
try {
    JAXBContext jaxbContext = JAXBContext.newInstance(AlignmentResults.class);
    javax.xml.bind.Unmarshaller unmarshaller = jaxbContext.createUnmarshaller();
    alignmentResults = (AlignmentResults) unmarshaller.unmarshal(alignmentFile);
} catch (JAXBException e) {
    alignmentResults = null;
}
return alignmentResults;}</code>
</pre>

当网页加载时，它看起来像图 2 : .目前，应突出显示第 1-8 (31-38) 行和第 10 (41) 行。

如果我缩放浏览器窗口，则会出现更明确的突出显示，但它仅在第 1 行(或者所有突出显示都堆叠在第 1 行)。

Answer 1

---

旧答案已删除。全新的答案:

---

偏移量的工作方式与(我)预期的不同。

他们的在线示例是:

<pre data-line="43" data-line-offset="40" ...

第 3 行被突出显示。偏移量是 40，所以数到 43(3 次计数):41、42、43 -- 第 3 行突出显示。

在你的，

<pre data-line="1-8, 10" data-start="31">

偏移量是 31，但您想从第 1 行开始突出显示。发生的情况是，突出显示向后找到第 1 行，即 向上 30(或 31)行。

如果使用偏移量或数据开始，请确保 data-line 大于 data-start。

如果我没记错的话你应该是:

<pre data-line="31-38, 40" data-line-offset="31">