Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Customize block quote color in VSCode theme

I am using Nord theme in VScode. The block quotes in the markdown files look like this which is very illegible. How to change the text background?

enter image description here

I have tried the followings in User Settings but it not working:

"workbench.colorCustomizations": {
    "textBlockQuote.background": "#ff0000", // changes the markdown preview
    "editor.textBlockQuote.background": "#0000ff", // Property not allowed
    "[Nord]": {
        "textBlockQuote.background": "#ff0000", // changes the markdown preview
    },
},
"editor.tokenColorCustomizations": {
    "textBlockQuote.background": "#ff0000", // Property not allowed
    "editor.textBlockQuote.background": "#ff0000", // Property not allowed
    "[Nord]": {
        "textBlockQuote.background": "#ff0000", // Property not allowed 
        "editor.textBlockQuote.background": "#ff0000", // Property not allowed
    }
},
like image 454
Placid Avatar asked Oct 20 '25 04:10

Placid


2 Answers

The editor colorization comes from a textmate grammar. To override this, you need to use the textMateRules section of editor.tokenColorCustomizations

"editor.tokenColorCustomizations": {
    "[Nord]": {
        "textMateRules": [
            {
                "scope": "markup.quote.markdown",
                "settings": {
                    "foreground": "#f0f"
                }
            }
        ]
    }
}

The scope used here (markup.quote.markdown) is the textmate scope of markdown block quotes. You can use the Developer: Inspect TM Scopes command in VS Code to determine the target scope

Note that VS Code does not support setting the background color of text. This is tracked here

like image 147
Matt Bierner Avatar answered Oct 22 '25 03:10

Matt Bierner


I use Slack Theme Aubergine Dark and had to change:

   "editor.tokenColorCustomizations": {
        "[Slack Theme Aubergine Dark]": {
            "comments": "#ffa600",
            "textMateRules": [
                {
                    "scope":"markup.quote.markdown",
                    "settings": {
                        "foreground": "#FF0000",
                        "fontStyle": "bold"
                    }
                }
            ]

        },

    },

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!