Bloggerにソースコードを表示する

C#のソースを見やすくする為、Bloggerの設定に少し手を入れた。

こんな風にきれいに！

//----- Begin:
using UnityEngine;
using System.Collections;
using System;//!< (Arrayクラス利用に必要) 
using System.Collections.ObjectModel;//!< ReadOnlyCollectionクラス利用に必要 

public class NewBehaviourScript : MonoBehaviour {
    public static readonly ReadOnlyCollection<string> OBJNAME_VOLBTN = Array.AsReadOnly(new string[] {
        "<>Brace Test"
    };

    // Use this for initialization
    void Start () {
    }
 
    // Update is called once per frame
    void Update () {
    }
}
//----- End:

SyntaxHighlighter というものを利用する。

以下、GoogleのBloggerに設定していく手順。

■ダウンロード＆展開

SyntaxHighlighter3.0.83 の右列にある download に進み、ダウンロード。
（ syntaxhighlighter_3.0.83.zip ）
適当な場所にとりあえず展開する。

■CSSファイルを好みに修正する

いくつか修正した方が見栄えが良くなるので、展開したフォルダ内の以下のファイルを開いてカスタマイズしていく。

syntaxhighlighter_3.0.83/styles/shCoreDefault.css

【フォントを指定する】

ソースとは関係ないが、ついでなのでフォントを指定しておく。Windows環境ならメイリオフォントはやはり綺麗で見栄えも良いので。

一番冒頭付近を以下のように追加

body {
font-family: Osaka, "メイリオ","ＭＳ Ｐゴシック", Sans-Serif;
}
/**
 * SyntaxHighlighter
 * http://alexgorbatchev.com/SyntaxHighlighter
 *
 * SyntaxHighlighter is donationware. If you are using it, please donate.
 * http://alexgorbatchev.com/SyntaxHighlighter/donate.html

※フォントの指定順は地味に重要だったりするのだがここでは詳細割愛。ブラウザは左から順にPCにそのフォントがあるかチェックしていき、合致したフォントで表示される。Windows、PC、Linuxその他モバイル系など考慮しだすとキリがないので、とりあえずこんな感じで。

【縦スクロールバーを消す】

これは好みだが、私的にはスクロールバー無しの方が見やすいので。

.syntaxhighlighter {
  width: 100% !important;
  margin: 1em 0 1em 0 !important;
  position: relative !important;
  overflow: auto !important;
  font-size: 1em !important;
  overflow-y: hidden !important; /* (ADD) Vertical scroll bar OFF */
}

【横スクロールバーIE対策】

どうもIEだと最後の行がはみ出るというか見えにくい対策。

.syntaxhighlighter.ie {
  font-size: .9em !important;
/*  padding: 1px 0 1px 0 !important; (DEL)  */
  padding: 1px 0 20px 0 !important; /* (ADD) No overlap horizontal scroll bar */
}

【長い行の折り返し】

調べてみるとバージョン2.xではこれはできていたらしい。3.0系でできなくなったとのこと。
3.0系の実装方法の都合上、折り返し処理が難しくなっている様子。
結論としては強引にできるが、行番号がおかしくなる。
よって、折り返しを取るか、行番号表示をとるかの２択になるので、ここでは折り返しを取ることにする。（行番号もあると便利そうなので好みですホント）

折り返しを有効にする

.syntaxhighlighter .line {
/*  white-space: pre !important; (DEL) */
  white-space:pre-wrap !important; /* (ADD) Text line wrap */
  word-wrap: break-word !important; /* (ADD) Text line wrap */
}

【行番号を消す】

.syntaxhighlighter .gutter {
/*  color: #afafaf !important; (DEL) */
  display: none; /* (ADD) No display line number */
}

【色の変更】

だいたいこんな風に。

.syntaxhighlighter {
  background-color: #eeeeee !important; /* (EDIT) background color */
}
.syntaxhighlighter .line.alt1 {
  background-color: #F1F1F1 !important; /* (EDIT) background color */
}
.syntaxhighlighter .line.alt2 {
  background-color: #eeeeee !important; /* (EDIT) background color */
}

■Bloggerに設定する

【shCoreDefault.cssの設定】

GoogleにログインしてBloggerの管理ページへいく。

左列の「テンプレート」をクリック。
画面内「カスタマイス」をクリック。
左上「上級者向け」をクリック。
左上のスクロールバーの下方の「CSSを追加」をクリック。
中央上部に「カスタム CSSを追加」という横長のウィンドウがある。
そこに先程修正した shCoreDefault.css の内容をコピペする。
すぐ右上の「プログに適用」をクリック。
これで shCoreDefault.css の内容の設定は完了。
一旦右上の「Bloggerに戻る」で管理画面の最初の方へ戻る。

【HTMLの編集】

shCoreDefault.css の内容は前項で設定できているがまだブログでは有効にならないのでHTMLを修正する。

Bloggerの管理ページへいく。
左列の「テンプレート」をクリック。
画面内「HTMLの編集」をクリック。
開いたHTMLソースの中に以下の2行を追加して保存。
追加する場所は <head> ～ </head> の間に。だいたい </head> の前くらいへ。

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>

ここでは C# のソース表示のみを登録している。（shBrushCSharp.js の部分）
最初に展開したZIPの中の syntaxhighlighter_3.0.83/scripts/ を見ると各言語に対応するファイル名がわかるので例えばxhtmlならば、

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>

としてこの行を追加すればOK。

※最初の展開したZIPのディレクトリはもう必要ないので消してかまわない。念の為。

■利用方法

投稿編集の際に「作成」と「HTML」があるので。「HTML」に切り替える。

ソース表示したいところを、

<pre class="brush: csharp;">

ソース

</pre>

で囲えばおｋ。

ソースコードを貼り付けるときは「作成」モードの方が楽。大なり括弧等を自動的にエスケープしてくれるので。