Extending VS Code syntax highlighting

Question

Is there a way to extend Visual Studio Code syntax highlighting for specific items using the user settings (or similar methods not involving writing an extension)?

I am using a color theme but would like to change the syntax colouring for a specific namespace of HTML tags, e.g.

<div></div> uses standard colouring from theme

<ext:div></ext:div> uses a different color

Answer 1

No, there is nothing in VSCode proper (no extensions) that will highlight an arbitrary regex. (Well, there is the Search feature, but the highlighting from that is temporary.)

Short of writing an extension or using an existing one that does this, the most capable method of highlight customization is the textMateRules mechanism of editor.tokenCustomizations in settings.json.

Now, the built-in TextMate grammar simply classifies "ext:div" as unrecognized, so the best possible with this approach is to change the highlighting for all unrecognized tags. That would look like this:

    // https://code.visualstudio.com/docs/getstarted/themes
    "editor.tokenColorCustomizations": {
        "textMateRules": [
            {
                "scope": [
                    "meta.tag.other entity.name.tag",
                ],
                "settings": {
                    "foreground": "#080",
                    "fontStyle": "bold",
                },
            },
        ],
    },

Screenshot:

See also this answer that goes through the process of adding textMateRules in a bit more detail.

Answer 2

If you don't find a better, more standard way to do this, the extension TODO Highlight would work for you. It is typically used to highlight special comments for yourself like "FIXME" but could be used in your case with a regex like:

  "todohighlight.keywordsPattern": "\\s*<\\s*\\/{0,1}ext:.*\\s*>",

And then you can set the coloring any way you want:

"todohighlight.defaultStyle": {
    "color": "red",
    // "letterSpacing": "1px",
    // "backgroundColor": "rgba(170,102,0,1)",
    "backgroundColor": "transparent"
    // "borderRadius": "4px",
    "isWholeLine": false
},