The Problem

When highlighting in JSX or TSX and using prism, template strings would sometimes fail to be highlighted correctly, as seen in the demo screenshot below.

To reproduce, include any JSX node with multi-line text as well as a multi-line template string. You'll see that everything between the first and last lines of the template string is highlighted as plaintext instead of string.

This happens even though the demo for the underlying refractor package does not produce such an error.

The Cause

The code for createLineElement in highlight.js modified the lineProps variable directly without copying it. This leads to lineProps at times taking on the className value of the currently processed line, which can then lead to other lines being wrapped with those classes.

What happened in the example above is that when the plaintext inside the JSX is processed, lineProps is butchered and then overrides the previously emitted string classes for the template string.

This code also leads to odd behavior when lineProps is specified but wrapLines is not, with only some lines being affected by lineProps and others not, seemingly at random.

The Fix

1. We shallow copy the lineProps object to prevent it from being butchered.
2. We only use the lineProps object when wrapLines is set to true, as otherwise (according to the README documentation) it has no effect.
3. We merge the className field of lineProps with the generated classes to ensure both are present in the final output.

Testing

I have confirmed this fixes the issue above, while also preserving wrapLines functionality. Additionally, lineProps now has no effect on output when wrapLines is not specified.