Javascript Hightlighting: Match-brace is not working properly with Template String Placeholder

[KotoriK]

Information

• Language: [Javascript (and its variant, TypeScript,etc.)]
• Plugins: [match-braces]
• Bug can be reproduced on Prism.js Version:>=v1.20

Description
As the title said.
Match-brace will be confused when meeting placeholders (like ${js_expression}) in Template literals. It will match the brace of the placeholder with a former brace.

Code snippet

The code being highlighted incorrectly.

const func =(a,b)=>{
return `${a}:${b}`//match-brace will match the first right-brace in the first placeholder with the former left-brace 
//and the left-brace of the first placeholder might be left unmatched
}

[KotoriK]

this issue #2536 might be describing a same problem.

[RunDevelopment]

Yeah, I see the problem. Match braces (MB) basically just guesses bracket pairs. Prism doesn't tag opening/closing brackets, so MB has a list of known brackets. Any punctuation token of a known bracket will be labeled as opening or closing. MB then tries to pair up all labeled punctuation tokens.

The problem is that MB knows {, } but not ${. We could make ${ as "alias" for {, so MB treats them the same but this doesn't generalize well for other languages.

The proper solution here is to change the language definitions to properly label opening/closing punction themselves (instead of MB having to guess) but this requires changing >200 languages definitions...

I'll implement the aliasing for now. A fix will be up soon.

this issue #2536 might be describing the same problem.

That makes sense. #2536 has no description, so let's keep this issue and close #2536.