Make a ‘View Source’ Button | CSS-Tricks

技術サイト等で使えそうなページ内に設置する「ソースを見る」ボタンの実装例。
なんらかのライブラリを配布する際やコードの動作を紹介するデモページなんかに導入しておくと利用者に親切かも。
ボタンクリックでLightBox風にソースを表示させることができ、きちんとハイライトもされた状態になっています。デザインもなかなかいい感じ。


ファイルのダウンロードも可能ですので比較的簡単に実装できますね。
firefoxやChromeでは、view-source:http://〜みたいにするとソースコードを見るページにリンクできますが、そうした方法での実装法も紹介されています。

関連エントリ

• ブラウザ上で動作するソースコードエディタ『Edit Area』
• ブラウザ上でソースコード編集が可能な開発環境を提供「ecoder」