はてなブログのシンタックスハイライトを Solarized Light にできるかやってみました
はてなブログのシンタックスハイライトを Solarized Light にしました
個人的に Solarized Light というカラースキームが好きです。
Gistのソースコードをはてなブログに貼り付ける時にカラーテーマとして Solarized Light にするやり方(
はてなブログのGist貼り付けの体裁を Solarized Light にしてみました - 一所懸命に手抜きする)を紹介しましたが、GitHubでアカウント flagged 事件にあってから、はてなブログのシンタックスハイライト(Syntax highlighting)に回帰しています。はてなブログのシンタックスハイライトも Solarized Light にできるかやってみました。
Solarized Dark は orangain さんが http://orangain.hatenablog.com/entry/hatenablog-solarized に掲載されています。DarkとLightはほぼ同じなので CSSもほぼ同じはずです。
Solarized Light と Dark の違い
どうやら、Solarized Light と Dark の違いは下記3点のようです。
Solarized | 背景色 | 文字色 | コメント色 |
Light | #FDF6E3 | #586E75 | #93A1A1 |
Dark | #002B36 | #93A1A1 | #586E75 |
Solarized にはいろいろなバージョンがありますが、ここで取り上げたものでは背景色の明暗が違うことと、通常文字とコメントが入り繰りという違いがあります。しかし、それ以外は共通のようです。
参考ページ
作業にあたって下記ページを参考にしました。
はてなブログのデフォルトカラースキームとそれをCSSに表す方法は
はてなブログのシンタックスハイライトの色を変更する - 素人趣味のWeb制作ブログ
はてなブログのシンタックスハイライトを色変えするよ - 僕の世界観を変えてみる
はてなブログの SolarizedカラースキームとそれをCSSに表す方法は
はてなブログでソースコードの配色をSolarizedにする - orangain flavor
はてなブログのソースコード表示を変更する - 藻ログ
はてなブログではなくおおもとの Solarizedカラーは
Solarized - Ethan Schoonover
具体的作業としては、orangainさんの成果(はてなブログ用solarizedのCSS)をもとに Ethan Schoonover さんのカラーコードを割り振りました。
はてなブログ用 Solarized Light CSS
/* Solarized Light */ .entry-content pre.code { background-color: #FDF6E3; color: #586E75; border: solid 2px lightgray; /* Base */ } .synSpecial { color: #DC322F } /* Red */ .synType { color: #B58900 } /* Yellow */ .synComment { color: #93A1A1 } /* Base */ .synPreProc { color: #CB4b16 } /* Orange */ .synIdentifier { color: #268BD2 } /* Blue */ .synConstant { color: #2AA198 } /* Cyan */ .synStatement { color: #859900 } /* Green */ /* Modified from the Solarized Dark CSS http://orangain.hatenablog.com/entry/hatenablog-solarized Parameters from http://ethanschoonover.com/solarized */
▲ご覧になっているタイミングでこのコード枠に適用されているテーマが変わります。Solarized Lightが適用されているとは限りませんので、下の画像を参考にしてください。
デザイン設定ページでCSSの一番下にでも貼り付けて下さい。
はてなブログにSolarized Light を適用した結果
ときどきカラースキームを変えているのでSolarized Lightを適用した時の画像を貼っておきます。
参考:Solarized Dark を適用した結果
http://orangain.hatenablog.com/entry/hatenablog-solarized をベースにしています。自分好みのコントラストに近づけるため Baseカラーを変更しています。