今までのデザインでは pre タグ or code タグで PHP などのコードを表示していましたが、今回のサーバ移転＆デザイン変更を機にコードの表示に SyntaxHighlighter を使用してみました。

syntaxhighlighter – Google Code

特徴

  • 多言語対応のシンタックスハイライト
  • 行番号を付加
  • クリックするだけでクリップボードへのコピーが可能（IEのみ）
  • 別ウィンドウでソースを表示可能
  • コードの印刷が可能
  • JavaScriptオフの状態では、テキストエリアにてコードが表示される

対応言語

  • C++
  • C#
  • CSS
  • Delphi
  • Java
  • JavaScript
  • PHP
  • Python
  • Ruby
  • SQL
  • VisualBasic
  • XML/HTML/XHTML

導入

syntaxhighlighter – Google Code より最新のファイルをダウンロードする。

解凍すると Script , Styles, Uncompressed と3つのフォルダがある。Styles は CSS ファイルが含まれている。Script は圧縮されている JavaScript と クリップボードにコピーするのに使用する SWF ファイルが含まれている。Uncompressed は圧縮されていない JavaScript ファイル。

サーバにアップする必要があるのは、Styles と Script。これを適当な名前と場所にアップする。

WordPress での準備

使用しているテンプレートの header.php に下記コードを追加

<link type="text/css" rel="stylesheet" href="/css/SyntaxHighlighter.css"></link>

shCore.js は SyntaxHighliter のメインコード。shBrushPhp.js などは自分がハイライト表示させたい言語に応じて読み込む。
9行目の SWF はクリップボードにソースをコピーする SWF の場所を指定。

エントリでのコード指定方法

実際のエントリでコードを表示させるには下記のように書きます。

コードは textarea タグ内に書く。textarea タグのクラスでコードを種別を指定する。

注意点はコード内に textarea タグを書く場合は実体参照で書く。（全てのコードを実体参照で書いてもかまわない）

参考

dp.SyntaxHighlighter-コード表示に役立つJavaScript – WEBデザイン　BLOG
syntaxhighlighter – Google Code

追記

WordPress では textarea 内でコードを記述すると br タグが入ってしまいます。そのために textarea タグではなく pre タグを使用するほうがいいかもしれません。

<pre class="html" name="code">
ここにコードを書く
</pre>

関連する投稿