2012 01.15 Sun 忍者ブログでソースコード表示 ＣＡＴＥＧＯＲＹ ：プログラミング

Syntax Highlighter というプラグインの導入より実現致しました。
どうやら、Syntax Highlighterは古いバージョンがGoogle Codeで公開されていて、
Google検索だとそちらが上位にでる模様？
上のリンクは現時点で最新の3.0.83が公開されている公式へのリンクとなっています。
（今回導入を行ったバージョンも、3.0.83 です）

・まだダウンロードから…
上記リンクの右のほうにあるメニューから download をクリックします。
上の方にある Click here to download. をクリックします。
zipを適当なファイルに保存し、展開します。

・ファイルのアップロード
展開したフォルダの中にあるscripts、stylesフォルダ内のファイルを
アップロードします。
忍者ブログではフォルダを作ってその中にアップロードは出来ず、
全て同じフォルダに画像などと一緒にアップロードする仕組み？なので、
通常の画像ファイルの用に一個ずつアップロードしてきます。

jsファイルは必要な言語に応じてアップロードすれば良いと思います。

・ヘッダーへの記載
アップロードが完了したら、アップロードファイルのアドレスをどれでも良いので控えておきます。
テンプレート設定/編集を開き、修正を開きます。
テキストボックスが2つ表示されたら上のテキストボックスを編集します。


<title> タグの直前に記述すると良いかと思われます。
http://file.hoge.blog.shinobi.jp/ の部分を先ほど控えたアップロードファイルの
パスに書き換えてください。
今回はJavaとXMLファイルを使用する場合です。
別の言語を使用する場合はjsファイルパスを適宜書き換えてください。

編集が完了したらテンプレート保存ボタンを押します。

・記事中でソースコードを使いたい場合 例えば、xmlファイルで色分けして欲しい時は、
まずソースというボタンを押し、

HTMLソース中の該当箇所にソースコードをそのまま挿入し、preタグで囲みます。
preの先頭のbrushを適宜変えます。

<pre class="brush: xml">
ソースコード
<pre>
のように書きます。

何故か記事のプレビューだとCSSが無効化されてうまく読み込めないようなので、
実際に保存してみてみるしかなさそうです…。

以上で完了です！
まだ、一部記事は適用できていませんが、順次対応していきます！！

では～。