CODEWITHSUNDEEP
notepad++visual-studio-code
Paul
Paul

Reputation: 91

VSCode Language-Specific Background Color Like Notepad++

I have recently moved to VSCode from using Notepad++ for many years. In Notepad++, if editing an HTML file for example, the default editor background is white, however it was able to colorize the background of different languages within the editor such as PHP and JavaScript between the opening and closing brackets. For example, any PHP code between would have a light yellow background and JavaScript was light blue.

Is this possible in VSCode? This was extremely useful and a much missed feature since I moved to VSCode.

Upvotes: 9

Views: 1407

Answers (2)

dkeeling
dkeeling

Reputation: 193

I know this question is old, but I found a solution by using the Highlight extension and a regular expression. Based on some of this information. Also relied on RegExr to figure out what I'm doing. I don't use regular expressions much at all.

Solution:

After installing the Highlight extension, in my settings.json file, I have the following code to gently highlight PHP tags:

{
    // Other settings before...
    "highlight.regexes": {
        "(<\\?php.+?\\?>)": {  // match multiline php code between "<?php" and "?>"
            "regexFlags": "gims", // Flags used g (global), i (case insensitive), m (multiline), and s (single line [dotall])
            "filterLanguageRegex": "php", // Only applies to PHP files, optional
            "decorations": [ 
                { "backgroundColor": "#f2f2f2" },
            ]
        }
    }
    // Other settings after...
}

Result:

enter image description here

Upvotes: 3

Matt Bierner
Matt Bierner

Reputation: 65463

This is not supported out of the box as of VS Code 1.24. This issue tracks per filetype themes

An extension could also hack something together to emulate this. See this guide for getting started writing an extension

Upvotes: 3

Related Questions