Adding Custom Syntax Highlighting to a Theme in VSCode
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:
"editor.tokenColorCustomizations": {
"[SynthWave '84]": {
"textMateRules": [
{
"scope": "markup.inline.raw",
"settings": {
"foreground": "#72f1b8",
}
},
{
"scope": "markup.italic.markdown",
"settings": {
"foreground": "#36f9f6",
"fontStyle": "italic"
}
},
]
}
}
Instructor: [00:00] My theme doesn't do all the syntax highlighting that I would really like it to do. How can I update VS Code to let me do that? I noticed that lenses here in italics isn't displayed differently, and neither is view and set that should be code blocks.
[00:16] I'm going to start by going to settings.json. I can create something called editor.tokenColorCustomizations. Inside of editor.tokenColorCustomizations, I can specify what theme I want us to go for. In my case, it's SynthWave '84.
[00:33] Next, I'm going to need to make some TextMate rules. But which TextMate rules do I make? Going back to my file, I can open up from the command palette Inspect TM Scopes. From here, as I select words, I could see their language, token type, font style, foreground, background, all these things. I can see specifically what scope that they are in.
[00:56] We can see that these code blocks are in the markup.inline.raw.string.markdown scope. We'll use some of that to set this. I can see that italics is in markup.italic.markdown.
[01:08] Going back to our settings, we can add these rules. We're going to create an object. The first key is scope. We're going to set that to markup.inline.raw. This will be for our little code snippets. We'll add some settings. A foreground of 72F1B8. I'll remove the font style for that one.
[01:30] The next one I want to make is for the italics. We'll make another object of scope. This time we'll set it to markup.italic.markdown. We'll set the color to 36F9F6, and the font style to italic. Save our file. If we go back to index.mdx, we now see our italics have updated, and so has our little code snippets.