技術資料らしきものJavaScriptソースコードを見やすくきれいに表示(SyntaxHighlighter)

最近のJavaScriptは良く出来たもので。

結構最近まで、ソースコードはtextareaかpreで表示させる、というベタな方法を取っていたのですが、色々なサイトを巡回していると、ソースコードをきれいに表示させているサイトとかがあって、
「マメな人だなぁ〜」
なんて思ったりしていたのですが、ある時ふと気づきました。

「ん?きれいに表示されているソースコード、よくよく見てみるとフォーマット一緒じゃないか?」

ということで調べてみたら、ありましたありました。


SyntaxHighlighter っていうそうです。

使い方は結構簡単。

1.ソース一式DLしてくる。

http://code.google.com/p/syntaxhighlighter/
ここの「Downloads」から!(何故か.rar)

2.このファイル達を自分のサイトのどこかに配置して、最低限以下を読み込む。

3.そして、実際のソースコードを、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

4.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に興味を持ったら読んでみるのも吉。

2008/06/10

▲一番上へ