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

Question

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." **

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:

TextMate language grammars (there is one for the language I'm trying to re-color (https://github.com/bburbach/textmate-freemarker-bundle/blob/master/FreeMarker.tmbundle/Syntaxes/FreeMarker.tmLanguage) and even an extension for Freemarker, but no way to change the color scheme
Gone through the repo for the extension I mention above but see nowhere that the colors are declared (https://github.com/dcortes92/vs-freemarker)
Various VSCode support pages on syntax highlighting (https://code.visualstudio.com/api/extension-guides/color-theme, https://code.visualstudio.com/docs/getstarted/settings, https://code.visualstudio.com/api/language-extensions/semantic-highlight-guide, https://code.visualstudio.com/api/references/theme-color
And lots of other random pages about syntax highlighting

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.

what if you can change the theme based on the languageId, the theme uses different colors for the same scope token, what is the reason you want keywords in blue in one language and in red in another language, the same for other scopes — rioV8, Jan 07 '22 at 22:36

rioV8 · Answer 1 · 2022-01-07T14:36:56.273

1

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

edited Jan 07 '22 at 14:36

answered Jan 07 '22 at 10:50

rioV8

24,506
3
32
49

Thanks, rioV8. Can you tell me which file in this extension is the correct one to modify? https://github.com/dcortes92/vs-freemarker – MaxRocket Jan 07 '22 at 14:33
@MaxRocket you can do it all in your `settings.json`, the colors are defined in the theme but can be customized in `settings.json` – rioV8 Jan 07 '22 at 14:35
rioV8 I don't see a settings.json file in that repo... – MaxRocket Jan 09 '22 at 00:14
2

`settings.json` is a file in your workspace `.vscode` folder or the global version – rioV8 Jan 09 '22 at 00:17

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

1 Answers1