Hatena::ブログ(Diary)

鉄屑置き場

2011-09-21

[][]vimシンタックスハイライトHTML5にも適用する

そもそも

HTML5になってheaderタグとか増えました。
しかし今のところvimデフォルトではハイライトしてくれない模様です。
なのでちょっとやってみました。
環境は相変わらずMac OS X Lionにvim7.3です。


方法1

1,Vim syntax file for HTML 5からhtml.vimダウンロード
2,.vim/syntax/ディレクトリを作成
3,.vim/syntax/ディレクトリhtml.vimを配置

方法2

1,$VIMRUNTIME/syntax/html.vimを開く
2,以下を追加(私は最終行に追加しました)

" 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_]\+"

3,ファイルを保存する

インデントの設定

新しいタグのハイライトの設定は出来ましたので、次は自動的にインデントする設定です。
1,$VIMRUNTIME/indent/html.vimを開く
2,

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

これで始まる部分(デフォルトなら35行目と思われる)に以下を追加。

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')

3,ファイルを保存する

開発環境は

快適に改造しましょう。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証