Home > front end >  How do I add a background color (highlight) class names in VS code
How do I add a background color (highlight) class names in VS code

Time:12-29

I want to make the HTML file more readable on VS Code Editor by highlighting the class names as below.

example

I have come this far, but don't know what chunk of code to add next in *json file.

"editor.tokenColorCustomizations": {
"textMateRules": [
  {
    "scope": "entity.name.selector",
    "settings": {
      "foreground": "#ff00ff",
      "fontStyle": "bold",
      
    }
  }
]

CodePudding user response:

You can use the extension Highlight

Add this to your settings.json (Global or Workspace)

"highlight.regexes": {
  "( class=)(\"[^\"<>]*\")": {
    "regexFlags": "g",
    "filterLanguageRegex": "html",
    "decorations": [ 
      {  },
      { "backgroundColor": "#f0000040" }
    ]
  }
}
  • Related