Cara Fix Warna Sintaks HTML5 dan CSS3 di VIM Editor

HTML5 dan CSS3 menjadi sangat populer akhir-akhir ini. Di sisi lain, beberapa text editor yang belum beradaptasi dengan kode dan sintaks HTML5 dan CSS3 dan salah satunya adalah VIM. VIM merupakan editor yang ada pada setiap sistem operasi unix/linux. Karena VIM merupakan editor standar untuk sistem operasi tersebut. Layaknya notepad yang ada pada sistem operasi windows.

Nah kita langsung saja ke pokok permasalahannya.

Pertama buatlah direktori dimana kita akan meletakkan file .vim nantinya.

mkdir -p ~/.vim/after/syntax/css

kemudian edit file HTML5

vi .vim/after/syntax/html.vim

pastekan kode dibawah ini:

" Vim syntax file
" Language: HTML (version 5)
" Maintainer: Rodrigo Machado 
" 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

lalu buatlah file CSS3 media queries

vi .vim/after/syntax/css/css3-mediaqueries.vim

dan pastekan kode dibawah ini

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

Selesai, warna sintaks HTML5 dan CSS3 sudah fix, silahkan edit kode HTML5 dan CSS3 di VIM editornya masing-masing dengan warna yang tadi sudah disesuaikan.