ソースコードをWebページへ表示できるよう変換するWebサービスを公開

ソースコードを表示可能なHTMLに変換するWebサービス「SSSH」を公開しました。
(Standalone Static Syntax Highlight builder の略です。)

SSSHを使うと、ソースコードを静的なHTMLに変換することができます。

• ソースコードに含まれる、HTML特殊文字をタグに置きかえる。
  
• タブ空白や半角空白が潰れないように置きかえる。
  
• 簡単なシンタックスハイライトを付けることもできる。

ソースコードを静的なHTMLとして出力するので、CodeMirrorやSyntaxHighlighterのようにライブラリを読み込む必要はありません。

SSSHにコードを張り付けるとハイライトされる

「Webサービス」というほど大げさなものではありませんが。
公開にはGithub Pagesを使用しています。

使い方

サイトに書いてあるとおり、必要なのは3ステップのみです。
・「ソースコード」にコードを貼る
・「プレビュー」「HTML」に結果が表示される
・「HTML」をコピーして、コードを表示したいページに貼り付ける

仕組み

興味のある方がいればお読みください。当然ながら、Githubのプロジェクトページに行けばコードは全文を公開しています。
一言で説明すると、上部のtextareaに入力されたテキストを、ゴリゴリと正規表現パースしているだけです。
いちおう、各部の解説としては、

・HTML特殊文字を変換
一部の文字はそのままではWebページで表示できないので単純置換。
特に "<>"など。(静的Webページなのでセキュリティはこの程度)

・半角空白とタブ空白を、表示およびコピーペーストできるようタグ付け
半角のHTML表現は何種類かある中から「&ensp;」(文字nと同じサイズ)を選択。
タブ空白は<span>で囲んで表示されるよう保護。ついでに文字コードによる表現の「&#x0009;」に変換。

・タグに色付け
"<>"で囲われた範囲はすべてタグ扱い。
 タグ内の予約語を色付け。(予約語は、ハードコーディングされている数単語のみ。)

・JavaScriptへの色付け。
"<script>"に囲われた範囲がJavaScript。
C系言語用関数 syntax_c_like() に予約語リストと共に渡す。
あまりJavaScriptとしての扱いをしていない。
syntax_c_likeは文字列( "hello"や'world' )およびコメントアウトをハイライトしてくれる。

・ユーザの入力検出
textareaの変化、上部オプションの切り替えでコールバック関数が呼ばれると、上記の変換を最初からかけ直す。キャッシュなどは行なっていない。

・改行に<br />を付与する
・コード全体を<div>の領域の筥で区切って囲う

といった感じです。
本当にあらためて解説するような特別なことは何もしていないという...。
正規表現で済ませて、真面目な構文解析をしていません。そのため、トリッキーなJavaScriptを渡されると結果がおかしくなることもありますが、サンプルコードを表示用にハイライトするには十分な能力があります。
(あと、そういった結果を見つけたら報告をいただけると嬉しいです。)