Instantly share code, notes, and snippets.

Embed
What would you like to do?
Vim syntax file for HTML 5
" Vim syntax file
" Language: HTML (version 5)
" Maintainer: Rodrigo Machado <rcmachado@gmail.com>
" URL: http://gist.github.com/256840
" Last Change: 2010 Aug 26
" 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
syn keyword htmlTagName contained source figcaption
" HTML 5 arguments
syn keyword htmlArg contained autofocus autocomplete placeholder min max step
syn keyword htmlArg contained contenteditable contextmenu draggable hidden item
syn keyword htmlArg contained itemprop list sandbox subject spellcheck
syn keyword htmlArg contained novalidate seamless pattern formtarget manifest
syn keyword htmlArg contained formaction formenctype formmethod formnovalidate
syn keyword htmlArg contained sizes scoped async reversed sandbox srcdoc
syn keyword htmlArg contained hidden role
syn match htmlArg "\<\(aria-[\-a-zA-Z0-9_]\+\)=" contained
syn match htmlArg contained "\s*data-[-a-zA-Z0-9_]\+"
@cypok

This comment has been minimized.

Show comment
Hide comment
@cypok

cypok Apr 20, 2010

I liked it :)

cypok commented Apr 20, 2010

I liked it :)

@remiprev

This comment has been minimized.

Show comment
Hide comment
@remiprev

remiprev May 13, 2010

I liked it too :)

remiprev commented May 13, 2010

I liked it too :)

@trdunsworth

This comment has been minimized.

Show comment
Hide comment
@trdunsworth

trdunsworth May 13, 2010

I like it as well!

trdunsworth commented May 13, 2010

I like it as well!

@scottferg

This comment has been minimized.

Show comment
Hide comment
@scottferg

scottferg commented Jun 28, 2010

Sweet!

@dekimsey

This comment has been minimized.

Show comment
Hide comment
@dekimsey

dekimsey Aug 26, 2010

I was able to get the data highlighting working with my vim (7.0.237) using the following statement without any problems with the prior data keyword. At least, none that I am aware of.
syn match htmlArg contained "\s*data-[-a-zA-Z0-9_]+"

dekimsey commented Aug 26, 2010

I was able to get the data highlighting working with my vim (7.0.237) using the following statement without any problems with the prior data keyword. At least, none that I am aware of.
syn match htmlArg contained "\s*data-[-a-zA-Z0-9_]+"

@rcmachado

This comment has been minimized.

Show comment
Hide comment
@rcmachado

rcmachado Aug 26, 2010

Applied previous sugestion from dekimsey

Owner

rcmachado commented Aug 26, 2010

Applied previous sugestion from dekimsey

@amackera

This comment has been minimized.

Show comment
Hide comment
@amackera

amackera Sep 25, 2010

What's the best way of auto-including this? I've set up an AutoCmd to auto run syntax include $VIM/syntax/html5.vim on BufEnter, but is there a better way?

amackera commented Sep 25, 2010

What's the best way of auto-including this? I've set up an AutoCmd to auto run syntax include $VIM/syntax/html5.vim on BufEnter, but is there a better way?

@remiprev

This comment has been minimized.

Show comment
Hide comment
@remiprev

remiprev Sep 26, 2010

@amackera You can just save the file as ~/.vim/after/syntax/html.vim. That way, Vim’s html.vim is loaded, and then this file is.

remiprev commented Sep 26, 2010

@amackera You can just save the file as ~/.vim/after/syntax/html.vim. That way, Vim’s html.vim is loaded, and then this file is.

@amackera

This comment has been minimized.

Show comment
Hide comment
@amackera

amackera Sep 27, 2010

@remiprev Thanks, that's what I was looking for. I knew that there had to be an easier way.

amackera commented Sep 27, 2010

@remiprev Thanks, that's what I was looking for. I knew that there had to be an easier way.

@redoPop

This comment has been minimized.

Show comment
Hide comment
@redoPop

redoPop Dec 13, 2010

Thanks for this!

If anyone wants to add proper indentation of HTML5 elements, you must make a local copy of indent/html.vim (e.g., ~/.vim/indent/html.vim) if you don't already have one, then find the section around line 35 that starts:

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

And follow the same pattern to add rules for HTML5 tags:

call <SID>HtmlIndentPush('article')
call <SID>HtmlIndentPush('aside')
call <SID>HtmlIndentPush('audio')
call <SID>HtmlIndentPush('canvas')
call <SID>HtmlIndentPush('details')
call <SID>HtmlIndentPush('figcaption')
call <SID>HtmlIndentPush('figure')
call <SID>HtmlIndentPush('footer')
call <SID>HtmlIndentPush('header')
call <SID>HtmlIndentPush('hgroup')
call <SID>HtmlIndentPush('mark')
call <SID>HtmlIndentPush('menu')
call <SID>HtmlIndentPush('meter')
call <SID>HtmlIndentPush('nav')
call <SID>HtmlIndentPush('output')
call <SID>HtmlIndentPush('progress')
call <SID>HtmlIndentPush('section')
call <SID>HtmlIndentPush('summary')
call <SID>HtmlIndentPush('time')
call <SID>HtmlIndentPush('video')

redoPop commented Dec 13, 2010

Thanks for this!

If anyone wants to add proper indentation of HTML5 elements, you must make a local copy of indent/html.vim (e.g., ~/.vim/indent/html.vim) if you don't already have one, then find the section around line 35 that starts:

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

And follow the same pattern to add rules for HTML5 tags:

call <SID>HtmlIndentPush('article')
call <SID>HtmlIndentPush('aside')
call <SID>HtmlIndentPush('audio')
call <SID>HtmlIndentPush('canvas')
call <SID>HtmlIndentPush('details')
call <SID>HtmlIndentPush('figcaption')
call <SID>HtmlIndentPush('figure')
call <SID>HtmlIndentPush('footer')
call <SID>HtmlIndentPush('header')
call <SID>HtmlIndentPush('hgroup')
call <SID>HtmlIndentPush('mark')
call <SID>HtmlIndentPush('menu')
call <SID>HtmlIndentPush('meter')
call <SID>HtmlIndentPush('nav')
call <SID>HtmlIndentPush('output')
call <SID>HtmlIndentPush('progress')
call <SID>HtmlIndentPush('section')
call <SID>HtmlIndentPush('summary')
call <SID>HtmlIndentPush('time')
call <SID>HtmlIndentPush('video')
@hokapoka

This comment has been minimized.

Show comment
Hide comment
@hokapoka

hokapoka Jan 11, 2011

Here's one I've generated for css file :

" Vim syntax file
" Language: Cascading Style Sheets
" Maintainer:   Andrew Scott hoka@hokapoka.com
" Last Change:  2010 Jul 28

syn keyword cssTagName article aside audio bb canvas command datagrid                                                                                                                                                                         
syn keyword cssTagName datalist details dialog embed figure footer
syn keyword cssTagName header hgroup keygen mark meter nav output
syn keyword cssTagName progress time ruby rt rp section time video
syn keyword cssTagName source figcaption

Thanks Rodrigo, your html5 syntax worked a treat.

hokapoka commented Jan 11, 2011

Here's one I've generated for css file :

" Vim syntax file
" Language: Cascading Style Sheets
" Maintainer:   Andrew Scott hoka@hokapoka.com
" Last Change:  2010 Jul 28

syn keyword cssTagName article aside audio bb canvas command datagrid                                                                                                                                                                         
syn keyword cssTagName datalist details dialog embed figure footer
syn keyword cssTagName header hgroup keygen mark meter nav output
syn keyword cssTagName progress time ruby rt rp section time video
syn keyword cssTagName source figcaption

Thanks Rodrigo, your html5 syntax worked a treat.

@andrewle

This comment has been minimized.

Show comment
Hide comment
@andrewle

andrewle Jan 24, 2011

@jdbartlett I tried your suggestion for indentation, but it didn't work for me. Are there any other tweaks that you had to do to get it to work? Gotchas that I need to be aware of?

andrewle commented Jan 24, 2011

@jdbartlett I tried your suggestion for indentation, but it didn't work for me. Are there any other tweaks that you had to do to get it to work? Gotchas that I need to be aware of?

@kitofr

This comment has been minimized.

Show comment
Hide comment
@kitofr

kitofr Mar 8, 2011

Works :) tnx

kitofr commented Mar 8, 2011

Works :) tnx

@adamesque

This comment has been minimized.

Show comment
Hide comment
@adamesque

adamesque Mar 18, 2011

@andrewle I had the same problem, until I noticed that the indentation file I'd copied had the following at line 19:
" Only load this indent file when no other was loaded.
if exists("b:did_indent")
finish
endif
Since I was putting my indent file in an /after directory, it of course was ditching out immediately. Deleting these lines fixed it.

adamesque commented Mar 18, 2011

@andrewle I had the same problem, until I noticed that the indentation file I'd copied had the following at line 19:
" Only load this indent file when no other was loaded.
if exists("b:did_indent")
finish
endif
Since I was putting my indent file in an /after directory, it of course was ditching out immediately. Deleting these lines fixed it.

@Sabrecho

This comment has been minimized.

Show comment
Hide comment
@Sabrecho

Sabrecho Jan 17, 2012

Came looking for html5 tags added to GVim html syntax coloring. hokapoka's idea for css is the frosting-on-the-cake. More importantly, I think I've been inspired to make a new syntax list for Maptool, a java program that has it's own macro system built-in.

tyvm!

Sabrecho commented Jan 17, 2012

Came looking for html5 tags added to GVim html syntax coloring. hokapoka's idea for css is the frosting-on-the-cake. More importantly, I think I've been inspired to make a new syntax list for Maptool, a java program that has it's own macro system built-in.

tyvm!

@nishigori

This comment has been minimized.

Show comment
Hide comment
@nishigori

nishigori Jan 21, 2012

I like it !! thx :)

nishigori commented Jan 21, 2012

I like it !! thx :)

@arthornsby

This comment has been minimized.

Show comment
Hide comment
@arthornsby

arthornsby Feb 13, 2012

Works like a charm! Hokapoka too! Thanks!

arthornsby commented Feb 13, 2012

Works like a charm! Hokapoka too! Thanks!

@nabbe

This comment has been minimized.

Show comment
Hide comment
@nabbe

nabbe Jun 16, 2012

I love it. This is what I want.

nabbe commented Jun 16, 2012

I love it. This is what I want.

@rcmachado

This comment has been minimized.

Show comment
Hide comment
@rcmachado

rcmachado Aug 15, 2012

Hey folks, I think that @othree has made a better work here:

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

Thanks!

Owner

rcmachado commented Aug 15, 2012

Hey folks, I think that @othree has made a better work here:

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

Thanks!

@cycold

This comment has been minimized.

Show comment
Hide comment
@cycold

cycold Mar 23, 2013

good job

cycold commented Mar 23, 2013

good job

@markson

This comment has been minimized.

Show comment
Hide comment
@markson

markson May 26, 2014

great work and thanks for the link of html5.vim

markson commented May 26, 2014

great work and thanks for the link of html5.vim

@wamoyo

This comment has been minimized.

Show comment
Hide comment
@wamoyo

wamoyo Aug 20, 2014

So, sometime, especially if I'm working with D3, my HTML5 documents have CSS, JavaScript, and SVG all embedded in the HTML code. Is there a simple way for syntax highlight all of this?

wamoyo commented Aug 20, 2014

So, sometime, especially if I'm working with D3, my HTML5 documents have CSS, JavaScript, and SVG all embedded in the HTML code. Is there a simple way for syntax highlight all of this?

@samson212

This comment has been minimized.

Show comment
Hide comment
@samson212

samson212 May 5, 2015

You can switch the filetype while you're in the CSS portion or whatever -- :set filetype=css or set filetype=javascript etc. I set up a mapping to make it easier, e.g. nnoremap <leader>ftc :set filetype=css<cr>.

samson212 commented May 5, 2015

You can switch the filetype while you're in the CSS portion or whatever -- :set filetype=css or set filetype=javascript etc. I set up a mapping to make it easier, e.g. nnoremap <leader>ftc :set filetype=css<cr>.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment