GeSHiを使った自作コードハイライトツール

前回の記事でGeSHiの基本的な動作の確認までできました。

今回は、もう少し汎用的に使えるようにページを作ってみます。
載せたい機能は、まずは以下のような感じになるでしょうか。

・ソースコードを指定して、変換を行い、その結果を表示する。
・結果はブログに貼りやすいようにtextareaに表示する
・言語の指定を可能にする。
タブは使わないようにする(インデントが崩れないように)

最低限これだけの機能があれば、当面ブログにコードを貼る分には困らないと思います。
と言うわけで早速作ってみたページを公開します。

CodeHighlighter

画像

画面デザインは凝ってる余裕がありませんでしたので、至ってシンプルです。
ソースコード欄にコードを貼り付けて、言語欄にコードの言語を入力します。
言語欄は入力ではなく選択式にしたかったのですが、とりあえず早く作ってみたかったので、手抜きとなってしまってます…
コード・言語の指定後、ハイライトボタンを押すと、ページ下部に変換結果のHTMLおよびそれを表示させた場合の表示結果が出力されます。
画像

あとは変換結果欄のコードをブログにコピペするだけ、となってます。
いつものXAMLを変換して貼ってみたのが以下の結果です。
KeyUp="TopLevelKB">
    Name="ButtonA" Content="ボタンA"/>
    Name="ButtonB" Content="ボタンB"/>
    Name="statusTextBlock"/>
>

昨日の結果と違い、
タグではなく、<div>タグを使用するようにオプションを変更したため、インデントが正しく出ているのがわかると思います。日本語も問題ないですね。

ただしまだ一つ注意点があります。
この変換結果コードの行末には<br />タグがついているのですが、このコードをそのままウェブリブログ(に限ら無いと思いますが)に貼ると、2重改行となり、表示が間延びしてしまいます。
別途テキストエディタ等で各行末の<br />タグを除去してから貼って下さい。
これに関しては、いずれ自動で除去を行うようにしたいと思います。

さて、今後ですが、このツールをもう少し使いやすくしていきたいですね。
現在思いつくだけでも…
・行末<br />タグ除去
・CSSを別ファイルに分離して、コードサイズ削減(ブログの記事文字数制限に引っかからないように…)
・行番号付加選択
等できそうなことは結構あります。

Silverlightのことも書きたいので、すぐとは行かないかもしれませんが、またいずれ…

ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 0

この記事へのコメント

この記事へのトラックバック