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

ソースコードを見やすくきれいに表示(SyntaxHighlighter)

ダライアス外伝というよりダライアスシリーズっぽい要素があったりなかったりする「BomberBomber外伝2」

最近の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の日本語化

2008/06/10

関連項目

雑多なもの

Ext.js

jquery

lightwindow,greybox

SyntaxHighlighter

特別企画「犯人はヤス」

サイト

OPEN SPACE様
様々な情報がありますが、javascript関連のリファレンスも充実しています。
JQUERY日本語リファレンス
jQueryに関するリファレンスサイト。見やすい!です。

どう考えてもおすすめ書籍

JavaScript 第5版
JavaScript 第5版David Flanagan 村上 列

オライリー・ジャパン 2007-08-14
売り上げランキング : 10413

おすすめ平均 star
star誤解を招く本
star言語としてのJavaScriptに一番踏み込んだ本
starJavaScriptのバイブル本

Amazonで詳しく見る
by G-Tools
JavaScript: The Good Parts
JavaScript: The Good PartsDouglas Crockford

Oreilly & Associates Inc 2008-05
売り上げランキング : 31572


Amazonで詳しく見る
by G-Tools

▲一番上へ

ゲーム
技術資料
普段思った事をつらつらと
リンク
カスコンテンツ