はてなブログのsyntaxハイライトを変えてみた

追記：どうやら仕様変更でclass名が変わったようで、ここに書いている方法ではハイライトを変えられなくなりました。残念・・

gistやsuper pre記法でコードを貼りつけた際、どうもハイライトの色が見づらかったので変えてみました。
Pygmentsを使うとほとんど手間なくカラースキーマを変更できます。

準備

Pygmentsのインストールから。

% easy_install pygments

CSSを生成してみる

インストールされた以下のコマンドでハイライト用のCSSを生成します。-Sでスキーマの種類を指定することができ、ここではSublimeTextのハイライトでもお馴染みなmonokaiを選んでみます。

% pygmentize -S monokai -f html > style.css

生成したら、スタイルをsuper-preとgistのブロックに適用できるよう以下のCSSを書き加えます。

/* super-pre block */
#main-inner .code {
	color : #ffffff; /* ハイライトしない文字は白に */
	background-color : #293025;
}

/* gist block */
#main-inner .entry-content .section .gist {
	color : #ffffff !important;
}
#main-inner .gist .gist-file .gist-data .gist-highlight pre{ 
	background-color : #293025 !important;
}

最後にはてブロの管理ページよりstyle.cssを読み込むように設定しておしまい。変更後のハイライトがこのブログで使っているものです。

色々なカラースキーマ

自分はSublime Textっぽい見た目のmonokaiを選んでますが、これ以外にもいくつかカラースキーマが選べます。べつのものを使う場合はこちらを参考に。

syntaxハイライトするブロックの背景色などは上記のようにベタ書きしているので、他のスキーマを適用したい場合は色を書き換える必要があります。できればここも自動生成したいところ。