ピクスログ

以前の記事で、いくつかのJavascriptベースのソースハイライトライブラリを紹介しましたが、最近「SyntaxHighlighter」が気になってきたので試してみました。

前回の比較もかねて、サンプルには以前の記事で使ったソースを利用しました。
今回試したSyntaxHighlighterのデモページ

リスト番号が表示されるのでソースがわかりやすく、説明もしやすくなりそうです。

しかし、「empty」がなぜ2重に出力されるんだ（T_T
・・・片方だけハイライトされてるし。
でも、これはPHPのソースハイライトを行った場合だけ2重になるらしいので「shBrushPhp.js」内の問題か。

あと気になった点は、コードハイライトを行った部分に書いたHTMLタグが、勝手に視認できるように変換されてるところ・・・
つまり「<」が「&lt;」、「>」が「&gt;」に。

場合によっては便利だけど、これはオプションで指定できるようにしてほしい。

ソースコードにはcodeタグを書きたくなる私には、ちょっと困った仕様です
（我慢するか・・・改造するか

・・・と、先に文句ばかり書いてしまったけど、簡単に利用できて、デフォルトでも見た目もスマートで使い勝手はいいです。
やっぱり、リスト番号が表示されるとわかりやすいし。

以下、簡単に使い方を説明。

1. まず、syntaxhighlighter – Google Codeに行ってライブラリをダウンロード
2. ダウンロードした圧縮ファイルを解凍
3. 解凍したファイルからScriptsフォルダとStylesフォルダのファイルを以下のように取り込む。

   <link type="text/css" rel="stylesheet" href="./Styles/SyntaxHighlighter.css"></link>
   <script language="javascript" src="./Scripts/shCore.js"></script>
   <script language="javascript" src="./Scripts/shBrushPhp.js"></script>
   <script language="javascript">
   window.onload = function() {
   	dp.SyntaxHighlighter.HighlightAll('code');
   }
   </script>

   ※上記はPHPコードのハイライトを行う場合です。

4. 下記のように、ハイライトを行うソースをpreタグ（もしくはtextareaタグ）で囲む。
   その後、name属性を追加し、class属性に言語コードを記述しておく。

   <pre name="code" class="php">
   ハイライトを行うコードを記述
   </pre>

これで設置は完了です。
JavascriptやCSSのディレクトリパスは、任意で変更して埋め込むようにしてください。

SyntaxHighlighterの言語対応は、Languages – syntaxhighlighter – Google Codeで一覧できます。

言語ごとのハイライト用スクリプト名は、「shBrush[言語コード].js」の規則で登録されています。
どのスクリプトを読み込めばいいのかが、直感的にわかっていいですね。

perlはサポートされてないようです。
ある程度は別の言語で対応できそうですが。

上記内容とかぶりますが、まとめとして下記のような問題があります。

• preタグにname属性は存在しないが適用する必要がある。（使用するとValidできない）
• ハイライト内でタグを配置できない。

人によっては利用をためらいそうですが、改善されることを祈って今後に期待です。

細かいですが、PHPの変数はハイライトにしてくれないんですね。
・・・残念。

関連記事：
ソースコードのハイライトを行うJavascriptプログラムの比較