HTML5 and CSS3 Syntax Color in VIM
Friday, February 3, 2012 EST
by: Eric Potvin
Tags:cssvimhtml
HTML5 and CSS3 (including media queries) are getting very popular lately. Reliable Internet browsers, such as Firefox or Chrome, adjust to the latest technologies quickly to insure we get the best user experience we can get. On the other hand, some editor didn't adapt (yet) to the latest new way to code and syntaxes.
This is the case for my favorite editor: VIM.
Gladly, I have a solution for those who share this feeling and love using VIM as their editor.
First, let's create the folder where we will create the .vim files.
mkdir -p ~/.vim/after/syntax/css
Then edit the HTML5 file:
vi .vim/after/syntax/html.vim
and use the following code:
" Vim syntax file
" Language: HTML (version 5)
" Maintainer: Rodrigo Machado <rcmachado [at] gmail [dot] com>
" URL: http://rm.blog.br/vim/syntax/html.vim
" Last Change: 2009 Aug 19
" License: Public domain
" (but let me know if you liked it :) )
"
" Note: This file just adds the new tags from HTML 5
" and don't replace default html.vim syntax file
" HTML 5 tags
syn keyword htmlTagName contained article aside audio bb canvas command datagrid
syn keyword htmlTagName contained datalist details dialog embed figure footer
syn keyword htmlTagName contained header hgroup keygen mark meter nav output
syn keyword htmlTagName contained progress time ruby rt rp section time video
" HTML 5 arguments
syn keyword htmlArg contained autofocus placeholder min max step
syn keyword htmlArg contained contenteditable contextmenu draggable hidden item
syn keyword htmlArg contained itemprop list subject spellcheck
" this doesn't work because default syntax file alredy define a 'data' attribute
syn match htmlArg "\<\(data-[\-a-zA-Z0-9_]\+\)=" contained
syn include @htmlCss syntax/css/css3-mediaqueries.vim
Now, let's create the CSS3 media queries file.
vi .vim/after/syntax/css/css3-mediaqueries.vim
and use the following code:
syn region cssMediaType start='(' end=')' contains=css.*Attr,css.*Prop,cssComment,cssValue.*,cssColor,cssURL,cssImportant,cssError,cssStringQ,cssStringQQ,cssFunction,cssUnicodeEscape nextgroup=cssMediaComma,cssMediaAnd,cssMediaBlock skipwhite skipnl
syn match cssMediaAnd "and" nextgroup=cssMediaType skipwhite skipnl
syn clear cssMediaBlock
syn region cssMediaBlock contained transparent matchgroup=cssBraces start='{' end='}' contains=cssTagName,cssSelectorOp,cssAttributeSelector,cssIdentifier,cssError,cssDefinition,cssPseudoClass,cssComment,cssUnicodeEscape,cssClassName,cssURL
Next time you will edit an HTML 5 file or a CSS3 that includes media queries, the "color syntax" will be adjusted to these new Web 2.0 features.
Need more? This bundle will help you.
Link to this Article
To link directly to this article from your web site, use one of the following snippets below.
HTML5 and CSS3 Syntax Color in VIM | Book Of Zeus<a href="http://www.bookofzeus.com/articles/html5-and-css3-syntax-color-in-vim/" title="HTML5 and CSS3 Syntax Color in VIM">HTML5 and CSS3 Syntax Color in VIM | Book Of Zeus</a>
Short URL:
HTML5 and CSS3 Syntax Color in VIM | Book Of Zeus<a href="http://s.bookofzeus.com/DcwPQ" title="HTML5 and CSS3 Syntax Color in VIM Short URL">HTML5 and CSS3 Syntax Color in VIM | Book Of Zeus</a>