How to Modify a Color of an Element such as Inline Code in Visual Studio Code

The puzzle is, how to change a single selected color in the editor, in this case the color of text for inline code highlighted with a backtick (hello world).

Pavol Kutaj

·

Follow

Oct 6, 2023

--

Listen

Share

1. Inspect Editor Tokens and Scopes

• Go to the element in question.
• Run Developer: Inspect Editor Tokens and Scopes.
• Get the name of the SCOPE in this case, which is markup.inline.raw.string.markdown.

2. Open settings.json

• Open settings.json. Note: You have to open settings (ctrl + , ) and click the open settings button in the upper right corner.
• Insert the scope from step 1 (e.g., markup.inline.raw.string.markdown).
• Insert color.

"editor.tokenColorCustomizations": {
    "textMateRules": [
        {
            "scope": "markup.inline.raw.string.markdown",
            "settings": {
                "foreground": "#f88253",
            }
        }
    ]
}

• Save your changes.

3. Sources

• Change highlight text color in Visual Studio Code — Stack Overflow