How to update Vim to color-code new html elements

Question

I am wondering how I might set vim to color the new html5 elements (ie "canvas" and "video") as it does with the existing "script", "body" elements (or reserved words in other languages like python's "def") etc. Current version is from MacPorts typically used in a terminal emulator.

Answer 1

html.vim is the syntax file Vim consults to determine which tags will be colored. If you don't already have html.vim in ~/.vim/syntax you can create it with the content found here. Within the linked html syntax file you'll see many lines that look like the following:

" new html 4.0 tags
syn keyword htmlTagName contained abbr acronym bdo button col label
syn keyword htmlTagName contained colgroup del fieldset iframe ins legend
syn keyword htmlTagName contained object optgroup q s tbody tfoot thead

These lines define syntax keywords. In this case they specifically define HTML tag names. The first line tells vim to color abbr, acronym, bdo, button, col, and label tags. You can tell Vim to color additional tags that you specify with the following:

" new html 5 tags
syn keyword htmlTagName contained video canvas

You can add it just after the lines defining the new html 4.0 tags. Vim will now color video and canvas tags. Add additional keywords as you like.

Consult :help html.vim for some more info.

Answer 2

Thanks for this question, and thanks for the accepted answer! This is a complete list of the new tags to add for html 5, as they are defined at the time of writing:

" new html 5 tags
syn keyword htmlTagName contained article aside audio canvas command datalist
syn keyword htmlTagName contained details embed figcaption figure footer header
syn keyword htmlTagName contained hgroup keygen mark meter nav output progress
syn keyword htmlTagName contained rp rt ruby section source summary time video

Answer 3

Just put the following file in ~/.vim/syntax:

http://gist.github.com/390929

Answer 4

I'm just about to try this one:

http://github.com/othree/html5.vim

Seems pretty complete.

EDIT: I don't see anything about indentation. :(

Answer 5

Indentation can be supported using an approach similar to that described by michaelmichael for extending the html.vim syntax file. If you don't already have html.vim in ~/.vim/indent you can create it with the content found here. Within the ~/.vim/indent/html.vim you'll see a set of function calls assembling a list of HTML element names that looks like the following:

" [-- <ELEMENT ? - - ...> --]
call <SID>HtmlIndentPush('a')
call <SID>HtmlIndentPush('abbr')
call <SID>HtmlIndentPush('acronym')
call <SID>HtmlIndentPush('address')
" ...and many more...

These lines are defining the tags that will trigger basic tag indenting. Extend this list with any HTML5 tags that you want to have trigger indenting. I added the following to the end of this list:

" New HTML 5 elements
call<SID>HtmlIndentPush('table')
call<SID>HtmlIndentPush('article')
call<SID>HtmlIndentPush('aside')
call<SID>HtmlIndentPush('audio')
call<SID>HtmlIndentPush('canvas')
call<SID>HtmlIndentPush('command')
call<SID>HtmlIndentPush('datalist')
call<SID>HtmlIndentPush('details')
call<SID>HtmlIndentPush('embed')
call<SID>HtmlIndentPush('figcaption')
call<SID>HtmlIndentPush('figure')
call<SID>HtmlIndentPush('footer')
call<SID>HtmlIndentPush('header')
call<SID>HtmlIndentPush('hgroup')
call<SID>HtmlIndentPush('keygen')
call<SID>HtmlIndentPush('mark')
call<SID>HtmlIndentPush('meter')
call<SID>HtmlIndentPush('nav')
call<SID>HtmlIndentPush('output')
call<SID>HtmlIndentPush('progress')
call<SID>HtmlIndentPush('rp')
call<SID>HtmlIndentPush('rt')
call<SID>HtmlIndentPush('ruby')
call<SID>HtmlIndentPush('section')
call<SID>HtmlIndentPush('source')
call<SID>HtmlIndentPush('summary')
call<SID>HtmlIndentPush('time')
call<SID>HtmlIndentPush('video')

Indenting will now be triggered on the HTML5 tags listed above.