SyntaxHighlighter: ソース表示用ライブラリ

対応ブラウザ: 6+ 1.0+ 8.5+ 2.0+ 3.4+

(X)HTML や CSS などのソースコードの表示に、Mochikit にもバンドルされている、SyntaxHighlighter を試用してみました。設置も利用も比較的 お手軽で、MT や WordPress といった CMS を利用している方の選択肢になるかも。（参考: MochiKit: 軽量 JavaScript ライブラリ）

入手先

dp.SyntaxHighlighter

SyntaxHighlighter の特徴

長所

1. ソースコードを文法にしたがって色分けできるので、とても見やすい
2. 行数が表示されるので、話題にしているコードの場所を示しやすい
3. ソースコードをそのままコピペできる
4. ベタ打ちのソースコードを <textarea class="code"> で括るだけなのでラク
5. HTML/XML タグのエスケープが原則必要ない
6. JavaScript を切っていても、ソースコード自体はアクセシブル

短所

1. Perl, Lisp に対応していない
2. 必要なページごとに指定された内容の script タグを、HTML 文書の末尾に毎度毎度 挿入しなくてはならないのが、若干 煩瑣（仕方ないといえば、仕方ないけど。）
3. 言語ごとに js ファイルが分かれていて、その都度、必要なものだけ関連づける必要がある
   （かといって、最初からすべての js ファイルを、すべてのページ末に貼り付けるのは、あまりに芸がない）

（もちろん上記の短所は、JavaScript を使いこなせる方なら、ある程度はハックして解決できるでしょうけど..。）

設置の手順

1. デモページが同梱されていますが、必要なのは Styles ディレクトリ内にあるSyntaxHighlighter.css と、Scripts ディレクトリ内の JavaScript ファイル群です。これを .css ファイルや .js ファイルを管理している任意のディレクトリに保存します。
2. (X)HTML ファイルのヘッダ内に、link 要素で SyntaxHighlighter.css と関連づけるか、メイン CSS ファイルの先頭に @import で SyntaxHighlighter.css と関連づけます。（ココログフリーは HTML ヘッダをカスタマイズできないので、後者をチョイスしました。CMS を使っていない方は、後者の方が編集個所が１か所で済むのでオススメです。）
3. ページの最下部に、以下に示す javascript ファイルへのリンクを挿入します。

<script language="javascript" src="[path]/shCore.js"></script> <script language="javascript" src="[path]/[your chosen language's .js file]"></script> <script language="javascript"> dp.SyntaxHighlighter.HighlightAll('code'); </script>

設置は以上ですべて完了。

利用法

ベタ打ちのソースコードを、<textarea name="code" class="言語" rows="表示行数" cols="表示文字数/列">（ソースコード）</textarea> で括るだけ。これも簡単。

言語は、XML/HTML, CSS, C#, C++, Java, JavaScript, PHP, Python, Ruby, SQL, VB/VB.NET, Delphi が利用できます。Perl とか Lisp とかはダメっぽいです。このあたりは残念。

<textarea name="code" class="xml" cols="40" rows="6"> <link type="text/css" rel="stylesheet" href="Styles/SyntaxHighlighter.css"/> </textarea>

サンプル

@media projection { /* プロジェクタ用 */ div.slide { /* slide クラスを持った div 要素 */ page-break-after: always; /* ページ区切り */ margin: 0em 3em 0em; padding: 0.2em 2em; height:80%; overflow: visible; } }