Подстветка конструкций javascript html css..... и тд
 

Очень долго вскрывался от кривоватости бьютифолайзера, не выдержал размеров формы и постоянных обрезаний длинных строк и скопировал его к себе с корректировками, однако сразу появилась мысль подсветить код дабы производить доработку уже непосредственно в самом компиляторе, и собстно образовался вопрос, как заставить компилятор подсвечивать конструкции кода, есть какие-то наработки?

http://trim.dsns.ru/ - собстно виновник проблемы

http://jsbeautifier.org/ - оупенсурс исходник

P.S. Зеркало обсуждения http://www.php.ru/forum/viewtopic.php?t=32337

http://alexgorbatchev.com/SyntaxHighlighter/
или вот
http://jsfiddle.net/ тут тоже есть TidyUp

http://alexgorbatchev.com/SyntaxHighlighter/ - чёт не вкурю как его к техтареа крепить
http://jsfiddle.net/ - не дружит с даквой

нашел вот такого автора http://softwaremaniacs.org/soft/highlight/ но его сурс тоже режет техтареа

пробую отсюда вырезать http://demo.qooxdoo.org/current/playground/#Hello_World

откатал http://trim.dsns.ru/current/playground/playground.htm
Вроде с джаквой не конфликтует, попробуем склеить

Господа, это пи***.
Декомпилированный исходник зашкаливает за 100 000 строк
http://trim.dsns.ru/current/playground/#

как там найти место в котором генерится

<div style="z-index: 0; position: absolute; cursor: default; left: 1027px; top: 0px; width: 1023px; height: 504px; ">
	<div qxselectable="off" style="overflow-x: hidden; overflow-y: hidden; position: absolute; z-index: 10; -webkit-user-select: none; width: 1023px; height: 504px; ">
		<div style="z-index: 0; position: absolute; cursor: default; background-color: rgb(175, 175, 175); left: 0px; top: 0px; width: 0px; height: 0px; ">
			<div qxselectable="off" style="overflow-x: hidden; overflow-y: hidden; position: absolute; z-index: 10; -webkit-user-select: none; width: 0px; height: 0px; ">
				<div style="z-index: 0; position: absolute; cursor: default; left: 0px; top: 0px; width: 8px; height: 1px; ">
					<div qxselectable="off" style="overflow-x: hidden; overflow-y: hidden; position: absolute; z-index: 10; -webkit-user-select: none; width: 8px; height: 1px; -webkit-user-drag: none; background-image: url(http://trim.dsns.ru/current/playground/resource/qx/decoration/Modern/splitpane-knobs-combined.png); background-position: 0px 0px; background-repeat: no-repeat no-repeat; ">
					</div>
				</div>
			</div>
		</div>
		<div style="position: absolute; z-index: 11; width: 100%; cursor: row-resize; display: none; ">
		</div>
		<div style="z-index: 0; position: absolute; cursor: default; left: 0px; top: 0px; width: 1023px; height: 504px; ">
			<div qxselectable="off" style="overflow-x: hidden; overflow-y: hidden; position: absolute; z-index: 10; -webkit-user-select: none; left: 1px; top: 1px; width: 1021px; height: 502px; ">
				<div style="z-index: 0; position: absolute; cursor: default; left: 0px; top: 0px; width: 1021px; height: 25px; ">
					<div style="overflow-x: hidden; overflow-y: hidden; white-space: nowrap; text-overflow: ellipsis; position: absolute; z-index: 10; -webkit-user-select: none; font-family: 'Lucida Grande'; font-size: 11px; font-weight: bold; line-height: 1.4; color: rgb(26, 26, 26); left: 5px; top: 5px; width: 1011px; height: 15px; " qxselectable="off">
					</div>
				</div>
				<div style="z-index: 0; position: absolute; cursor: default; left: 0px; top: 26px; width: 1021px; height: 476px; ">
					<div qxselectable="off" style="overflow-x: hidden; overflow-y: hidden; position: absolute; z-index: 10; -webkit-user-select: none; width: 1021px; height: 476px; ">
						<div style="z-index: 0; position: absolute; cursor: default; left: 0px; top: 0px; width: 1021px; height: 476px; ">
							<div qxselectable="off" style="overflow-x: hidden; overflow-y: hidden; position: absolute; z-index: 10; -webkit-user-select: none; width: 1021px; height: 476px; ">
								<div style="z-index: 0; cursor: default; overflow-x: hidden; overflow-y: hidden; text-align: left; position: relative; outline-style: none; outline-width: initial; outline-color: initial; background-color: rgb(223, 223, 223); left: 0px; top: 0px; width: 1021px; height: 476px; " tabindex="1">
									<div qxselectable="off" style="overflow-x: hidden; overflow-y: hidden; position: absolute; z-index: 10; -webkit-user-select: none; width: 1021px; height: 476px; ">
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div style="border-top-width: 1px; border-top-style: solid; border-top-color: rgb(128, 128, 128); position: absolute; pointer-events: none; width: 1021px; height: 0px; left: 0px; top: 25px; background-position: 0px 0px; ">
				</div>
			</div>
			<div style="border-top-width: 1px; border-top-style: solid; border-top-color: rgb(77, 77, 77); border-right-width: 1px; border-right-style: solid; border-right-color: rgb(77, 77, 77); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(77, 77, 77); border-left-width: 1px; border-left-style: solid; border-left-color: rgb(77, 77, 77); position: absolute; pointer-events: none; z-index: 5; width: 1021px; height: 502px; left: 0px; top: 0px; background-position: 0px 0px; ">
			</div>
		</div>
	</div>
</div>

не представляю

поднял вопрос тут http://softwaremaniacs.org/forum/hig.../31325/#176447

нашёл http://codemirror.net/demo/activeline.html