Can vim syntax highlight HTML color codes with their color

vimvimrc

It it possible to setup syntax highlighting in vim so that an html color sequence is colored in that color; e.g. #FF0000 would show up as red. I'd also be okay with it underlining the text that color like Visual Studio does.

So basically I'd be looking for the pattern \#([0-9a-fA-F]{3}){1,2} and then want to get the color for that and make that text that color.

Best Answer

Actually, as is often the case with vim, if you can think of the feature, someone has probably implemented it.

In this case, you are probably looking for the Colorizer plugin. Note that though this plugin “works best” with gvim, it supports 88 and 256 color terminals.

From the script site:

The idea is to highlight color names and codes in the same color that they represent. The plugin understands the W3-Colors (used for CSS files for example), the Color names from the X11 Window System and also codes in hex notation, like #FF0000 (which represents Red in the RGB color system). Additionally, it supports the CSS color specifications, e.g. rgb(RR,GG,BB) color representation in either absolutely values or as percentage and also the HVL Color representation like hvl(H,V,L)

Edit: You did not mention what operating system you're using, but the installation is fairly straight-forward even if done manually. However, if you are using Arch Linux, I packaged this plugin and it is available for installation through the AUR.

Screenshot for completion

Related Question