一所懸命に手抜きする

デスクワークばかりのスポーツ嫌いで50歳も過ぎ、いよいよ足腰に衰えを感じつつある昨今。

はてなブログのシンタックスハイライトを 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 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を適用した時の画像を貼っておきます。
f:id:a_habakiri:20161214231700p:plain

参考:Solarized Dark を適用した結果

f:id:a_habakiri:20161214233230p:plain http://orangain.hatenablog.com/entry/hatenablog-solarized をベースにしています。自分好みのコントラストに近づけるため Baseカラーを変更しています。

a-habakiri.hateblo.jp