How to update Vim to color-code new html elements

I am wondering how I might set vim to color the new html5 elements 开发者_StackOverflow社区(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.

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.

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

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

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

http://gist.github.com/390929

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.

I added an html5 indent file to a fork of othree/html5.vim based on the suggestions above.

See http://github.com/briangershon/html5.vim

The syntax/html.vim file that comes with vim (8.0) is very outdated. A good way to keep your syntax highlighting updated is to use a well maintained plugin such as vim-polygot which is kept much more up-to-date. It's html.vim syntax supports, canvas, video, section and main (which other answers do not support), to name a few.