最近のJavaScriptは良く出来たもので。
結構最近まで、ソースコードはtextareaかpreで表示させる、というベタな方法を取っていたのですが、色々なサイトを巡回していると、ソースコードをきれいに表示させているサイトとかがあって、
「マメな人だなぁ〜」
なんて思ったりしていたのですが、ある時ふと気づきました。
「ん？きれいに表示されているソースコード、よくよく見てみるとフォーマット一緒じゃないか？」
ということで調べてみたら、ありましたありました。
SyntaxHighlighter っていうそうです。
使い方は結構簡単。
１．ソース一式DLしてくる。
http://code.google.com/p/syntaxhighlighter/
ここの「Downloads」から！（何故か.rar）
２．このファイル達を自分のサイトのどこかに配置して、最低限以下を読み込む。
３．そして、実際のソースコードを、textareaで囲み、nameとclassを指定する
<textarea name="code" class"hoge">ソースソース</textarea>
classの「hoge」の所は、ソースの種類によって書き換え。
そして、該当するclassを使用する為には、該当するjsを読み込む必要あり！
以下の種類が選べるっぽいです。
| 種類 | class名（いずれか） | 読み込むjsファイル |
| C、C++ | cpp、c、c++ | shBrushCpp.js |
| C# | c#、c-sharp、csharp | shBrushCSharp.js |
| CSS | css | shBrushCss.js |
| Delphi(PASCAL) | delphi、pascal | shBrushDelphi.js |
| JAVA | java | shBrushJava.js |
| JavaScript | js、jscript、javascript | shBrushJavaScript.js |
| PHP | php | shBrushPhp.js |
| Python | py、python | shBrushPython.js |
| Ruby | ruby、rails、ror | shBrushRuby.js |
| SQL | sql | shBrushSql.js |
| VisualBasic(VB) | vb、vb.net | shBrushVb.js |
| XML、XHTML、HTML | xml、xhtml、xslt、html | shBrushXml.js |
４．onload等でスクリプトを呼び出す。
dp.SyntaxHighlighter.HighlightAll('code');
私の場合は、以下のような感じで shCore.js に追加しちゃいました。
これでいけると思います。
ふと気づいたこと。
perlが無くね？？
個人的には非常に悲しい。ひたすら悲しい。
仕方ないので、class="c"とでもしておきますか。。。
あと、Binbo-Specialではいじっていますが、デフォルトだと、全て英語だし、ツールバー部分がmouseoverでカクカクずれるし、なんだかなぁ、という訳で、ちょっと気になる方は、以下のコンテンツへ・・・・
>>SyntaxHighlighterのツールバーがマウスオーバーでずれる件
>>SyntaxHighlighterの日本語化
JavaScript関連リンク
サイト
Binbo-Special > 技術情報らしきもの > JavaScript
当サイトです。
OPEN SPACE様
様々な情報がありますが、javascript関連のリファレンスも充実しています。
JQUERY日本語リファレンス
jQueryに関するリファレンスサイト。見やすい！です。
書籍
Prototype & script.aculo.us JavaScriptライブラリによるAjaxアプリケーション開発
読み途中ですが、なかなか面白いです。
jQueryで作る Ajaxアプリケーション
jQueryに興味を持ったら読んでみるのも吉。
