1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Adding Custom Syntax Highlighting to a Theme in VSCode

    vscodeVS Code

    VSCode Themes are a quick way to update the color scheme and syntax highlighting of your code, but you might find your favorite theme isn't quite perfect. VSCode supports customizations that allow you to fix that problem.

    In this lesson, I add settings to update the syntax highlighting for the Synthwave '84 theme in Markdown and MDX files. We do this by inspecting TM scopes and making custom rules in our settings.json.

    The settings I used are:

    javascript"editor.tokenColorCustomizations": {
      "[SynthWave '84]": {
        "textMateRules": [
          {
            "scope": "markup.inline.raw",
            "settings": {
              "foreground": "#72f1b8",
            }
          },
          {
            "scope": "markup.italic.markdown",
            "settings": {
              "foreground": "#36f9f6",
              "fontStyle": "italic"
            }
          },
        ]
      }
    }