ソースコードを見やすくきれいに表示（SyntaxHighlighter）
最近の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の日本語化
関連項目
雑多なもの
- PNGを背景でrepeatさせたい時のIE6対策
- onloadイベントの呼び出しがhistory.backとかの時にブラウザ毎に挙動違うのが気になったので軽く調査
- 画像のフェードイン・フェードアウト（rico.js）
- 画像の上に画像を配置してフェード（透過）
- IE判定簡易版
- AjaxのresponseTextでSafariだけが華麗に文字化けする件
- FLASHの上に画像（レイヤー）を置きたい
- スムーズにページ内スクロールさせたい
- 半角英数の連続文字列を改行させたい
- フォームで条件によって項目を切り替え表示してみる
- jsファイルを動的に読み込む事について考える
- GoogleMapsがIEで表示されなかったりした場合
Ext.js
- とりあえずExt.js導入からダイアログ（アラート）表示までやってみる
- GridPanelを使ってXMLの内容を表示してみる
- GridPanelを使ってJSONの内容を表示してみる
- TreePanelを使ってみる
jquery
- IE6でもPNGで透過したいし簡単にロールオーバーさせたい
- 画像及びテキストのフェードイン・フェードアウト（jQuery）
- テーブルで1行毎に色を変えるアレ
- ちょっと変わったダイアログ的なものを表示する
- jQuery.jsとprototype.jsを同居させたい
- jquery.pager.jsを試してみる
lightwindow,greybox
SyntaxHighlighter
特別企画「犯人はヤス」
- JavaScriptでゲームっぽいものを作ろう！その1
- JavaScriptでゲームっぽいものを作ろう！その2
- JavaScriptでゲームっぽいものを作ろう！その3
- JavaScriptでゲームっぽいものを作ろう！その4
- JavaScriptでゲームっぽいものを作ろう！その5（一応完了）
サイト
OPEN SPACE様
様々な情報がありますが、javascript関連のリファレンスも充実しています。
JQUERY日本語リファレンス
jQueryに関するリファレンスサイト。見やすい！です。
どう考えてもおすすめ書籍
| JavaScript 第5版 | |
 | David Flanagan 村上 列 オライリー・ジャパン 2007-08-14 売り上げランキング : 10413 おすすめ平均   誤解を招く本言語としてのJavaScriptに一番踏み込んだ本 JavaScriptのバイブル本Amazonで詳しく見る by G-Tools |
| JavaScript: The Good Parts | |
 | Douglas Crockford Oreilly & Associates Inc 2008-05 売り上げランキング : 31572 Amazonで詳しく見る by G-Tools |
- 技術資料