2

I create custom langauge abc, from tutorial https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide, hence my files contains:

package.json:

{
    "contributes": {
        "languages": [
            {
                "id": "abc",
                "extensions": [".abc"]
            }
        ],
        "grammars": [
            {
                "language": "abc",
                "scopeName": "source.abc",
                "path": "./syntaxes/abc.tmGrammar.json"
            }
        ]
    }
}

abc.tmGrammar.json:

{
    "scopeName": "source.abc",
    "patterns": [{ "include": "#expression" }],
    "repository": {
        "expression": {
            "patterns": [{ "include": "#letter" }, { "include": "#paren-expression" }]
        },
        "letter": {
            "match": "a|b|c",
            "name": "keyword.letter"
        },
        "paren-expression": {
            "begin": "\\(",
            "end": "\\)",
            "beginCaptures": {
                "0": { "name": "punctuation.paren.open" }
            },
            "endCaptures": {
                "0": { "name": "punctuation.paren.close" }
            },
            "name": "expression.group",
            "patterns": [{ "include": "#expression" }]
        }
    }
}

And this works, because when I open VSC I can see and can pick abc language. Now how to color expression.group token to #ff0000? Where define color for it? In package.json in colors contribution point?

Sonny D
  • 897
  • 9
  • 29
  • Colors are provided by themes: https://code.visualstudio.com/docs/getstarted/themes. Usually you'd try to use common existing scope names that themes already target. https://stackoverflow.com/questions/42116486/where-can-i-find-a-list-of-all-possible-keys-for-tm-themes-for-syntax-highlighti – Gama11 Dec 28 '18 at 21:17
  • @Gama11 so I must create my custom theme based on existing one, and there set colors for my language? – Sonny D Dec 28 '18 at 21:32

1 Answers1

0

You can only set your own theme styling, or set color in user setting.

https://github.com/microsoft/vscode/issues/66729

you can see the scope in command developer inspect editor tokens and scopes


"editor.tokenColorCustomizations": {
    "textMateRules": [
        // JavaScript
        {
            "scope": "source.js keyword",
            "settings": {
                "foreground": "#FF0000"
            }
        },
        // TypeScript
        {
            "scope": "source.ts keyword",
            "settings": {
                "foreground": "#0000ff"
            }
        },
    ]
}

sheilaCat
  • 31
  • 2
  • For others: I left that project, and can't verify answer.. Someone in comment for question post mention the same solution so probably it's correct. I don't want leave unanswered question. – Sonny D Aug 26 '20 at 16:30