はてなブログでソースコードの配色を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
After