はてなブログのGist貼り付けの体裁を Solarized Light にしてみました

Gistを導入したものの…

　Gistのコードを挿入するのは簡単です。Gist のページで Copy to Clipboard ボタンを押して URL をコピーして貼り付けるだけです。はてなブログなら「Gist貼り付け」機能で選択するだけです。

ただ貼り付けるだけだと長いソースが困る

Gistを貼り付けするとこんな感じです。

ソースが長いと縦長の醜いフレームになります。

縦の長さを制限してスクロール表示

　CSSに下記コードを追加するとソース表示枠の縦の最大の長さを設定して、長いソースはスクロールするようになります。
はてなブログの場合、　デザイン設定　>　カスタマイズ　> デザインCSS　と選んで、一番下にでも貼り付けると良いと思います。

.gist-data {
  max-height : 20em ; 
    overflow : auto ;
}

20emは20文字分つまり20行です。もちろん設定変更可能です。

ソース表示枠の縦の最大行数を設定して、長いソースはスクロールするようにします。

まだ、フレームの上が寂しいですね。

はてなブログの場合、Caption表示

　ソースフレームを枠で囲み、キャプションを付けます。こちらはHTMLで

<div style="padding: 1px 1px; line-height: 100%;font-weight: bold; text-align: left; font-size: 90%">
  Caption(キャプション)をつけます</br>
[f:id:a_habakiri:20161210230432p:plain]
</div>

とします。
すると

のように枠で囲まれ、キャプションが付きます。

カラーテーマ

　白背景は個人的にあまり好きではなく、カラーテーマとしてSolarized Lightを好みます。

こんな感じです。

導入法

　delphinusさんのSyntaxhighlighter にも Solarized を！（あと Gist も） | blog.remora.cxからSolarized LightのCSSをいただきました。そして先ほどと同様にCSSに貼り付けます。

なんとこの方も

　※　なんとこの方もGitHubにアカウントをunpublicにされたようです。今気づきました。自分だけじゃなかったんだと思うとほっとします。小心者なので。
　　　ロボットは僕に言った「君は人間じゃない」 | blog.remora.cx