Syntax coloring VSCode extension

Question

I am trying to make an extension and need to colorize syntax for custom language. I was able to create extension using yo code and edit .tmLanguage.json file to match wanted syntaxes. As for example in repository

"comment": {
  "patterns": [
    {
      "name": "comment.line.semicolon",
      "match": ";.*$"
    }
  ]
},

However i have not been able to set custom color. Only way was to edit settings.json file using "editor.tokenColorCustomizations" and providing textMateRules. Example: For the pattern:

{
      "name": "positioning.FMAX",
      "match": "\\bFMAX\\b"
    },

textMateRules

{
      "name": "color.positioning.FMAX",
      "scope": "positioning.FMAX",
      "settings": {
        "foreground": "#ff0000",
        "fontStyle": "bold"
      }
    },

But this is not working when i hit F5 to test plugin. Because settings.json is not part of the extension. I see in scope inspector.

textmate scopes positioning.FMAX

but foreground is

foreground  No theme selector

comment.line.semicolon is working and coloring ;comments green

This doesn't work

{
      "name": "positioning.FMAX",
      "match": "\\bFMAX\\b",
      "settings": {
        "foreground": "#ff0000"
      }
 }

I just want simple way to color syntax like in setting.json. I have tried for more than week now. Any help much appreciated.

I found answer here. https://stackoverflow.com/questions/46377151/how-to-customize-the-color-of-custom-syntax-tokens-in-vscode-extension — grab, Feb 18 '23 at 02:22

score 0 · Answer 1 · answered Feb 18 '23 at 01:57

look at vscode-extension-samples repo: https://github.com/microsoft/vscode-extension-samples/tree/main/theme-sample

You can describe your colors in json or tmTheme file and set it in package.json in contributes.themes. When debbugging started make sure that your custom theme selected as current for VSCode

Syntax coloring VSCode extension

1 Answers1