便利なソースコード表示用JavaScript (dp.SyntaxHighlighter)
2006年12月1日(金) 10:35
ホームページやブログ記事でJavaScriptなどソースコードを記述する際に、非常に面倒だったりする。また、コードに配色をしてエディタで表示したときのように見せたいけど面倒なのでそのまま掲載してきた方も多いはず。
行番号などもソースと一緒に表示できれば、説明の記述も分かりやすくなる。
そんな要望に答えてくれ、しかも導入が簡単なのが SyntaxHighlighter。各言語用のJavaScriptと専用のCSSから構成され、<textarea>~</textarea> を変換してくれる。
ソースをそのまま記述すればよいので楽チンになる。実際に developer.yahoo.com 内でも利用されいて、下のように表示している。

対応する言語も多い
- C#
- CSS
- C++
- VB & VB.NET
- Delphi, Pascal
- Java
- JavaScript
- PHP
- Python
- Ruby
- SQL
- XML, HTML, XSLT
ソース解説する際に役に立ちそう。
関連する記事
- デザインが魅力的なスライドショーJavaScript (Lightview)
- 楽にフォーム入力チェックを実装するJavaScript (JSValidate)
- CSSデザインレイアウトをオンラインで簡単に作成する (YAML)
- ユーザーが再配置可能なWedgetを実装するJavaScript (Prototype Portal Class)
- フォームボタンCSSデザインするテクニック (Rediscovering Button Element)
- 半透明の角まるツールチップを表示するJavaScript (CoolTips)
- JavaScriptでプログレスバーを簡単に実装する (jsProgressBarHandler)
- JavaScriptコード圧縮して盗用から守る (packer)
- iTuneのようにカバーアートを表示するFlash (iTunes Coverflow)
- 画像をサムネイルのサイズで表示するJavaScript (jQuery Thumbs)
- Ajaxでサクサク動くWebファイルマネージャ (Relay)
- アンカータグを利用してスムーススクロールを実装する (df Smooth Scroll)
- MacでもFlashでホイール操作が出来るようにする (SWFMacMouseWheel)
- HTMLなどタグ編集を楽にするエディタ機能JavaScript (jTagEditor)
- 使いやすいYUIライブラリのWYSIWYGエディタ (Rich Text Editor)
- フォトショップで作る80種類のテキストエフェクト集 (photoshoproadmap.com)
- Flashで便利なTweenクラスのわかりやすい解説 (Tween Class Easing)
- CSSレイアウト情報をレイヤー表示するブックマーク (XRAY)
- Lightboxのような透過レイヤー表示の実装サンプル (Lightbox Effect)
- CSSデザインで綺麗なボタンを作成する (How to make sexy buttons with CSS)

