Geek Answers Handbook

Customizing syntax highlighting in Visual Studio Code

I am currently trying to write an extension for a new file type (ANTLR) and wonder how to change the colors used to highlight syntax in Visual Studio code. For me, it looks as if it is not defined in the extension, but somewhere else. There are no preferences for colors, and I did not find a CSS file that defines this (which I expect, since vscode uses Electron). I also looked at the vscode settings file generated and the files that came with it, but don't know. Also, web searches did not help. So, I'm lost now.

Can someone give me some advice or point me to the relevant documents?

+16
source share
3 answers

A bit late for the party, but I'll add this here to save the next guy a few hours of searching.

Two concepts apply here:

  • language grammars that turn a text file into tokens with different scopes , and
  • themes that color these areas (hopefully) in an eye-pleasing way.

If you write your own grammar or convert from TextMate, etc., chances are that you are using areas other than those defined in the topic. In this case, there will be no clear difference between the tokens that you define, even if they are really defined.

There are two ways out of this. First, expand the theme with custom areas and color them as you wish. Not a good way, unless everyone who uses your language also doesn't like your color scheme. Another is to use (a limited set of) areas already defined and colored by VSCode and topic authors. Most likely, your language will look good in your chosen topic and good enough in others.

To give you an example, here is the comment area as defined by the dark default VSCode theme.

 "name": "Dark Visual Studio", "settings": [ { "scope": "comment", "settings": { "foreground": "#608b4e" } },

and here is the equivalent language fragment from C ++ grammar:

 "comments": { "patterns": [ { "captures": { "0": { "name": "punctuation.definition.comment.java" } }, "match": "/\\*\\*/", "name": "comment.block.empty.java" },

In fact, the language defines several tokens as needed, and since the topic says that comment.* Will be green, they will all be colored the same.

+15
source

Syntax highlighting rules are stored in .plist files (or, alternatively, in .tmLanguage files). In these files, different types of tokens are declared for syntax highlighting:

  • What is a keyword?
  • What is a string literal?
  • What is a comment?
  • and etc.

Take a look here for more information on this: https://code.visualstudio.com/Docs/customization/colorizer

You do not define colors in .plist files!

The relationship between token types and colors is performed in color theme ads.

Read more about this here https://code.visualstudio.com/Docs/customization/themes and here How to add a theme to Visual Studio code?

In general, this document is also useful when you are trying to extend VSCode: https://code.visualstudio.com/docs/extensionAPI/overview

+4
source

There is no need to patch the topic from the official documentation :

To set editor syntax highlight colors, use editor.tokenColorCustomizations in the user settings.json file

Besides simply setting up the token, you can completely redefine the TextMate rules with a slightly more complex setting, for example:

 "editor.tokenColorCustomizations": {"textMateRules": [{ "scope": "keyword.control.ref.latex", "settings": { "foreground": "#FF0000" } }]}
0
source

More articles:


All Articles