dara-j

これはありがたい

geshi_webapi - koshigoe prototype - Trac

MASHUPEDIAの記事になっていた、構文強調WebAPI。 アサブロはサーバ側で構文強調できる機構がないのでソースはベタなPREのままにしていたが、面白そうなので試してみた。

GET? POST?

MASHUPEDIAの記事中にGETメソッドではレスポンスが返らないことがある。POSTを使用したほうがよさそう。とあったので 何も考えず

new Ajax.Updater(
	pre,
	"http://lab.koshigoe.jp/geshi_webapi/syntax_highlight.php",
	{
		method : "post",
		postBody : { //(ry }
	}
);

なので、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のみ。以下のエントリを対応版にしてみた。

• JsDoc Toolkitを調べてみた
• JsDoc Toolkit
• WScript - HTA 相互通信ライブラリ
• HTAからWScriptへアクセスしてみた
• VBScriptラッパー修正

JSの構文強調ライブラリもあるんだけど、ソース量が多いとえらく時間かかるのでとりあえずこれでしばらくいってみよう。

追記（2007.06.30 04:55）

Safari3.0.2でレスポンスの日本語部分が化け化けになったので、とりあえずSafariの場合は強調処理を飛ばすようにした。あと、IE6はスクリプトエラーでないのにまったく強調表示されない。Firefox2.0.0.4とOpera9.21はOK。うまくいかん部分は、とりあえず放置。