Vimが好きなんですよ。

いや、いきなり何事かというと、数年前からVimが使えるようになろうと練習中なのですね。ちょっとした、スピードを要求されないような作業の際には、なるべくVimを使うようにしているのです。ほら、こういうのって慣れないと話にならなさそうでしょ？

で、今、HTML5の自主研究（という程のものでもないのですけど）をやっていて、新たに利用できる要素がVim上でシンタックスハイライトされないんですね。まぁ、気にしなければソレはソレで構わない程度の事ですが、何となく気になります。

という訳で、Vimの設定ファイルだか何だかをいじって、HTML5の要素も色付きになるようにしてみた、という作業メモなのです。

注意：この記事は、Vimの事があまり良く解っていない人間が書いています。ですから、達人が見れば「ちげぇよバカそうじゃねぇよ」という事もあるでしょう。そんな時は、嫌々で構いませんのでご指摘いただければと思います。

まず、改めて私の環境を記載しますと、

• MacBook(Early 2008)
• Mac OS 10.5.8

と、なります。「なんだよMacかよ」とか言わないでね。多分、GNU/Linuxとかでもそんなに変わらないと思いますから。

先ずは、シンタックスハイライトを設定してるファイルを探す為にGoogle先生にお伺いをたてたところ、『/usr/share/vim/の中を覗くがよいよいよい』というお告げを頂き、そりゃもう早速覗いてみましたよ、ええ。そうしたら、

• vim70
• vim72

という二つのディレクトリが見えるではありませんか！ さっすがGoogle先生（というか、Webに情報をアップしてくれている方々）。

ディレクトリ名に記載されている数字はVimのバージョンナンバーだろうと見当をつけ、vim72の中身をlsしてみると、そのものズバリなsyntaxというディレクトリがあり、この中の*.vimというファイルがそれぞれ言語別のシンタックスハイライト設定になっているみたいです。なるほど確かにhtml.vimというのがあります。

この*.vimというファイル、直に編集しても良いっちゃ良いのでしょうけど、それもまた何とも気持ち悪いので、$HOME/.vim/syntax/という感じにディレクトリをほじくって、その中にコピーしてしまいましょう。ついでにファイルのオーナーも自分に変えておきましょう。

いよいよ設定ファイルの編集です。バシッとhtml.vimを開いてみると、以下のような記述が最初の方にあります。

" tag names
syn keyword htmlTagName contained address applet area a article base basefont
syn keyword htmlTagName contained big blockquote br caption center
syn keyword htmlTagName contained cite code dd dfn dir div dl dt font
syn keyword htmlTagName contained form hr html img
syn keyword htmlTagName contained input isindex kbd li link map menu
syn keyword htmlTagName contained meta ol option param pre p samp span
syn keyword htmlTagName contained select small strike sub sup
syn keyword htmlTagName contained table td textarea th tr tt ul var xmp
syn match htmlTagName contained "\<\(b\|i\|u\|h[1-6]\|em\|strong\|head\|body\|title\)\>"

" 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

この中に空白区切りでキーワードを追加していけば良い、という事なのでしょう。一応、アルファベット順に記載されていたり、HTML4の要素は分けて書いてたりしていますので、長いものには巻かれる主義の私としましては以下のような塊を挿入するようにしました。

" new html 5 tags
syn keyword htmlTagName contained article aside footer header nav section

まぁ、取り敢えずはこれだけです。必要になったら、追加していけば良いですしね。

これでまぁ、無事にHTML5のシンタックスハイライトが設定されました、多分上手く行くでしょう。なんかマズッたら、また追記します。