geshi_webapi - koshigoe prototype - Trac
MASHUPEDIAの記事になっていた、構文強調WebAPI。 アサブロはサーバ側で構文強調できる機構がないのでソースはベタなPREのままにしていたが、面白そうなので試してみた。
MASHUPEDIAの記事中にGETメソッドではレスポンスが返らないことがある。POSTを使用したほうがよさそう。
とあったので 何も考えず
new Ajax.Updater(
pre,
"http://lab.koshigoe.jp/geshi_webapi/syntax_highlight.php",
{
method : "post",
postBody : { //(ry }
}
);
みたいなことを一生懸命やって「なんでデータとれねーんだろう」とか寝ぼけたことを考えていたが、XSSはダメだっつーの。
なので、JSONPでやってみた。
// これは実際のコードからの抜粋。
// 詳細はこのエントリのソースを見てね（コメントないけど）。
// 強調表示する（予定）のファイルタイプ。API側でサポートしてるの全部は使わん。
var langs = [ "javascript", "html", "csharp", "css", "sql", "vb", "xml" ];
$A(document.getElementsByTagName("pre")).each( function(pre) {
// コールバック関数名はタイムスタンプから生成
var name = "geshi_callback_" + new Date().valueOf();
// CSSクラス名を言語名にする。クラス名がない場合は処理しない
var c = pre.getAttribute("class");
if( ! langs.include( c ) ) throw $continue;
// HTML/XML対応できるかと思って入れてみたが
// あまりうまくいかない。要検討。
var src = [ "html", "xml" ].include( c ) ?
pre.innerHTML.unescapeHTML() : pre.innerHTML;
// GET用のURL作成
var req = [
"http://lab.koshigoe.jp/geshi_webapi/syntax_highlight.php?",
$H( {
lang : c,
source : src.escapeHTML(),
output_mode : "jsonp",
callback : name
} ).toQueryString()
].join("&");
// コールバック関数登録
window[name] = function(dt) {
pre.innerHTML = dt.highlighted_source.toElement().innerHTML
Object.extend( pre.style, {
backgroundColor : "ghostwhite",
color : "black"
} );
};
// 実行
var sc = document.createElement("script");
sc.src = req;
document.getElementsByTagName("head")[0].appendChild(sc);
} );
結構さくっと変換される。すげー。
過去のエントリをいくつか対応してみた。上記ソースのコメントにも書いたが 頭使わないコーディングしてるので、HTMLやXMLは対応できず強調なしにしている。 現状はJSのみ。以下のエントリを対応版にしてみた。
JSの構文強調ライブラリもあるんだけど、ソース量が多いとえらく時間かかるのでとりあえずこれでしばらくいってみよう。
Safari3.0.2でレスポンスの日本語部分が化け化けになったので、とりあえずSafariの場合は強調処理を飛ばすようにした。あと、IE6はスクリプトエラーでないのにまったく強調表示されない。Firefox2.0.0.4とOpera9.21はOK。うまくいかん部分は、とりあえず放置。
ｺﾒﾝﾄをする