Change style of VS Code Markdown `code` syntax highlighting

Question

I just installed VS Code 1.70.0 on a new machine, and imported settings by copying settings.json from the old machine. I opened a Markdown (.md) file, and oddly the code segments marked with backtick characters are very hard to see. For example, both "foo" and "bar" below appear to be the same style.

foo `bar`

I zoomed in with the magnifier, but even then the style looks almost identical to the other text—the red color is very faint. This is the same monitor as before, so maybe it is related to the video driver on the new computer.

Is there some way to tweak the syntax highlighting just for inline code formatting for Markdown in VS Code?

you can customize all theme and workspace colors, or just try a different theme, maybe they have tweaked a few colors — rioV8, Aug 09 '22 at 21:33
Related: https://stackoverflow.com/questions/55054156/how-to-customise-the-textmaterules-for-multiple-themes-in-vs-code — TT--, Jul 27 '23 at 19:39

score 6 · Answer 1 · answered Aug 10 '22 at 03:36

Yes, you can tweak the color by:

Go to Command Palette and find "Preferences: Open User Settings (JSON)"

In the settings.json that it opened, add the following field:


"editor.tokenColorCustomizations": {
  "[YOUR COLOR SCHEME]": {
     "textMateRules": [
      {
        "scope": "markup.inline.raw.string.markdown",
        "settings": {
          "foreground": "#aaff00",  // <-- Change your color here
        }
      }
    ]
  }
}

In the 2nd line of the above code, change YOUR COLOR SCHEME to the name of the color scheme you are using. For example, my color scheme is called "Monokai Pro" so the 2nd line would be:
```
"[Monokai Pro]" : {
```
Change the color to whatever you like in the "foreground" field. For example, I'm using #aaff00 (lime color) and this is how it looks like:

Tip

You may wonder how do I know that the "scope" field should be "markup.inline.raw.string.markdown". To see which TextMate scope that the markup inline code belongs to:

Open Command Palette and search for "Developer: Inspect Editor Tokens and Scopes"
Place your mouse caret inside the markdown inline code

Documentation references: "To tune the editor's syntax highlighting colors": https://code.visualstudio.com/docs/getstarted/themes#_editor-syntax-highlighting Syntax Highlighting and Tokenization: https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide And customize many themes at once: https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_59.md#extended-theme-customization-syntax — TT--, Jul 27 '23 at 19:30
I also found that multiple `textMateRules` `scope`s can be combined in an array like ["x", "y"]. — TT--, Jul 27 '23 at 19:43

Change style of VS Code Markdown `code` syntax highlighting

1 Answers1

Tip