読者です 読者をやめる 読者になる 読者になる

orangain flavor

じっくりコトコト煮込んだみかん2。知らないことを知りたい。

はてなブログでソースコードの配色をSolarizedにする

はじめに

以前から自分のブログに書いたソースコードが読みにくいと感じていました。他所のソースコードが読みやすいブログを眺めていたところ、 Solarized という有名な配色があることを知りました。

良さげだったので、このブログのソースコードの配色をSolarizedにしてみました。

以下のページを大変参考にさせていただきました。感謝です。このエントリはほとんど自分好みの配色に変更した記録を残しているだけです。

はてなブログのシンタックスハイライトの色を変更する - 素人趣味のWeb制作ブログ

設定内容

以下の配色にしました。Darkの背景色のデフォルト(Base03)だとコントラストが強すぎる気がしたので、一段階薄い色(Base02)にしました。

Purpose Class Hex Color Name Color
背景色 pre.code (background-color) #073642 Base02
テキスト pre.code (color) #93a1a1 Base1
特殊文字・記号 .synSpecial #dc322f Red
.synType #b58900 Yellow
コメント .synComment #657b83 Base00
プリプロセッサ .synPreProc #cb4b16 Orange
識別子 .synIdentifier #268bd2 Blue
定数 .synConstant #2aa198 Cyan
ステートメント .synStatement #859900 Green

追加したCSSは次のとおりです。

.entry-content pre.code {
    background-color: #073642;
    color: #93a1a1;
}
.synSpecial { color: #dc322f }
.synType { color: #b58900 }
.synComment { color: #657b83}
.synPreProc { color: #cb4b16 }
.synIdentifier { color: #268bd2 }
.synConstant { color: #2aa198 }
.synStatement { color: #859900 }

結果

ソースコードの色が落ち着き、本文とソースコードのメリハリが付いたことで、読みやすくなったと思います。

Before

f:id:mi_kattun:20131128225619p:plain

After

f:id:mi_kattun:20131128225615p:plain