釣堀.net

紹介と導入経緯

syntaxhighlighter - Google Code
http://code.google.com/p/syntaxhighlighter/

このJavaScriptは、上にデモ記述しましたが、プログラム毎での特定要素の文字色を変え、更に各ソースに行番号を付加することができるというものです。もしJavaScriptオフにしている場合のユーザでもテキストエリア上にコードが表示されるのでアクセシビリティ上の問題はありません。

サポートしている言語を下に記述します。

• C#
• CSS
• C++
• VB & VB.NET
• Delphi, Pascal
• Java
• JavaScript
• PHP
• Python
• Ruby
• SQL
• XML, HTML, XSLT and any other XML style code

非常に多くの言語に対応しているため、私は今回これを導入して見たというわけです。

導入方法

syntaxhighlighter - Google Code
http://code.google.com/p/syntaxhighlighter/

まずは上記のサイトから必要なデータをダウンロード、解凍後、必要なファイルを自分が使用しているサーバにアップロードしましょう。

次に設置したい内容にあわせて特定のclassを記述したtextareaを設置します。ソースコードはこのtextareaの中にそのまま記述しましょう。

設置するページに上記のHTMLタグを貼り付けます。「Scripts/」の部分は自分がライブラリを設置した場所に指定し直して下さい。今回はXMLだけ使用するようにしましたが、他の言語を使用する場合はそれに合わせてJavaScriptを読み込ませてください。

以上で完了です。

私はブログの書き込みはブラウザ上で簡単に書けるFCKeditorを使用しているのですが、どうも今回導入を考えたSyntaxHighlighterと相性が悪く、FCKeditorでソース画面に移動した時にtextarea内のデータ（それに限りませんが）の改行を削除してしまうという状態に陥りました。ソースから通常編集画面に行くのは問題ないのですが、逆の場合のみ改行が削除されるようでした。そのため色々と試行錯誤したのですが、今回の件とは関係ないのでそれに関してはまたの機会に。