« 昨日のまとめ | トップページ | Firefox 2.0 は 10/25 朝のリリース »

2006-10-21

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

対応ブラウザ: IE6+ Mozilla Firefox1.0+ Opera8.5+ Safari2.0+ Konqueror3.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 を使っていない方は、後者の方が編集個所が1か所で済むのでオススメです。)
  3. ページの最下部に、以下に示す javascript ファイルへのリンクを挿入します。

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

利用法

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

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

サンプル

|

« 昨日のまとめ | トップページ | Firefox 2.0 は 10/25 朝のリリース »

[Web]XHTML」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/15394/3903349

この記事へのトラックバック一覧です: SyntaxHighlighter: ソース表示用ライブラリ:

« 昨日のまとめ | トップページ | Firefox 2.0 は 10/25 朝のリリース »