syntaxhighlighterをFC2ブログへ導入する

syntaxhighlighterとは、WEBサイト上でプログラムのソースコードを掲載する時に用いるライブラリです。自動でソースコードを色装飾などをしてくれて、非常に読みやすくなります。数多くのプログラム言語に対応しています。

で、実際に試してみると、こんな感じ↓になります。

(function(){
    console.log("HELLO WORLD");
})();

導入の手順をささっと書いてみます。

まず、syntaxhighlighterの公式サイトに行きます。右サイドバーにある「download」をクリックします。「Click here to download」とあるリンクをクリックすれば、最新バージョンのソースファイルがzipでダウンロードされます。

次に、ダウンロードしたzipファイルを解凍し、必要なファイルをFC2ブログの「ファイルアップロード」でアップロードします。最低限必要になるファイルは、shCore.js、shBrushCss.js、shCore.css、shThemeDefault.css、clipboard.swfです。プラス、自分が掲載するであろうプログラム言語の名前が含まれているファイルをアップロードしましょう。

アップロードが終わったら、ブログテンプレートの変更です。ページのヘッダ部に、外部スクリプト・スタイルファイルの記述をします。ファイル「clipboard.swf」以外は全て記述しましょう。

さらに、ヘッダ部に以下の記述を書きましょう。

これで下準備は全て終了。

使い方を説明します。まずpreタグを作り、クラスに"brush:プログラム言語"を指定します。そしてpreタグの中に掲載するソースを入れるだけ。javascriptの場合、こんな感じ↓に書きます。

ソースコード

以上。
ファイルをアップロードするのが少し面倒ですね。