コードに色づけ Firefox でしか試してません。Opera ではもしかしたら動くかもしれないけれど、IE では絶対動きません。コアな部分 (つまりコードをマークアップするとこ) はブラウザにあんまり依存しないみたいなので、ブックマークレット化する部分をクロスブラウザすれば OK だけど面倒臭い。

1. ブックマークレット起動
2. 色づけしたいテキストをクリック (カーソルが I ビームになるとこ)
3. プロンプトに使用するシンタックスを入力。

ECMAScript, Ruby, Lisp, XML, CSS, PHP, Io, Perl が適当に色づけ可能だと思うけど Perl はよく知らないし、Lisp はそもそもキーワード的なものがないので微妙。Javascript も JScript も ActionScript でも ECMAScript のスーパーセットである限りは ECMAScript でそこそこ色づけできるはず。HTML も XML でソレっぽくなるはず。

このスクリプトは少なくともコード部だけは独立してマークアップされてる必要があります。

<p>ほげほげ</p>
<pre>code</pre>
<span>code</span>
<code>code</code>
<p class="foo">code</p>

上のは OK. 下のは NG

<p>ほげ<em>ほげ</em>うげ
code</p>

子要素を持った要素は無理 (テキストノードに兄弟要素があるとダメ) ってことっす。

巨大なコードをやると死ぬかも。でも俺は謝らない。

1. トップ
2. prog
3. コードに色をつける bookmarkletcode coloring bookmarklet

1. トップ
2. web
3. コードに色をつける bookmarkletcode coloring bookmarklet

Trackback URI がコピーしやすい用に Trackback URI (本体のほう) をクリックするとプロンプトに URI 表示するようにしてみた。まぁ Trackback 自体殆ど来ないし、来まくっても困るんですけど……コメントとか削除するシステム作ってないので手動削除だし。

1. トップ
2. web
3. Trackback URI の UI

1. トップ
2. prog
3. Trackback URI の UI

UA 文字列を Javascript から得るにあたり検索をかけてみたのだけど、UA 文字列にある文字列 (eg. “MSIE”) があるか調べるときに String.prototype.indexOf の結果が -1 であるかを調べているのが多かった。これはやっぱ String.prototype.match だと遅いとかそういう問題があるからなのだろうか……なんかダサいので今回自分は String.prototype.match を使ったけど、どうなんだろ。

if (navigator.userAgent.indexOf("MSIE") != -1)
// do something for MSIE

if (navigator.userAgent.match(/MSIE/))
// do something for MSIE

さらに && とか使おうとすると演算子の優先順位 (よく忘れる) とか考えることになって面倒臭い……

1. トップ
2. prog
3. ua.indexOf("MSIE") != -1 ?

1. トップ
2. web
3. ua.indexOf("MSIE") != -1 ?

pre に現れるコードを Javascript で着色 (Javascript でやってるのはマークアップ) してみる。重い？

少し前からこれがやってみたかったので class 属性に使用してる言語を書いていたりした。言語ごとにトークンを使いわけたようと思ってたわけだけど、実際そこまでやるのってどうなのよ、とか思い始めた。そのうちやってみて、いけそうだったら採用してみよう。

サンプル 重いので移した。

正規表現はブラウザ毎の違いが殆どない気もする。気付いてないだけかもしれないけど。

FF で右クリックから View Selection Source すると内部 DOM の内容もソースとして出てくるのが役に立った……

1. トップ
2. prog
3. code をクライアント側で着色

1. トップ
2. web
3. code をクライアント側で着色