VSCode custom code color (code highlighting) is implemented using VSCode built-in tools

Write in front

This is Ozelot. A college student who is learning to program and hopes to communicate and learn with you guys.

I think that the color matching of the code that suits us can help us identify the meaning of the identifier in the code and make it easier for us to read the code. Here I will share the little experience I have accumulated with you, and welcome everyone to add and point out the shortcomings, I will learn and update the content, thank you all.

This article may have to work on readability in the future. If you are not sure where you express your intentions, please feel free to raise them in the comment area.

final effect

Based on the color scheme Quiet Light . My color scheme has been placed in my GitHub repository , and will be updated. You are also welcome to submit suggestions or comments in the issue (such as color scheme errors).

Step teaching

Design your own color

Just like before writing the code, it is best to write the necessary comments to determine the idea. Before I change the color of the code, I first designed it. It is recommended that you decide what color to use for each area first, and then modify it. My design is: use purple for keywords related to code execution order; use green for type names; use orange for variables; use blue for functions; use lavender for operators; use rose red for numbers; use brown for strings.

and color dictionaries and and no color where I choose the color. These colors are more elegant and not dazzling. In addition, and の色 may have typesetting problems. It is recommended that you download them, delete the HTML elements that have problems, and view them.

Open VSCode's own review element

1. Press Shift + Ctrl + P (by default) to open the command window of "Show all commands", and enter shortcut to open the window of all commands.

2. Enter "inspectTMS" to find the "editor token and scope check (token and scope)" (my translation is not good, there may be inconsistencies in expression).

3. Double-click to set a shortcut key you like. My setting is Ctrl + Alt + I .

In this way, the preparatory work is basically completed.

Choose a basic color scheme

Click "File-User Settings-Color Theme" in the upper left corner (default Ctrl + K Ctrl + T ). Here everyone can select and preview with the up and down keys. I chose Quiet Light , which is a very cute style (good, strange tone stop).

Let's customize the color

Note: Prior to color matching for a language, make sure the language corresponding to the plug-in has been installed . Language plug-ins can sometimes help you display code highlighting more accurately.

At the code where you want to change the color, press the shortcut key you just set to open the "review element" (for example, my setting is Ctrl + Alt + I ), and you can see a page like this.

Among them, semantic token type in the second column is semantic highlighting, and textmate scopes below is token highlighting.

Create semantic highlighting

Note: "Semantic highlighting" ( editor.semanticTokenColorCustomizations ) priority greater than "token highlighting" ( editor.tokenColorCustomizations ), which may sometimes lead to unexpected results. If you do not want to set up their own token highlighting is covered, you can try to close the semantic highlighting, or submit to the issue of plug-ins, and skip the next section .

The semantic highlighting looks like this:

"editor.semanticTokenColorCustomizations":
{
    "enabled": true,
    "[Quiet Light]": {
        "rules": {
            "label": {
                "foreground": "#028760",
                "fontStyle": "bold"
            },
            "property": {
                "foreground": "#D9A62E",
                "fontStyle": ""
            },
            "class": "#67A70C",
            "typeParameter": "#9ed44c",
            "variable": {
                "fontStyle": ""
            },
            "parameter": {
                "fontStyle": ""
            },
            "enum": "#e198b4",
            "enumMember": "#eB9b6f",
            "interface": "#a7b446",
            "namespace": "#007bbb",
            "selfParameter": "#cf747b",
            "operatorOverload": "#a59aca",
            "comment": "#b3ada0"
        }
    }
}

1. Press Ctrl + , open the settings (default button. Some input methods may cause failure), press in the upper right corner to go to the configuration file page.
2. In the level within the first pair of braces in the configuration file "editor.semanticTokenColorCustomizations:{}" . At this time, if the code prompt is turned on, you should be able to see the prompt.
3. "enabled": true, in the newly entered braces to turn it on. For the sake of beauty, please wrap the line where appropriate, or use a formatter.
4. Change the line and enter "[Quiet Light]": {} . The curly brackets are the ones you chose in the previous chapter as the base theme.
5. "rules": {} in the newly entered braces to set up your rules.
6. Enter the name of the element you want to customize in the newly entered braces (how many times have I repeated this sentence), and enter the color you want to set at the back. The specific format can refer to the code above. If you want to set the font bold and italic, you can enter the braces and set it "fontStyle" You can use Ctrl + Space to view the code hints.

Create highlight based on token

The token highlighting looks like this:

"editor.tokenColorCustomizations": {
        "[Quiet Light]": {
            "comments": {
                "fontStyle": "",
                "foreground": "#b3ada0"
            },
            "keywords": {
                "foreground": "#bc64a4",
                "fontStyle": "bold"
            },
            "strings": "#98623c",
            "types": "#9ed44c",
            "numbers": "#e95295",
            "textMateRules": [
                {
                    "name": "Keywords",
                    "scope": "keyword.other.using.directive.cpp, keyword.other.typedef.cpp, keyword",
                    "settings": {
                        "foreground": "#bc64a4",
                        "fontStyle": "bold"
                    }
                },
                {
                    "name": "True and False and NULL and nullptr",
                    "scope": "constant.language.true.cpp, constant.language.false.cpp, constant.language.NULL.cpp, constant.language.nullptr.cpp, constant.language.python, constant.language.boolean.true.js, constant.language.boolean.false.js, constant.language.null.js, constant.language.undefined.js, constant.language.matlab, constant.language.null.ts, constant.language.undefined.ts, constant.language.boolean.false.ts, constant.language.boolean.true.ts, constant.language.json",
                    "settings": {
                        "foreground": "#c5c56a",
                        "fontStyle": "bold"
                    }
                },
                {
                    "name": "HTML: Attribute",
                    "scope": [
                        "meta.tag entity.other.attribute-name",
                        "entity.other.attribute-name.html"
                    ],
                    "settings": {
                        "foreground": "#f6ad49"
                    }
                },
                {
                    "name": "HTML: Tag name",
                    "scope": [
                        "entity.name.tag"
                    ],
                    "settings": {
                        "foreground": "#ac88ff"
                    }
                },
                // ...
                ]
        }
}

To create a highlight based on the token, first open the " textmate scopes " just mentioned, and then see 06161759d41a8d below. The first is the "most unique description" of this selected part. The lower token , the more it represents. Use the mouse to select the one you want (usually the first one), copy and paste it to textMateRules , copy and paste it after scope The format is as follows:

{
    "name": "你想要自定义的适用于这个scope的设置的名字",
    "scope": [
        "你刚复制的scope名放到这里。如果有多个，放到中括号对里",
        "如果只有一个，就不必创建中括号"
    ],
    "settings": {
        "foreground": "设置的前景色，就是显示出字的颜色",
        "fontStyle": "你想要的效果，加粗、倾斜等都有。"
        //按 Ctrl + Space (你的代码提示键)可以查看详细，我指fontStyle
    }
},

Reference

Before my own time configuration, reference configuration of the chiefs of . Then also reference to some VSCode of official document . But it's a long time, and you may not remember it clearly. If there are any omissions, please raise them.