CODEWITHSUNDEEP
visual-studio-codevisual-studio-extensionstmlanguage
MaxRocket
MaxRocket

Reputation: 992

VSCode create custom colorized language syntax highlighter extension for a custom language

Where and how do we change the colors for the syntax highlighters for specific languages?

GOAL: Ideally, I'd like to:

1. Understand how to create an extension that modifies the colors of code

2. Branch and modify this extension to do what I want (but I can't find out which is the file to add colors to) Freemarker Highlighting Extension

All I've found was information on editor.tokenColorCustomizations for the editor in general, but this is apparently not allowed in settings.json for individual languages: "This setting does not support per-language configuration." **

VSCode error

I have found plenty of information on how to create your own language extensions, etc., but none of them deal with the code colorization details.

The search term "visual studio how to create an extension to color code a language" comes up with pretty much everything but what I'm trying to figure out.

It seems that Yo Code may be part of the solution, but again, no specifics about colorization.

Things I've researched / read:

Maybe it's obvious to some of you, but I am unable to find the answers I need. So if the SO community can help point me in the right direction without giving me a hard time, I'd appreciate it.

Upvotes: 1

Views: 2702

Answers (1)

rioV8
rioV8

Reputation: 28838

The TextMate language grammar gives a scope to certain parts of the file: keyword, string, number.

The Theme file has a section where it assigns colors to the TextMate scopes. From the generic to maybe the detailed scopes for a particular language. And most likely the semantic colors (unused variable, unreachable code, ...).

If your particular language already has a TextMate language you modify editor.tokenColorCustomizations in settings.json (VSC Configuration), and specific the textMateRule. Better to do it for a particular theme.

  "editor.tokenColorCustomizations": {
    "[One Dark Pro]": {
      "textMateRules": [
        { "scope":"punctuation.definition.comment",
          "settings": {"foreground": "#229977"}
        },
        { "scope":"variable.other.property.js",
          "settings": {"foreground": "#00ff00"}
        }
      ]
    }
  }

These are dummy colors

Upvotes: 4

Related Questions