syntaxhighlighterをMT4に導入

syntaxhighlighterは、Webページ上でソースコードを綺麗に表示するためのJavaScriptライブラリ。
キーワードの色づけを行ったり、行番号なんかも自動で付けたりしてくれます。

このエントリーでは、syntaxhighlighterをこのブログ（Movable Type 4）に導入する手順を紹介します。 （あくまでも僕が行った手順です。すべての人にこの手順が最適化どうかはわかりません。）

導入にあたり、以下のエントリーを参考にさせていただきました。ありがとうございました！

• ソースを華麗に整えるjavascript「SyntaxHighlighter」 : skuare.net

では説明を・・・

• ファイルの取得

  以下のサイトから、必要なファイル群をダウンロードします。

  • syntaxhighlighter - Google Code

  画面右側の「Featured Downloads:」にある「SyntaxHighlighter_1.5.1.rar」をダウンロード。

• ファイルの展開・アップロード

  ダウンロードしたファイルを展開すると、以下のdp.SyntaxHighligherフォルダの中に、以下の4つフォルダがあると思います。

  • Scripts
  • Styles
  • Uncompressed

  このうち、「Script」と「Styles」ディレクトリの中にあるファイルをすべて、「http://www.kadoppe.net/js/syntaxhighlighter/」でアクセス可能なディレクトリの中にアップロードします。

• MT4のテンプレート編集

  ダッシュボードにログインし、上メニューから「デザイン→テンプレート」と選択します。次に右の「クイックフィルタ」から「テンプレートモジュール」を選択します。するとモジュール一覧に「ヘッダー」というのが表示されますので、それを開きます。

  開けたら、</head>タグの直前に以下のコードを挿入します。
  先ほどアップロードしたファイルのうち「shBrush○○.js」というのは、○○という言語をサポートするためのJavaScriptです。ブログでソースコードを書く予定がある言語に対応したJavaScriptファイルをインポートします。下の例では、JavaScript、xml、html（xmlのJavaScriptファイルで対応可能）、phpをサポートしています。

  ＜link rel="stylesheet" href="http://www.kadoppe.net/js/syntaxhighlighter/SyntaxHighlighter.css" type="text/css">
  
  
  
  
  
  
  

• 動作確認

  動作確認をするために実際にエントリーで使ってみます。エントリー作成フォームに以下のコードを入力します。name属性の値は変更してはいけません。class属性で書きたいコードの種類を指定します。

  hogehoge
  
  

  正しく行番号が表示され、コードのハイライト（色分け）も行われれば導入成功です

さぁ、問題は書くコードがないことですよ・・・。どうするか・・・。