Template Literal color inconsistent in Js

[DevAlvaroF]

Hi!

I was working with the following piece of code (image to make the differences visible) and I found that the template literal has different colors inside of a class. This makes it really hard to read when it's all yellow.

However, if inside an if, the brackets change to green.

On the other hand, outside of the class method (as a global variable), color changes again

class Workout {
#renderWorkout(workout) {
    let htmlWorkout = `
        <li class="workout workout--${workout.type}" data-id="${workout.id}">
        <h2 class="workout__title">${workout.description}</h2>
        <div class="workout__details">
        <span class="workout__icon">${workout.emoji}</span>
        <span class="workout__value">${workout.distance}</span>
        <span class="workout__unit">km</span>
        </div>
        <div class="workout__details">
        <span class="workout__icon">⏱</span>
        <span class="workout__value">${workout.duration}</span>
        <span class="workout__unit">min</span>
        </div>

    `;

    if (workout.type === "running") {
      htmlWorkout += `
            <div class="workout__details">
            <span class="workout__icon">⚡️</span>
            <span class="workout__value">${workout.pace.toFixed(1)}</span>
            <span class="workout__unit">min/km</span>
            </div>
            <div class="workout__details">
            <span class="workout__icon">🦶🏼</span>
            <span class="workout__value">${workout.cadence}</span>
            <span class="workout__unit">spm</span>
            </div>
        </li>
        `;
    }
}

[Monokai]

This is due to bracket pair colorization. This is one of the reasons I recommend turning bracket pair colorization off. It adds visual noise where it doesn't really solve anything here. I can understand it helps in languages that are bracket heavy, but JavaScript generally doesn't have to be.