vimのcolorschemeには theoremoon/cryptohack-color.vim というやつを使っている。これは cryptohack/sublime-theme を変換したやつで、変換の感じがちょっと微妙で完全に同じハイライトにはならないものの、色の感じは気に入っている。
気に入っているので、はてなブログ上でのソースコードの表示も、全く同じではないにせよ似たような感じになっていると嬉しい。
適当に動作を見ると、はてなブログでのシンタックスハイライトは、なんか .synIdentifier
みたいなクラスがつく感じで、これにCSSでスタイルが当てられている。この Identifier
とかの部分はvimのhighlight groupの名前と大体同じなので、vimのcolorschemeからCSSを生成して、それをはてなブログのデザインCSSに設定すればいい感じになるのではないか
というわけでやってみた。CSS生成くんはこんな感じ。適当なファイルに書き込んで開いて、:source %
してから :call GenerateColorschemeCSS()
をやってメッセージウィンドウに出てきたやつをコピーして貼り付ける
function! GenerateColorschemeCSS() let groups = ["Special", "Type", "Comment", "PreProc", "Identifier", "Constant", "Statement"] for g in groups let color = s:returnHighlightTerm(g, "guifg") echo ".syn" . g . " { color: " . color . " !important; }" endfor echo ".entry-content pre {" echo "background: " . s:returnHighlightTerm("Normal", "guibg") . " !important;" echo "color: " . s:returnHighlightTerm("Normal", "guifg") . " !important;" echo "}" endfunction function! s:returnHighlightTerm(group, term) let output = execute('hi ' . a:group) if matchstr(output, "cleared") == "cleared" return s:returnHighlightTerm("Normal", a:term) endif let link = matchstr(output, "links to .*") if link != "" return s:returnHighlightTerm(link[9:], a:term) endif return matchstr(output, a:term.'=\zs\S*') endfunction
vim上での表示と比較するとまあまあ微妙だけど雰囲気はあるので良いか。
文字列とかがハイライトされてないのが結構悲しいけど、はてなブログ上ではそこには.synConstant
クラスが当たっていて、 cryptohack-color.vim ではConstant
highlight groupへのハイライトは定義されていないのでNormal
にフォールバックされているのでこうなる。
じゃあvim上だと文字列はどういうhighlight groupになっているかというと、vimString
というやつだった。結局これはString
というhighlight groupにリンクされている。
どうしてはてなブログ上ではsynString
とかではなくてsynConstant
クラスが当たっているのか、あるいはどうして私のvimではConstant
highlight groupになっていないのか、というのは調べてない。
見返していると文字列が文字列っぽくハイライトされていないのは残念な感じがしてきたので今度気が向いたら調べて直そう。なんかミスってるんだろうな…