「JavaScriptのシンタックスハイライターをJavaScriptで作れ」

インターン講義4日目「JavaScript で学ぶ イベントドリブン」 - Hatena::Engineering http://d.hatena.ne.jp/hatenatech/20100805/1281005759 での課題3 「JavaScript のシンタックスハイライターを JavaScript で作れ」のまとめ 講義中のログはこちら 続きを読む
1
hatenatech @hatenatech

本日の講義の資料と録画を公開しました。Javascriptの概要からDOM、イベントドリブンまでを2時間で網羅した密度の高い講義となっています。 #hatenatech インターン講義4日目「JavaScriptで学ぶイベントドリブン」 http://htn.to/m5HF34

2010-08-05 19:59:37
チェレンコフ🦜 @cherenkov

はてなインターン4日目の課題3のシンタックスハイライトどうやるんだ。preむずいね。DocumentFragmentをどう使うんだ。 http://j.mp/aloXCv #hatenatech

2010-08-07 21:03:16
チェレンコフ🦜 @cherenkov

色つけないテキストノードもDocumentFragmentに追加していってreplaceすんのかな

2010-08-07 21:09:18
チェレンコフ🦜 @cherenkov

preのテキストを文字列置換していって、置換用preに代入して最後にdfに入れて置換でいいか。

2010-08-07 21:12:22
mooz @stillpedant

シンタックスハイライトするやつ作った "Happy Hacking Prettifier" - http://j.mp/cKLGQ0

2010-08-07 21:17:54
mooz @stillpedant

文字列の任意の位置から正規表現のマッチングをはじめたかったのだけれど, その方法が良く分からずni結局毎回 slice するという超絶に遅い仕様となった. lastIndex がどうのこうのという記述もあったけれど, 良く分からず.

2010-08-07 21:22:19
mooz @stillpedant

また, はじめて input イベントを使ってみた. これはテキストエリア内の文字列が入力 (変更) される度に通知されるイベントで, keyup などを見るよりも効率が良い.

2010-08-07 21:27:37
Griever @Griever2

私もシンタックスハイライトするやつ作った!自分用のいいかげんなやつだけど(ぁ http://gist.github.com/512773

2010-08-07 21:45:18
Griever @Griever2

正規表現の \b が便利

2010-08-07 21:46:44
mooz @stillpedant

@Griever2 正規表現の \b 便利ですよねー. あと, この後からキーワード使って正規表現組み立てるの良いですね. 後で真似します.

2010-08-07 21:49:55
azu @azu_re

ここで時間があったらutatane卿が圧倒的な力でシンタックスハイライトを書きそうです。

2010-08-07 21:52:01
Atsushi Takayama @edvakf

「JavaScript のシンタックスハイライトは正規表現では無理」

2010-08-07 21:54:07
小倉唯 @Constellation

なんかがんばれといわれている気がした!

2010-08-07 21:54:56
mooz @stillpedant

utatane 卿 iv/js 持ってるので圧倒的過ぎる……

2010-08-07 21:56:47
小倉唯 @Constellation

とりあえずtoken列に解析(index + length + type)はできた. http://gyazo.com/1fc14581add537913b6639c13e3ce89d.png ただspecial_variableとかに何を当てたらいいのかちょっと不明...

2010-08-07 22:41:14
小倉唯 @Constellation

みんな大好きvim color定義にしたらいいだろうと勝手に思った.

2010-08-07 23:06:43
小倉唯 @Constellation

あとで, getter / setterの定義にも対応して, ES5最先端のsyntax highlightにします.

2010-08-07 23:39:07
小倉唯 @Constellation

http://gyazo.com/3f70f6d4873f1f2140197acc354c5f36.png こんな感じでget / setのハイライトに対応. IdentifierNameとして入ったReservedWordsはhighlightしない. 満足...

2010-08-07 23:57:37
azu @azu_re

cho45先生のシンタックスハイライト見本。 "cho45's jshighlight at master - GitHub" http://is.gd/e8myc

2010-08-08 16:02:35