2014/08/14 - Syntax Highlighterでソースコードを見せる

どうせここまでやったのなら,ということでソースコードを綺麗に載せるところもやってみた。つまりソースコードを載せるときに行番号付けたりキーワードに色付けたりってやつですね。以前別のところでやったときは,CSSとHTML変換を駆使して自力で作ったが,今回はオープンソースの力を借りる。

有名どころだとSyntax Highlighterというのがあって,よく見かける。このブログにも入れてみたらデザイン的によく合うのでこれでいいかな。WordPressプラグインもあるらしいのだが,あまり密結合にすると乗り換えにめんどうなのでJavaScript単体で入れた。

Syntax Highlighterでは,JavaScriptとCSSを読み込んだ上で,ソースコードを以下のようにpreで囲ってclassを指定する。シンプル。そして今までもpreで囲むようにはしていたので今回は簡単に移行できた。

<pre class="brush:csharp">

以下,サンプルコード。

namespace com.denasu.AnalogBookReader
{
    /// 
    /// 情報ダイアログ
    /// 
    public sealed partial class AboutDialog : SettingsFlyout
    {
        /// 
        /// コンストラクタ
        /// 
        public AboutDialog()
        {
            this.InitializeComponent();

            var version = Package.Current.Id.Version;
            _appname.Text = string.Format("{0} {1}.{2}.{3}.{4}",
                App.Current.Resources["AppName"].ToString(),
                version.Major, version.Minor, version.Build, version.Revision);
        }
    }
}

コメントする