CODEWITHSUNDEEP
sublimetextsublimetext3sublime-text-plugin
nadidja
nadidja

Reputation: 33

How to deactivate the purple highlighting for html color names in sublime text 3?

I am using the plugin "Color Highlighter" that allows me to directly view the color used but the default purple highlighting is interfering with it, so I would like to disable this feature.

screenshot:

screenshot

Upvotes: 3

Views: 2095

Answers (1)

MattDMo
MattDMo

Reputation: 102862

So the problem you're experience actually isn't the fault of Color Highlighter, it's an issue with the CSS language definition. It's easy to fix, but requires a bit of setup first.

In ST3, packages are stored in zipped .sublime-package files, so to edit the language definition we'll need to extract the CSS package. This is easily accomplished using the PackageResourceViewer plugin. Install it through Package Control, then open the Command Palette and type prv to get the Package Resource Viewer: options. Select Package Resource Viewer: Open Resource, navigate down the list to CSS, then open the CSS.tmLanguage file. You should now be able to edit this file and save it, which will create a new file Packages/CSS/CSS.tmLanguage (where Packages is the folder opened by the Preferences -> Browse Packages... menu item) that you can open directly via the file menu if you need to alter it again. If you want to extract an entire package, just choose the Package Resource Viewer: Extract Package option.

Now that you've opened CSS.tmLanguage (set the syntax to XML if it isn't already), scroll down to line 291, which should read

<string>invalid.deprecated.color.w3c-non-standard-color-name.css</string>

Change it to 

<string>support.constant.color.color-name.css</string>

then save the file, and you should be all set. If the changes don't show up right away, try restarting Sublime - you may also need to close and reopen your file.

If everything worked (and it should), your CSS file should now look something like this (with the cursor in darkred:

underlined_solid

If you would like all colors to be filled instead of underlined, open Preferences -> Package Settings -> Color Highlighter -> Settings-User and, if it is empty, add the following:

{
    "ha_style": "filled"
}

If the file already has some contents, just add "ha_style": "filled" as the last line (make sure you put a comma , after the previous line). Save the file, switch back to your CSS file, and it should look like this now:

filled

Good luck!

Upvotes: 6

Related Questions