├── .gitignore ├── README.md ├── Screen shot 2010-07-04 at 0.19.46.png └── after └── syntax └── css.vim /.gitignore: -------------------------------------------------------------------------------- 1 | *.swp 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | vim-css-color plugin 2 | ==================== 3 | 4 | [css\_color.vim](http://www.vim.org/scripts/script.php?script_id=2150) plugin by Niklas Hofer is great, but lacks two important features: 5 | 6 | * Highlighting multiple colors on the same line (not sure if anyone uses it though) 7 | * rgb and rgba color notation for all those fancy CSS3 niceties 8 | 9 | So here is my patch. 10 | 11 | ![Screen shot](https://github.com/skammer/vim-css-color/raw/master/Screen%20shot%202010-07-04%20at%200.19.46.png) 12 | 13 | Configuration 14 | ------------- 15 | 16 | `g:cssColorVimDoNotMessMyUpdatetime` is used when updatetime value set by plugin (100ms) is interfering with your configuration. 17 | 18 | `let g:cssColorVimDoNotMessMyUpdatetime = 1` 19 | 20 | Post Scriptum 21 | ------------- 22 | 23 | Major kudos to [rainbow-mode.el](http://julien.danjou.info/rainbow-mode.html), from which I borrowed some code, and to [ConvertBase.vim](http://www.vim.org/scripts/script.php?script_id=54) plugin I used for base conversion. 24 | 25 | I highly recommend using [pathogen.vim](http://www.vim.org/scripts/script.php?script_id=2332) plugin for all your plugin installations. It's so good, it should be illegal. God bless Tim Pope. 26 | -------------------------------------------------------------------------------- /Screen shot 2010-07-04 at 0.19.46.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skammer/vim-css-color/417eaf8a20a6208e34ff167f5636b20f8f812ed8/Screen shot 2010-07-04 at 0.19.46.png -------------------------------------------------------------------------------- /after/syntax/css.vim: -------------------------------------------------------------------------------- 1 | " Language: Colored CSS Color Preview 2 | " Author: Max Vasiliev 3 | " Last Change: 2010 Jul 3 4 | " Licence: No Warranties. WTFPL. But please tell me! 5 | " Version: 0.7.1 6 | 7 | function! s:StrLen(str) 8 | return strlen(substitute(a:str, '.', 'x', 'g')) 9 | endfunction 10 | 11 | function! s:FGforBG(bg) 12 | " takes a 6hex color code and returns a matching color that is visible 13 | let pure = substitute(a:bg,'^#','','') 14 | let r = eval('0x'.pure[0].pure[1]) 15 | let g = eval('0x'.pure[2].pure[3]) 16 | let b = eval('0x'.pure[4].pure[5]) 17 | if r*30 + g*59 + b*11 > 12000 18 | return '#000000' 19 | else 20 | return '#ffffff' 21 | end 22 | endfunction 23 | 24 | function! s:SetMatcher(clr,pat) 25 | let group = 'cssColor'.substitute(a:clr,'^#','','') 26 | redir => s:currentmatch 27 | silent! exe 'syn list '.group 28 | redir END 29 | if s:currentmatch !~ a:pat.'\/' 30 | exe 'syn match '.group.' /'.a:pat.'/ contained' 31 | exe 'syn cluster cssColors add='.group 32 | if has('gui_running') 33 | exe 'hi '.group.' guifg='.s:FGforBG(a:clr) 34 | exe 'hi '.group.' guibg='.a:clr 35 | elseif &t_Co == 256 36 | exe 'hi '.group.' ctermfg='.s:Rgb2xterm(s:FGforBG(a:clr)) 37 | exe 'hi '.group.' ctermbg='.s:Rgb2xterm(a:clr) 38 | endif 39 | return 1 40 | else 41 | return 0 42 | endif 43 | endfunction 44 | 45 | "" the 6 value iterations in the xterm color cube 46 | let s:valuerange = [ 0x00, 0x5F, 0x87, 0xAF, 0xD7, 0xFF ] 47 | " 48 | "" 16 basic colors 49 | let s:basic16 = [ [ 0x00, 0x00, 0x00 ], [ 0xCD, 0x00, 0x00 ], [ 0x00, 0xCD, 0x00 ], [ 0xCD, 0xCD, 0x00 ], [ 0x00, 0x00, 0xEE ], [ 0xCD, 0x00, 0xCD ], [ 0x00, 0xCD, 0xCD ], [ 0xE5, 0xE5, 0xE5 ], [ 0x7F, 0x7F, 0x7F ], [ 0xFF, 0x00, 0x00 ], [ 0x00, 0xFF, 0x00 ], [ 0xFF, 0xFF, 0x00 ], [ 0x5C, 0x5C, 0xFF ], [ 0xFF, 0x00, 0xFF ], [ 0x00, 0xFF, 0xFF ], [ 0xFF, 0xFF, 0xFF ] ] 50 | : 51 | function! s:Xterm2rgb(color) 52 | " 16 basic colors 53 | let r=0 54 | let g=0 55 | let b=0 56 | if a:color<16 57 | let r = s:basic16[a:color][0] 58 | let g = s:basic16[a:color][1] 59 | let b = s:basic16[a:color][2] 60 | endif 61 | 62 | " color cube color 63 | if a:color>=16 && a:color<=232 64 | let color=a:color-16 65 | let r = s:valuerange[(color/36)%6] 66 | let g = s:valuerange[(color/6)%6] 67 | let b = s:valuerange[color%6] 68 | endif 69 | 70 | " gray tone 71 | if a:color>=233 && a:color<=253 72 | let r=8+(a:color-232)*0x0a 73 | let g=r 74 | let b=r 75 | endif 76 | let rgb=[r,g,b] 77 | return rgb 78 | endfunction 79 | 80 | function! s:pow(x, n) 81 | let x = a:x 82 | for i in range(a:n-1) 83 | let x = x*a:x 84 | return x 85 | endfunction 86 | 87 | let s:colortable=[] 88 | for c in range(0, 254) 89 | let color = s:Xterm2rgb(c) 90 | call add(s:colortable, color) 91 | endfor 92 | 93 | " selects the nearest xterm color for a rgb value like #FF0000 94 | function! s:Rgb2xterm(color) 95 | let best_match=0 96 | let smallest_distance = 10000000000 97 | let r = eval('0x'.a:color[1].a:color[2]) 98 | let g = eval('0x'.a:color[3].a:color[4]) 99 | let b = eval('0x'.a:color[5].a:color[6]) 100 | for c in range(0,254) 101 | let d = s:pow(s:colortable[c][0]-r,2) + s:pow(s:colortable[c][1]-g,2) + s:pow(s:colortable[c][2]-b,2) 102 | if d 204, 100% -> 255, etc. 160 | " This piece of code was ported from lisp. 161 | " http://julien.danjou.info/rainbow-mode.html 162 | fun! s:RGBRelativeToAbsolute(value) 163 | let string_length = s:StrLen(a:value)-1 164 | if strpart(a:value, string_length, 1) == '%' 165 | let hex_value = s:ConvertToBase( 255*strpart(a:value, 0, string_length)/100, 16 ) 166 | if len(hex_value) == 1 167 | return "0".hex_value 168 | endif 169 | return hex_value 170 | else 171 | let hex_value = s:ConvertToBase( a:value, 16 ) 172 | if len( hex_value ) == 1 173 | return "0".hex_value 174 | else 175 | return hex_value 176 | endif 177 | endif 178 | endf 179 | 180 | function! s:PreviewCSSColorInLine(where) 181 | " TODO use cssColor matchdata 182 | let n = 1 183 | let foundcolor = matchstr( getline(a:where), '#[0-9A-Fa-f]\{3,6\}\>' ) 184 | while foundcolor != '' 185 | if foundcolor =~ '#\x\{6}$' 186 | let color = foundcolor 187 | elseif foundcolor =~ '#\x\{3}$' 188 | let color = substitute(foundcolor, '\(\x\)\(\x\)\(\x\)', '\1\1\2\2\3\3', '') 189 | else 190 | let color = '' 191 | endif 192 | 193 | if color != '' 194 | call s:SetMatcher(color,foundcolor) 195 | endif 196 | 197 | let n+=1 198 | let foundcolor = matchstr( getline(a:where), '#[0-9A-Fa-f]\{3,6}', 0, n ) 199 | endwhile 200 | 201 | 202 | let n = 1 203 | let foundcolorlist = matchlist( getline(a:where), 'rgb[a]\=(\(\d\{1,3}\s*%\=\),\s*\(\d\{1,3}\s*%\=\),\s*\(\d\{1,3}\s*%\=\).\{-})', 0, n ) 204 | while len(foundcolorlist) != 0 205 | let foundcolorlist[1] = s:RGBRelativeToAbsolute( foundcolorlist[1] ) 206 | let foundcolorlist[2] = s:RGBRelativeToAbsolute( foundcolorlist[2] ) 207 | let foundcolorlist[3] = s:RGBRelativeToAbsolute( foundcolorlist[3] ) 208 | 209 | let color = "#".join( foundcolorlist[1:3], "" ) 210 | 211 | call s:SetMatcher( color, foundcolorlist[0] ) 212 | 213 | let n+=1 214 | let foundcolorlist = matchlist( getline(a:where), 'rgb[a]\=(\(\d\{1,3}\s*%\=\),\s*\(\d\{1,3}\s*%\=\),\s*\(\d\{1,3}\s*%\=\).\{-})', 0, n ) 215 | endw 216 | return 0 217 | endfunction 218 | 219 | if has("gui_running") || &t_Co==256 220 | " HACK modify cssDefinition to add @cssColors to its contains 221 | redir => s:olddef 222 | silent! syn list cssDefinition 223 | redir END 224 | if s:olddef != '' 225 | let s:b = strridx(s:olddef,'matchgroup') 226 | if s:b != -1 227 | exe 'syn region cssDefinition '.strpart(s:olddef,s:b).',@cssColors' 228 | endif 229 | endif 230 | 231 | " w3c Colors 232 | let i = s:SetNamedColor('#800000', 'maroon') 233 | let i = s:SetNamedColor('#ff0000', 'red') 234 | let i = s:SetNamedColor('#ffA500', 'orange') 235 | let i = s:SetNamedColor('#ffff00', 'yellow') 236 | let i = s:SetNamedColor('#808000', 'olive') 237 | let i = s:SetNamedColor('#800080', 'purple') 238 | let i = s:SetNamedColor('#ff00ff', 'fuchsia') 239 | let i = s:SetNamedColor('#ffffff', 'white') 240 | let i = s:SetNamedColor('#00ff00', 'lime') 241 | let i = s:SetNamedColor('#008000', 'green') 242 | let i = s:SetNamedColor('#000080', 'navy') 243 | let i = s:SetNamedColor('#0000ff', 'blue') 244 | let i = s:SetNamedColor('#00ffff', 'aqua') 245 | let i = s:SetNamedColor('#008080', 'teal') 246 | let i = s:SetNamedColor('#000000', 'black') 247 | let i = s:SetNamedColor('#c0c0c0', 'silver') 248 | let i = s:SetNamedColor('#808080', 'gray') 249 | 250 | " extra colors 251 | let i = s:SetNamedColor('#F0F8FF','AliceBlue') 252 | let i = s:SetNamedColor('#FAEBD7','AntiqueWhite') 253 | let i = s:SetNamedColor('#7FFFD4','Aquamarine') 254 | let i = s:SetNamedColor('#F0FFFF','Azure') 255 | let i = s:SetNamedColor('#F5F5DC','Beige') 256 | let i = s:SetNamedColor('#FFE4C4','Bisque') 257 | let i = s:SetNamedColor('#FFEBCD','BlanchedAlmond') 258 | let i = s:SetNamedColor('#8A2BE2','BlueViolet') 259 | let i = s:SetNamedColor('#A52A2A','Brown') 260 | let i = s:SetNamedColor('#DEB887','BurlyWood') 261 | let i = s:SetNamedColor('#5F9EA0','CadetBlue') 262 | let i = s:SetNamedColor('#7FFF00','Chartreuse') 263 | let i = s:SetNamedColor('#D2691E','Chocolate') 264 | let i = s:SetNamedColor('#FF7F50','Coral') 265 | let i = s:SetNamedColor('#6495ED','CornflowerBlue') 266 | let i = s:SetNamedColor('#FFF8DC','Cornsilk') 267 | let i = s:SetNamedColor('#DC143C','Crimson') 268 | let i = s:SetNamedColor('#00FFFF','Cyan') 269 | let i = s:SetNamedColor('#00008B','DarkBlue') 270 | let i = s:SetNamedColor('#008B8B','DarkCyan') 271 | let i = s:SetNamedColor('#B8860B','DarkGoldenRod') 272 | let i = s:SetNamedColor('#A9A9A9','DarkGray') 273 | let i = s:SetNamedColor('#A9A9A9','DarkGrey') 274 | let i = s:SetNamedColor('#006400','DarkGreen') 275 | let i = s:SetNamedColor('#BDB76B','DarkKhaki') 276 | let i = s:SetNamedColor('#8B008B','DarkMagenta') 277 | let i = s:SetNamedColor('#556B2F','DarkOliveGreen') 278 | let i = s:SetNamedColor('#FF8C00','Darkorange') 279 | let i = s:SetNamedColor('#9932CC','DarkOrchid') 280 | let i = s:SetNamedColor('#8B0000','DarkRed') 281 | let i = s:SetNamedColor('#E9967A','DarkSalmon') 282 | let i = s:SetNamedColor('#8FBC8F','DarkSeaGreen') 283 | let i = s:SetNamedColor('#483D8B','DarkSlateBlue') 284 | let i = s:SetNamedColor('#2F4F4F','DarkSlateGray') 285 | let i = s:SetNamedColor('#2F4F4F','DarkSlateGrey') 286 | let i = s:SetNamedColor('#00CED1','DarkTurquoise') 287 | let i = s:SetNamedColor('#9400D3','DarkViolet') 288 | let i = s:SetNamedColor('#FF1493','DeepPink') 289 | let i = s:SetNamedColor('#00BFFF','DeepSkyBlue') 290 | let i = s:SetNamedColor('#696969','DimGray') 291 | let i = s:SetNamedColor('#696969','DimGrey') 292 | let i = s:SetNamedColor('#1E90FF','DodgerBlue') 293 | let i = s:SetNamedColor('#B22222','FireBrick') 294 | let i = s:SetNamedColor('#FFFAF0','FloralWhite') 295 | let i = s:SetNamedColor('#228B22','ForestGreen') 296 | let i = s:SetNamedColor('#DCDCDC','Gainsboro') 297 | let i = s:SetNamedColor('#F8F8FF','GhostWhite') 298 | let i = s:SetNamedColor('#FFD700','Gold') 299 | let i = s:SetNamedColor('#DAA520','GoldenRod') 300 | let i = s:SetNamedColor('#808080','Grey') 301 | let i = s:SetNamedColor('#ADFF2F','GreenYellow') 302 | let i = s:SetNamedColor('#F0FFF0','HoneyDew') 303 | let i = s:SetNamedColor('#FF69B4','HotPink') 304 | let i = s:SetNamedColor('#CD5C5C','IndianRed') 305 | let i = s:SetNamedColor('#4B0082','Indigo') 306 | let i = s:SetNamedColor('#FFFFF0','Ivory') 307 | let i = s:SetNamedColor('#F0E68C','Khaki') 308 | let i = s:SetNamedColor('#E6E6FA','Lavender') 309 | let i = s:SetNamedColor('#FFF0F5','LavenderBlush') 310 | let i = s:SetNamedColor('#7CFC00','LawnGreen') 311 | let i = s:SetNamedColor('#FFFACD','LemonChiffon') 312 | let i = s:SetNamedColor('#ADD8E6','LightBlue') 313 | let i = s:SetNamedColor('#F08080','LightCoral') 314 | let i = s:SetNamedColor('#E0FFFF','LightCyan') 315 | let i = s:SetNamedColor('#FAFAD2','LightGoldenRodYellow') 316 | let i = s:SetNamedColor('#D3D3D3','LightGray') 317 | let i = s:SetNamedColor('#D3D3D3','LightGrey') 318 | let i = s:SetNamedColor('#90EE90','LightGreen') 319 | let i = s:SetNamedColor('#FFB6C1','LightPink') 320 | let i = s:SetNamedColor('#FFA07A','LightSalmon') 321 | let i = s:SetNamedColor('#20B2AA','LightSeaGreen') 322 | let i = s:SetNamedColor('#87CEFA','LightSkyBlue') 323 | let i = s:SetNamedColor('#778899','LightSlateGray') 324 | let i = s:SetNamedColor('#778899','LightSlateGrey') 325 | let i = s:SetNamedColor('#B0C4DE','LightSteelBlue') 326 | let i = s:SetNamedColor('#FFFFE0','LightYellow') 327 | let i = s:SetNamedColor('#32CD32','LimeGreen') 328 | let i = s:SetNamedColor('#FAF0E6','Linen') 329 | let i = s:SetNamedColor('#FF00FF','Magenta') 330 | let i = s:SetNamedColor('#66CDAA','MediumAquaMarine') 331 | let i = s:SetNamedColor('#0000CD','MediumBlue') 332 | let i = s:SetNamedColor('#BA55D3','MediumOrchid') 333 | let i = s:SetNamedColor('#9370D8','MediumPurple') 334 | let i = s:SetNamedColor('#3CB371','MediumSeaGreen') 335 | let i = s:SetNamedColor('#7B68EE','MediumSlateBlue') 336 | let i = s:SetNamedColor('#00FA9A','MediumSpringGreen') 337 | let i = s:SetNamedColor('#48D1CC','MediumTurquoise') 338 | let i = s:SetNamedColor('#C71585','MediumVioletRed') 339 | let i = s:SetNamedColor('#191970','MidnightBlue') 340 | let i = s:SetNamedColor('#F5FFFA','MintCream') 341 | let i = s:SetNamedColor('#FFE4E1','MistyRose') 342 | let i = s:SetNamedColor('#FFE4B5','Moccasin') 343 | let i = s:SetNamedColor('#FFDEAD','NavajoWhite') 344 | let i = s:SetNamedColor('#FDF5E6','OldLace') 345 | let i = s:SetNamedColor('#6B8E23','OliveDrab') 346 | let i = s:SetNamedColor('#FF4500','OrangeRed') 347 | let i = s:SetNamedColor('#DA70D6','Orchid') 348 | let i = s:SetNamedColor('#EEE8AA','PaleGoldenRod') 349 | let i = s:SetNamedColor('#98FB98','PaleGreen') 350 | let i = s:SetNamedColor('#AFEEEE','PaleTurquoise') 351 | let i = s:SetNamedColor('#D87093','PaleVioletRed') 352 | let i = s:SetNamedColor('#FFEFD5','PapayaWhip') 353 | let i = s:SetNamedColor('#FFDAB9','PeachPuff') 354 | let i = s:SetNamedColor('#CD853F','Peru') 355 | let i = s:SetNamedColor('#FFC0CB','Pink') 356 | let i = s:SetNamedColor('#DDA0DD','Plum') 357 | let i = s:SetNamedColor('#B0E0E6','PowderBlue') 358 | let i = s:SetNamedColor('#BC8F8F','RosyBrown') 359 | let i = s:SetNamedColor('#4169E1','RoyalBlue') 360 | let i = s:SetNamedColor('#8B4513','SaddleBrown') 361 | let i = s:SetNamedColor('#FA8072','Salmon') 362 | let i = s:SetNamedColor('#F4A460','SandyBrown') 363 | let i = s:SetNamedColor('#2E8B57','SeaGreen') 364 | let i = s:SetNamedColor('#FFF5EE','SeaShell') 365 | let i = s:SetNamedColor('#A0522D','Sienna') 366 | let i = s:SetNamedColor('#87CEEB','SkyBlue') 367 | let i = s:SetNamedColor('#6A5ACD','SlateBlue') 368 | let i = s:SetNamedColor('#708090','SlateGray') 369 | let i = s:SetNamedColor('#708090','SlateGrey') 370 | let i = s:SetNamedColor('#FFFAFA','Snow') 371 | let i = s:SetNamedColor('#00FF7F','SpringGreen') 372 | let i = s:SetNamedColor('#4682B4','SteelBlue') 373 | let i = s:SetNamedColor('#D2B48C','Tan') 374 | let i = s:SetNamedColor('#D8BFD8','Thistle') 375 | let i = s:SetNamedColor('#FF6347','Tomato') 376 | let i = s:SetNamedColor('#40E0D0','Turquoise') 377 | let i = s:SetNamedColor('#EE82EE','Violet') 378 | let i = s:SetNamedColor('#F5DEB3','Wheat') 379 | let i = s:SetNamedColor('#F5F5F5','WhiteSmoke') 380 | let i = s:SetNamedColor('#9ACD32','YellowGreen') 381 | 382 | 383 | 384 | let i = 1 385 | while i <= line("$") 386 | call s:PreviewCSSColorInLine(i) 387 | let i = i+1 388 | endwhile 389 | unlet i 390 | 391 | autocmd CursorMoved * silent call s:PreviewCSSColorInLine('.') 392 | autocmd CursorMovedI * silent call s:PreviewCSSColorInLine('.') 393 | if !exists('g:cssColorVimDoNotMessMyUpdatetime') 394 | set ut=100 395 | endif 396 | 397 | endif 398 | --------------------------------------------------------------------------------