CODEWITHSUNDEEP
visual-studio-code
John Manners
John Manners

Reputation: 53

Visual Studio Code - customize color of specific html tags

After searching high and low, I don't seem to able to find out how to customize the color of specific html tags in Visual Studio Code. Changing the color of them all is easy enough, with the following textmate scope:

entity.name.tag.html

That changes all tags. But what if you want to change just the color of the "Form" tag? i.e.<form></form> So how do I make the "Form" tag distinct in color from the "Div" tags, for instance?

Inspecting the editor tokens/scope within VSC, I can see scopes such as:

meta.tag.structure.form.start.html

But that changes something else, not the Form tag itself.

Upvotes: 1

Views: 1549

Answers (1)

Mark
Mark

Reputation: 181060

Not sure why isn't working for you? This works for me:

  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": "meta.tag.structure.form.start.html entity.name.tag, meta.tag.structure.form.end.html entity.name.tag",
        "settings": {
          "foreground": "#00ff00",
          "fontStyle": "bold"
        }
      },
    ]
  },

Note that I have to add entity.name.tag to each scope selector to get it to work. Demo:

html form color change

Was there something else you were trying to accomplish?

Upvotes: 2

Related Questions