грубо говоря - текстарея с подсветкой синтаксиса
поскольку подсветка происходит по мере набора, то скорость тут является критическим моментом.
что применяется сейчас:
текст парсится одной регуляркой вида /([\\s\\S]*?)(...)|$)/ где вместо многоточия идёт список паттернов захватывающих части текста, соответствующие определённым синтаксисам. благодаря такой реализации синтаксисы могут конкурировать по принципу "кто первый встал - того и тапки". да, это не позволяет точно распарсить язык, но для целей подсветки вполне хватает вроде бы.
подсвечиватель каждого языка - это простая функция, но она оборачивается в специальный кэширующий враппер. это позволяет лишний раз не производить подсветку, если в нём ничего не поменялось - для объёмных текстов с большим числом параграфов это весьма полезно.
цикл подсветки осуществляется так: вырезаются все переводы строк, br-ки преобразуются в переводы строк, потом вырезаются все тэги - в результате получается читый текст, который направляется на заданную функцию подсветки синтаксиса, которая добавляет свои тэги, сохраняя все символы (только переводы строк заменяются на br-ки и экранируются спец-символы)
полученный хтмл вставляется в скрытую текстарию и в ифрейм.
реализация через ифрейм позволяет избежать перерисовки всей страницы при обновлении хтмл-а, что уменьшает лаги при вводе текста.
также подсветка выполняется с троттлингом, то есть если вы вводите текст слишком быстро - подсветка производиться не будет пока скорость ввода не замедлится.
чтобы курсор не слетал перед обновлением хтмл-а производится вычисление символьного смещения курсора, потом обновление содержимого и в конце установка курсора на запомненную позицию. к сожалению для этого приходится бежать по дому считая символы. к тому же, метод довольно ненадёжный =(
попробовать альфу можно тут:
http://mojura.110mb.com/i-component/i-field.html
предлагайте свои идеи как что ускорить или сделать более расширяемо.