How to customize color of HTML template props in Visual Studio Code?

Question

Inspecting the mustache content in the below code with Developer: Inspect TM scopes

<p>name: {{ name }}</p>

I get text.html.basic, meaning there is no separate scope for changing the color of name inside the mustache tags. Is there any other way of changing the color of template props in Visual Studio Code?

Mark · Accepted Answer · 2018-10-10 11:20:32Z

2

If you don't find a better way with scopes, you could try the highlight extension.

And this setting seems to work:

"highlight.regexes": {

    "({{[/!^>#]*\\s*)([^}]+)(\\s*}})": [
         {},  // first match group "{{" gets no color, must be here
         {
            // "overviewRulerColor": "#ffcc00",
            "color": "#f00",
            // "fontWeight": "bold"
         },
         {} // third match group "}}" gets no color, does not need to be here
     ],
}

edited Oct 10, 2018 at 11:20

answered Oct 10, 2018 at 5:46

Mark

192k32 gold badges558 silver badges580 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mark Over a year ago

Edit : changed the regex so the desired capture of the template props is better and updated the image example.

galki Over a year ago

i think youre missing a ) in the middle. the way you wrote it might as well take out the 3rd pattern. heres one for angular prop binding: "(\\s+\\[[\\w-]+\\]=\"[/!^>#]*)([^\"]+)"

Mark Over a year ago

You are right on your comments, a typo by me on the regex, and the last match group doesn't need to be included if you are doing nothing with it.

Collectives™ on Stack Overflow

How to customize color of HTML template props in Visual Studio Code?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related