├── README └── syntax └── css.vim /README: -------------------------------------------------------------------------------- 1 | This is a mirror of http://www.vim.org/scripts/script.php?script_id=3220 2 | 3 | 4 | Syntax highlights for full CSS2, most of HTML5 & CSS3 properties (include prefix like -moz-). 5 | 6 | Preview: 7 | 8 | Molokai sheme: 9 | 10 | https://img.skitch.com/20120531-nt3x6qcgkjj7huarpfsh65cmph.jpg 11 | 12 | Slate scheme: 13 | 14 | https://img.skitch.com/20120531-ju922dsa9u68ib7cbwq27yaygj.jpg 15 | 16 | Known issue: 17 | 18 | - May not collaborate with some plugins, e.g. CSS Color, Sass 19 | - Some properties can't highlighted well with prefix 20 | - CSS3 animation properties highlighting 21 | 22 | Because of this plugin is built for standard CSS and not compatible with original css.vim[1], if you run into any error that related to CSS, you may need this: 23 | 24 | Sass: 25 | 26 | How to get rid of the error: 27 | 28 | - edit `sass.vim`, go to line 16, delete `cssValue.*,` 29 | - edit your `.vimrc`, add `au BufRead,BufNewFile *.sass set filetype=css` 30 | 31 | Or, try css3 syntax[2] or vim-css3-syntax[3]. 32 | 33 | ---- 34 | 35 | [1] https://github.com/ChrisYip/Better-CSS-Syntax-for-Vim/issues/9#issuecomment-6034606 36 | [2] http://www.vim.org/scripts/script.php?script_id=3042 37 | [3] https://github.com/hail2u/vim-css3-syntax 38 | -------------------------------------------------------------------------------- /syntax/css.vim: -------------------------------------------------------------------------------- 1 | " Better CSS Syntax for Vim 2 | " Language: Cascading Style Sheets 3 | " Maintainer: Chris Yip , twitter: @chrisyipw 4 | " URL: http://www.vim.org/scripts/script.php?script_id=3220 5 | " GIT: http://github.com/ChrisYis/Better-CSS-Syntax-for-Vim 6 | " Last Update: 2012/5/29 7 | " Full CSS2, most of HTML5 & CSS3 properties (include prefix like -moz-) supported 8 | 9 | " Quit when a syntax file was already loaded 10 | if exists("b:current_syntax") 11 | finish 12 | endif 13 | 14 | syn case ignore 15 | set iskeyword+=- 16 | 17 | syn region cssAtkeyword start=/@\(media\|font-face\|page\|keyframes\)/ end=/\ze{/ contains=cssAtType, cssAtkey, cssPseudo, cssValFn, cssValBlock 18 | syn region cssAtkeyword start=/@\(import\|charset\|namespace\)/ end=/\ze;/ contains=cssAtType, cssAtkey, cssPseudo, cssValFn, cssValBlock 19 | 20 | syn keyword cssAtType media import charset font-face page keyframes namespace contained 21 | syn keyword cssAtkey all braille embossed handheld print projection screen speech tty tv contained 22 | 23 | syn region cssValBlock start=/(/ end=/)/ contained contains=cssAtProps 24 | 25 | syn match cssAtProps /[^()]*/ contained contains=cssMediaProp,cssAtValBlock 26 | syn keyword cssMediaProp grid monochrome orientation scan contained 27 | syn match cssMediaProp /color\(-index\)\=\ze\s*[:)]/ contained 28 | syn match cssMediaProp /\(\(device\)-\)\=aspect-ratio\ze\s*[:)]/ contained 29 | syn match cssMediaProp /\(\(max\|min\)-\)\=device-\(height\|width\)\ze\s*[:)]/ contained 30 | syn match cssMediaProp /\(\(max\|min\)-\)\=\(height\|width\)\ze\s*[:)]/ contained 31 | 32 | syn region cssAtValBlock start=/:\zs/ end=/\ze[)]/ contained contains=cssAttr,cssColor,cssImportant,cssNumber,cssUnits,cssQuote,cssFunction 33 | 34 | syn region cssValFn start=/\/ 48 | syn match cssPseudo /\:first\-\(child\)\>/ 49 | syn match cssPseudo /\:\{1,2\}first\-\(letter\|line\)\>/ 50 | syn match cssPseudo /\:\(last\|only\)-child\>/ 51 | syn match cssPseudo /\:\(first\|last\|only\)-of-type\>/ 52 | syn match cssPseudo /\:nth\(-last\)\{0,1\}-child([0-9]*[n]*)/ 53 | syn match cssPseudo /\:nth\(-last\)\{0,1\}-of-type([0-9]*[n]*)/ 54 | syn match cssPseudo /\:not([#\.]\{0,\}\S\+)/ 55 | syn match cssPseudo /\:lang([a-zA-Z]\{2\}\(-[a-zA-Z]\{2\}\)\{0,1\})\>/ 56 | syn match cssPseudo /\:read\-\(only\|write\)\>/ 57 | syn match cssPseudo /\:\{1,2\}\(after\|before\)\>/ 58 | syn match cssPseudo /\:\{2\}selection\>/ 59 | syn match cssPseudo /\:\{2\}value\>/ 60 | syn match cssPseudo /\:\{2\}progress-bar\>/ 61 | 62 | syn region cssFuncRegion start=/{/ end=/}/ contains=cssPropRegion 63 | 64 | syn match cssPropRegion /[^{}]*/ contained contains=cssProp,cssAttrBlock,cssPrefix,cssComment transparent 65 | 66 | syn region cssAttrBlock start=/:\zs/ end=/\ze[;}]\{1\}/ contained contains=cssAttr,cssColor,cssImportant,cssNumber,cssUnits,cssQuote,cssFunction 67 | 68 | syn keyword cssAttr above absolute accent adjacent after alias all alphabetic alternate always auto avoid balance baseline back before behind below blink block bold bolder border both bottom capitalize caption cell center central circle clear clone code collapse compact copy crop cross crosshair current dashed default digits disc discard dot dotted double embed end fast faster fill first fixed forward front hanging help here hidden hide high higher horizontal icon ideographic inherit inhibit initial invert italic justify kashida landscape last left level lighter linear loud low lower ltr mathematical manual medium meet menu middle modal move multiple moderate narrower new none normal nowrap oblique overline parent perceptual pointer portrait progress reduced relative reverse ridge right root rtl same saturation scroll separate show silent single slice slide slow slower solid soft square start static stretch strong sub super suppress tab text thick thin tibetan top underline unrestricted vertical visible wait wider window contained 69 | 70 | syn match cssAttr /\/ contained 71 | 72 | syn match cssAttr /\<\(absolute\|relative\)-colorimetric\>/ contained 73 | syn match cssAttr /<\(pause\|rest\)-\(after\|before\)\>/ contained 74 | syn match cssAttr /\<\(x-\)\=\(weak\|strong\|low\|high\)\>/ contained 75 | syn match cssAttr /\(in\|out\)\(set\|side\)/ contained 76 | syn match cssAttr /\<\(block\|inline\)-axis\>/ contained 77 | syn match cssAttr /\<\(border\|content\)-box\>/ contained 78 | syn match cssAttr /\/ contained 79 | syn match cssAttr /\/ contained 80 | syn match cssAttr /\/ contained 81 | syn match cssAttr /\/ contained 82 | syn match cssAttr /\/ contained 83 | syn match cssAttr /\/ contained 84 | syn match cssAttr /\<\(exclude\|include\)-ruby\>/ contained 85 | syn match cssAttr /\<\(consider\|disregard\)-shifts\>/ contained 86 | syn match cssAttr /\/ contained 87 | syn match cssAttr /\<\(\(\(block\|inline\)-line\)\|max\|grid\)-height\>/ contained 88 | syn match cssAttr /\<\(far\|left\|right\)-side\>/ contained 89 | syn match cssAttr /\<\(left\|right\)wards\>/ contained 90 | syn match cssAttr /\<\(center\|far\)-\(left\|right\)\>/ contained 91 | syn match cssAttr /\<\(\(text-\)\=\(before\|after\)-\(edge\|central\|ideographic\|alphabetic\|hanging\|mathematical\|use-script\)\)\>/ contained 92 | syn match cssAttr /\<\([nwse]\{1,4\}\|col\|row\)-resize\>/ contained 93 | syn match cssAttr /\/ contained 94 | syn match cssAttr /\/ contained 95 | syn match cssAttr /\<\(\(ultra\|extra\|semi\)-\)\=\(condensed\|expanded\)\>/ contained 96 | syn match cssAttr /\/ contained 97 | syn match cssAttr /\/ contained 98 | syn match cssAttr /\<\(end\|line\)-edge\>/ contained 99 | syn match cssAttr /\/ contained 100 | syn match cssAttr /\<\(upper\|lower\)case\>/ contained 101 | syn match cssAttr /\/ contained 102 | syn match cssAttr /\<\(literal\|no\)-punctuation\>/ contained 103 | syn match cssAttr /\/ contained 104 | syn match cssAttr /\<\(font\|text\|max\)-size\>/ contained 105 | syn match cssAttr /\/ contained 106 | syn match cssAttr /\/ contained 107 | syn match cssAttr /\/ contained 108 | syn match cssAttr /\/ contained 109 | 110 | syn match cssProp /\(appearance\|backface-visibility\|binding\|bottom\|clear\|clip\|color\|columns\|content\|crop\|cursor\|direction\|elevation\|empty-cells\|hanging-punctuation\|height\|hyphens\|icon\|inline-box-align\|left\|letter-spacing\|move-to\|nbsp-mode\|opacity\|orphans\|phonemes\|position\|play-during\|presentation-level\|punctuation-trim\|quotes\|rendering-intent\|resize\|richness\|right\|size\|speech-rate\|src\|stress\|string-set\|tab-size\|table-layout\|top\|unicode-bidi\|vertical-align\|visibility\|volume\|widows\|width\|z-index\|zimuth\)\ze\s*:/ contained 111 | 112 | syn match cssProp /\(\<\|\)alignment-\(adjust\|baseline\)\>\ze\s*:/ contained 113 | syn match cssProp /\(\<\|\)animation\(-\(delay\|direction\|duration\|iteration-count\|name\|play-state\|timing-function\)\)\{0,1\}\>\ze\s*:/ contained 114 | syn match cssProp /\(\<\|\)background\(-\(attachment\|break\|clip\|color\|image\|origin\|position\|repeat\|size\)\)\{0,1\}\>\ze\s*:/ contained 115 | syn match cssProp /\(\<\|\)baseline-shift\|caption-side\|color-profile\>\ze\s*:/ contained 116 | syn match cssProp /\(\<\|\)bookmark-\(label\|level\|target\)\>\ze\s*:/ contained 117 | syn match cssProp /\(\<\|\)border\(-\(bottom\|collapse\|color\|image\|left\|length\|radius\|right\|spacing\|style\|top\|width\)\)\{0,1\}\>\ze\s*:/ contained 118 | syn match cssProp /\(\<\|\)border\(-\(bottom\|left\|right\|top\)\(-\(color\|style\|wdith\)\)\{0,1\}\)\{0,1\}\>\ze\s*:/ contained 119 | syn match cssProp /\(\<\|\)border-\(bottom\|top\)-\(left\|right\)-radius\>\ze\s*:/ contained 120 | syn match cssProp /\(\<\|\)box-\(align\|decoration-break\|direction\|flex\|\(flex\|ordinal\)-group\|lines\|orient\|pack\|shadow\|sizing\)\>\ze\s*:/ contained 121 | syn match cssProp /\(\<\|\)column\(-\(\break-\(after\|before\)\|count\|fill\|gap\|rule\(-\(color\|style\|width\)\)\{0,1\}\)\|span\|width\)\>\ze\s*:/ contained 122 | syn match cssProp /\(\<\|\)counter-\(increment\|reset\)\>\ze\s*:/ contained 123 | syn match cssProp /\(\<\|\)cue\(-\(after\|before\)\)\{0,1\}\>\ze\s*:/ contained 124 | syn match cssProp /\(\<\|\)display\(-\(model\|role\)\)\{0,1\}\>\ze\s*:/ contained 125 | syn match cssProp /\(\<\|\)dominant-baseline\>\ze\s*:/ contained 126 | syn match cssProp /\(\<\|\)drop-initial-\(\(\(after\|before\)-\(adjust\|align\)\)\|size\|value\)\>\ze\s*:/ contained 127 | syn match cssProp /\(\<\|\)fit\(-position\)\{0,1\}\>\ze\s*:/ contained 128 | syn match cssProp /\(\<\|\)float\>\(-offset\)\{0,1\}\ze\s*:/ contained 129 | syn match cssProp /\(\<\|\)font\(-\(family\|size\(-adjust\)\=\|stretch\|style\|variant\|weight\)\)\=\>\ze\s*:/ contained 130 | syn match cssProp /\(\<\|\)grid-\(columns\|rows\)\>\ze\s*:/ contained 131 | syn match cssProp /\(\<\|\)hyphenate-\(after\|before\|character\|lines\|resource\)\>\ze\s*:/ contained 132 | syn match cssProp /\(\<\|\)image-\(orientation\|resolution\)\>\ze\s*:/ contained 133 | syn match cssProp /\(\<\|\)line-\(height\|stacking\(-\(ruby\|shift\|strategy\)\)\=\)\>\ze\s*:/ contained 134 | syn match cssProp /\(\<\|\)list-style\(-\(image\|position\|type\)\)\=\>\ze\s*:/ contained 135 | syn match cssProp /\(\<\|\)\(margin\|padding\)\(-\(bottom\|left\|right\|start\|top\)\)\=\>\ze\s*:/ contained 136 | syn match cssProp /\(\<\|\)mark\(s\|-\(after\|before\)\)\=\>\ze\s*:/ contained 137 | syn match cssProp /\(\<\|\)\(max\|min\)-\(height\|width\)\>\ze\s*:/ contained 138 | syn match cssProp /\(\<\|\)nav-\(down\|index\|left\|right\|up\)\>\ze\s*:/ contained 139 | syn match cssProp /\(\<\|\)outline\(-\(color\|offset\|style\|width\)\)\=\>\ze\s*:/ contained 140 | syn match cssProp /\(\<\|\)overflow\(-\(style\|x\|y\)\)\=\>\ze\s*:/ contained 141 | syn match cssProp /\(\<\|\)page\(-\(break-\(after\|before\|inside\)\|policy\)\)\=\>\ze\s*:/ contained 142 | syn match cssProp /\(\<\|\)pause\(-\(after\|before\)\)\=\>\ze\s*:/ contained 143 | syn match cssProp /\(\<\|\)pitch\(-range\)\=\>\ze\s*:/ contained 144 | syn match cssProp /\(\<\|\)rest\(-\(after\|before\)\)\=\>\ze\s*:/ contained 145 | syn match cssProp /\(\<\|\)rotation\(-point\)\=\>\ze\s*:/ contained 146 | syn match cssProp /\(\<\|\)ruby-\(align\|overhang\|position\|span\)\>\ze\s*:/ contained 147 | syn match cssProp /\(\<\|\)speak\(-\(header\|numeral\|punctuation\)\)\=\>\ze\s*:/ contained 148 | syn match cssProp /\(\<\|\)target\(-\(name\|new\|position\)\)\=\>\ze\s*:/ contained 149 | syn match cssProp /\(\<\|\)text-\(align\(-last\)\=\|decoration\|emphasis\|height\|indent\|justify\|outline\|replace\|shadow\|transform\|wrap\|overflow\)\>\ze\s*:/ contained 150 | syn match cssProp /\(\<\|\)transition\(-\(delay\|duration\|property\|timing-function\)\)\=\>\ze\s*:/ contained 151 | syn match cssProp /\(\<\|\)voice-\(balance\|duration\|family\|pitch\(-range\)\=\|rate\|stress\|volume\)\>\ze\s*:/ contained 152 | syn match cssProp /\(\<\|\)white-space\(-collapse\)\=\>\ze\s*:/ contained 153 | syn match cssProp /\(\<\|\)word-\(break\|spacing\|wrap\)\>\ze\s*:/ contained 154 | syn match cssProp /\(\<\|\)user-\(drag\|modify\|select\)\>\ze\s*:/ contained 155 | syn match cssProp /\(\<\|\)marquee\(-\(direction\|play-count\|loop\|increment\|repetition\|speed\|style\)\)\>\ze\s*:/ contained 156 | syn match cssProp /\(\<\|\)mask\(-\(attachment\|box-image\|clip\|composite\|image\|position\|position-x\|position-y\|size\|repeat\|origin\)\)\>\ze\s*:/ contained 157 | syn match cssProp /\(\<\|\)transform\(-\(origin\|origin-x\|origin-y\|origin-z\|style\)\)\>\ze\s*:/ contained 158 | 159 | syn match cssSelector /\[[#\.]\{0,1\}\c[-a-z0-9]\+\([*^$]\{0,1\}=\c[-a-z0-9_'"]\+\)*\]/ 160 | 161 | syn match cssUnits /\d\@<=\(%\|cm\|deg\|dpi\|dpcm\|em\|ex\|\in\|mm\|pc\|pt\|px\|s\)\ze\s*[,;)}]\=/ contained 162 | 163 | syn match cssColor /#\(\x\{6\}\|\x\{3\}\)/ contained 164 | 165 | syn match cssImportant /!important\>/ contained 166 | 167 | syn region cssComment start=/\/\*/ end=/\*\// contains=@Spell 168 | 169 | syn region cssFunction start=/\c[-a-z0-9@]*(/ end=/)/ contained contains=cssPathFn,cssAttValFn 170 | 171 | syn region cssPathFn start=/\<\(url\|format\)\s*(\zs/ end=/\ze)/ contained 172 | 173 | syn region cssAttValFn start=/\<\(rotate\|rgba\|rgb\|hsl\|hsla\)\s*(\zs/ end=/\ze)/ contained contains=cssNumber,cssUnits 174 | 175 | syn match cssBraket /[{}]/ contained 176 | 177 | syn match cssQuote /\('.*'\|".*"\)/ contained 178 | 179 | " Define the default highlighting. 180 | command -nargs=+ HLink hi def link 181 | 182 | HLink cssAtkeyword Constant 183 | HLink cssAtType Identifier 184 | HLink cssAtkey Special 185 | HLink cssMediaProp Type 186 | HLink cssAtProps Function 187 | 188 | HLink cssAttr SpecialKey 189 | 190 | HLink cssAttValFn Function 191 | 192 | HLink cssValBlock Function 193 | HLink cssValFn Function 194 | 195 | HLink cssAttrBlock Normal 196 | 197 | HLink cssBraket Function 198 | 199 | HLink cssClass Function 200 | 201 | HLink cssColor Constant 202 | 203 | HLink cssComment Comment 204 | 205 | HLink cssError ErrorMsg 206 | 207 | HLink cssPathFn Directory 208 | 209 | HLink cssFunction Function 210 | HLink cssFnValBlock Function 211 | 212 | HLink cssFuncRegion Function 213 | 214 | HLink cssIdentifier Identifier 215 | 216 | HLink cssImportant PreProc 217 | 218 | HLink cssUnits Special 219 | 220 | HLink cssNumber Number 221 | 222 | HLink cssPrefix Special 223 | 224 | HLink cssProp Type 225 | 226 | HLink cssPropRegion Normal 227 | 228 | HLink cssPseudo Structure 229 | 230 | HLink cssQuote String 231 | 232 | HLink cssSelector Structure 233 | 234 | HLink cssString String 235 | 236 | HLink cssTagName Statement 237 | 238 | HLink cssURL String 239 | 240 | delcommand HLink 241 | 242 | let b:current_syntax = "css" 243 | syn sync minlines=10 244 | --------------------------------------------------------------------------------