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

Question

Prism.js highlight line numbers not working. After a lot of trouble-shooting, it seems the absolute positioning of the highlight divs are overlapping each other (See figure). 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

My code is as follows:

<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>

When the webpage loads, it looks like figure 2: . Currently, lines 1-8 (31-38), and 10 (41) should be highlighted.

If I zoom my browser window, a more defined highlight appears but it is only at line 1 (or all of the highlights are stacked at line 1).

Answer 1

---

Old answer deleted. Completely new answer:

---

The offset works differently than (I) expected.

Their online example is:

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

And the 3rd line is highlighted. The offset is 40, so count to 43 (a 3-count): 41, 42, 43 -- the 3rd line is highlighted.

In yours,

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

the offset is 31, but you want to start highlighting at line 1. What's happening is, the highlighter goes backwards to find line 1, which is up 30 (or 31) lines.

Make sure the data-lines are greater than the data-start if using offset or data-start.

If I'm not mistaken yours should be:

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