Sun Limited Mt.

今までのデザインでは 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 name=”code” class=”php” cols=”60″ rows=”10″><br /> ここにコードを書く<br /> </textarea><br />
コードは textarea タグ内に書く。textarea タグのクラスでコードを種別を指定する。

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

参考

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

追記

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

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

関連する投稿

• PHP で多次元配列のソートを SQL の ORDER BY のように複数項目でソートする
• jQuery でクッキーを扱う方法
• CakePHP 保存したデータをすぐに find したい場合キャッシュを OFF にする
• CakePHP 1.2 の saveAll その2
• PHP の mime_content_type 関数がなかった