So-netブログでSyntaxHighlightを使う

So-netブログを使って結構長いのですが、ソースコードを張り付けるのにいい加減疲れてきました。(っていうほど記事を書いているわけではないのですが。)
preタグで囲ってしまえばいいのですが、見え方としては微妙なんですね。
世間にはいろいろとソースコードを綺麗に表示させる仕組みがあるようなのですが、最近よく見るSyntaxHighlightを導入してみました。

SyntaxHighlighter
http://alexgorbatchev.com/SyntaxHighlighter/

本来は、上記サイトからスクリプトをダウンロードしてきて、自分のWebサイト内にスクリプトを設置してあげる必要があるのですが、公開されているスクリプトをWeb経由で引っ張る方式を採用します。
(So-netブログって自作スクリプトファイルを設置できないですよね？)

管理ページの[デザイン]->[テンプレート管理]->HTML編集(上級者向け)から利用しているテンプレートを直接編集します。


張り付けるコードは以下。
重要なポイントは、bodyの閉じタグ(</pre>)の直前にコピペすること。
スクリプトの遅延ロード(要は必要なスクリプトをその時にロードする)を使っているので、HTMLが読み込まれる一番最後に動かすようにする必要があります。
詳しくはここ読んで。
http://alexgorbatchev.com/SyntaxHighlighter/manual/api/autoloader.html

ちょっとカスタマイズしているのは、以下の3点です。

• 33行目：toolbarをfalse
defaultはtrue。通常はコードの右上に?アイコンが表示されます。それをクリックするとSyntaxHighlightのクレジットが表示されます。特に必要がないので、falseにしています。
• 34行目：auto-linksをfalse
defaultはtrue。通常は表示したコード中のhttpで始まる内容はリンクとして表示されます。特にリンクとして表示する必要はないので、falseにしています。
• 36～42行目：追加のCSS
この記事の記載時点の最新版(3.0.83)では、コードの表示時に縦スクロールバーが必ずでるようなので、強制的に出さないCSSを追加。 http://www.turph.jp/blog/archives/171を参考にさせてもらいました。多謝。

オプションの使い方は以下のページを参照。
http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/

コードを記載するときは、こんな感じで記載すればOKです。

<pre class="brush: php;">
function test(){
 return false;
}
</pre>

brushにコードの種類を指定します。指定できるbrushは以下を参照。
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

あとなぜかSo-netブログの記事のプレビュー機能の時はきちんと表示されません。
いったん保存してみるときちんと見えるようになるので、動かないと慌てる前に一度保存してみてください。
それともう一点。XMLを記載するときにXML宣言がうまいこと表示されません。

<?xml version="1.1"?> <-これね。

なんかこんな感じに表示されちゃうんです。

<?<a href="http://match.seesaa.jp/afr.pl?hid=25&sid=tamatamablog:000266401367&k=xml&ic=utf8" class="affiliate-link" target="_blank">xml</a> version="1.1"?>

何が悪いかというと、キーワード広告の表示が悪さをしている模様。とにかくちゃんと表示できないと意味がないので、キーワード広告をオフにして対応しました。
設定方法は、管理ページの[設定]->[広告設定]->[キーワード広告の表示設定]を[オフ]にします。