Syntax highlighting fails with newline padded expressions in JS template literals.

Summary

JavaScript syntax highlighting fails when it encounters a newline inside an expression inside a template literal. After which it will reverse strings.

Steps to reproduce

Check in a javascript file that includes the following snippet:

const foo = 42;
const templateLiteral = `foo "${
  foo
}"`;

const bar = "bar";
const baz = "baz";

Expected behavior

Syntax highlighting should work as expected.

In particular, the HTML for the last line of the snippet should be:

<span id="LC7" class="line">
  <span class="kr">const</span>
  <span class="nx">baz</span>
  <span class="o">=</span>
  <span class="s2">"baz"</span>
  <span class="p">";</span>
</span>

where a class with kr is keyword highlighted, s2 as a string, nx identifier, o as an operator, and p as punctuation.

Actual behavior

The parts after the template literal have reversed highlighting for double quotes.

In particular, the HTML for the last line of the snippet is:

<span id="LC7" class="line">
  <span class="s2">const baz = "</span>
  <span class="nx">baz</span>
  <span class="err">"</span>
  <span class="p">;</span>
</span>

with a class of err representing a syntax error.

Relevant logs and/or screenshots

Firstly note how the above snippet is wrongly highlighted.

Output of checks

This bug happens on GitLab.com.

Results of GitLab application Check ∕ environment info

Don't know, I am but a humble user.

Possible fixes

I'm guessing this is a bug in your syntax highlighting library of choise, so most likely you can forward the bug report to their issue tracker.

Would you mind creating this issue here? https://github.com/jneen/rouge/issues

@stanhu Sure. https://github.com/jneen/rouge/issues/602

Thanks @runarberg. I'll close this issue in favor of that one.

closed