Update highlight and/or lineHighlight on a specific element

[c-marc]

Hi, I'm trying to understand how to update highlighting. My use case is line highlighting and a change of the attribute data-line. But I suppose this applies to any change of a code block with the lineHighlight plugin.

Let's suppose I have a simple code block:

<pre id="id-pre" data-line="1"><code language="language-css">div {
color: "red";
}
</code></pre>

and then later I want to set or modify the attribute:

pre = document.querySelector("#id-pre");
pre.setAttribute("data-line", "2");

How can I properly re-process the code with Prism?

1. Prism.highlightAll() works (the line plugin feature is applied too) but I'd like to aim at the element;
2. Prism.highlightElement(pre) does reprocess the code but line highlighting does not show on any line (old or new attribute);
3. Following this feature discussion Feature request - Line Highlight Plugin JS API #1093 and PR Expose highlightLines as Prism.plugins.highlightLines in that plugin #3086, I tried Prism.plugins.lineHighlight.highlightLines(pre): it doesn't change anything (highlight stays on line 1); I'm not sure I'm calling it properly though...

I couldn't find any example or doc for that kind of call. And I don't understand why 1 (all) is working and 2 (element) is not. Could someone give me a hint on the proper expected syntax? Thanks!

[KaiWilke]

I use Prism.highlightElement() on the < code > itself and line-numbers as well as line-highlight works for me on subsequent executions. Additional difference is that I've included a < code id="xyz" class="language-xyz match-braces rainbow-braces line-numbers">< /code > without a "language" attribute.

[c-marc]

Thank you ! Targeting the <code> element works as expected. I guess I got confused by the fact that the data-line attribute is set on <pre>. Therefore I was wrongly using Prism.highlightElement(element) on that one... Nice catch ! Thanks again !