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

Question

Prism.js 突出显示行号无效。经过大量trouble-shooting，高亮div的绝对定位似乎相互重叠（见图). This is the page I use to download 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) 行。

如果我缩放浏览器 window，则会出现更明确的突出显示，但它仅在第 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 行，即 up 30（或 31）行。

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

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

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

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

How to highlight Java code at certain lines using prism.js

javascript

html

css

prism.js