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

一所懸命に手抜きする

監査の仕事をしています。ITを利用し、良い意味で「手抜き」することは効率化と精度アップに役立つと思うんです。部下への引き継ぎのためにまずは諸々頭から引っ張り出そうとブログを始めました。

[ Main ]  [ 別館 ]
当ブログで取り上げられている事案やデータベース、人物等はすべてフィクションです。

はてなブログのシンタックスハイライトを Solarized Light にできるかやってみました

カラースキーム CSS

はてなブログシンタックスハイライトを 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

広告を非表示にする