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. The location of this will depend on your installation of Vim. Within this 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 with the following syntax:

" new html 5 tags
syn keyword htmlTagName contained video canvas

Vim will now color video and canvas tags and any additional keywords you add.

However if you update the built-in html.vim it will get overwritten the next time you update Vim, so the best practice is to append your rules to these built-in ones. To do so create the folder path after/syntax in your .vim folder and place a html.vim in it.

There are a large number of the HTML 5 elements and arguments in this gist mentioned by @user240515 below. Paste the contents of this into your newly create html.vim.

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

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. :(

EDIT [12/23/2012]: I do :) But maybe is was added later: https://github.com/othree/html5.vim/tree/master/indent