|" Vim syntax file|
|" Language: HTML (version 5)|
|" Maintainer: Rodrigo Machado <email@example.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_]\+"|
May 13, 2010
I liked it too :)
May 13, 2010
I like it as well!
Jun 28, 2010
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_]+"
Aug 26, 2010
Applied previous sugestion from dekimsey
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?
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.
Sep 27, 2010
@remiprev Thanks, that's what I was looking for. I knew that there had to be an easier way.
Dec 13, 2010
Thanks for this!
If anyone wants to add proper indentation of HTML5 elements, you must make a local copy of
~/.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')
Jan 11, 2011
Here's one I've generated for css file :
" Vim syntax file " Language: Cascading Style Sheets " Maintainer: Andrew Scott firstname.lastname@example.org " 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.
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?
Mar 8, 2011
Works :) tnx
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.
Since I was putting my indent file in an /after directory, it of course was ditching out immediately. Deleting these lines fixed it.
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.
Jan 21, 2012
I like it !! thx :)
Feb 13, 2012
Works like a charm! Hokapoka too! Thanks!
Jun 16, 2012
I love it. This is what I want.
Aug 15, 2012
Hey folks, I think that @othree has made a better work here:
Mar 23, 2013
May 26, 2014
great work and thanks for the link of html5.vim
Aug 20, 2014
May 5, 2015
You can switch the filetype while you're in the CSS portion or whatever --
:set filetype=css or
nnoremap <leader>ftc :set filetype=css<cr>.
I liked it :)