Простой способ подсветки синтаксиса textarea (начинающим)
Искал в сети способы подсветки текста в textarea, но нашёл огромные скрипты, просто жуть.
Вот только что закончил свой алгоритм. Работает в Opera и Chrome, в IE и FF - с визуальными глюками, но работает. Надеюсь, скрипт будет полезен;) <html><head> <title>Syntax highlighting</title> <style> textarea#lines { border-top: thin inset; border-left: thin inset; border-right: none; border-bottom: thin inset; margin-right: 0px; text-align: right; background: whitesmoke; color: black; overflow: hidden; } textarea#text { position: absolute; border-top: thin inset; border-left: none; border-right: thin inset; border-bottom: thin inset; margin-left: 0px; text-align: left; background: transparent; color: black; outline: none; } textarea#mark1 { position: absolute; border-top: thin inset; border-left: none; border-right: thin inset; border-bottom: thin inset; margin-left: 0px; text-align: left; background: white; color: cyan; outline: none; overflow: hidden; } textarea#mark2 { position: absolute; border-top: thin inset; border-left: none; border-right: thin inset; border-bottom: thin inset; margin-left: 0px; text-align: left; background: transparent; color: green; outline: none; overflow: hidden; } </style> <script> var words = [ "true" ,"false" ,"return" ,"if" ,"else" ,"switch" ,"case" ,"break" ,"continue" ,"while" ,"for" ,"void" ,"long" ,"double" ,"do " ]; function dgebi(id) { return document.getElementById(id); } function LiveEdit(textArea, textLine, textMark, textError) { var syntaxMarker = unescape("%u2588%u2588%u2588%u2588%u2588%u2588%u2588%u2588"); var commentaries = " "; var textStrings = textArea.value.split(/\r?\n/); // Разбиваем текст на массив строк var textRows = textStrings.length; // и вычисляем их количество var textLines = textLine.value.split(/\r?\n/); // Теперь нужно разбить список строк var textLength = textLines.length; // и вычислить его длину if(textLength != textRows) { // Стоит ли обновить колонку строк? if(textLength > textRows) // Удалить лишние номера строк? textLines.splice(textRows, textLength - textRows); while(textLength ++ < textRows) // Или же нужно добавить ещё textLines.push(textLength); // несколько номеров textLine.value = textLines.join("\r\n"); // Обновляем содержимое колонки } var textSyntax = new Array(); // Переходим к подсветке синтаксиса var textMarking = new Array(); for(var i in textStrings) { // Пробежим по всему тексту textMarking[i] = textStrings[i]; // Читаем очередную строк текста for(var j in words) { // Все зарезервированные слова окрасить textMarking[i] = textMarking[i].replace(new RegExp(words[j], "g"), syntaxMarker.substr(0, words[j].length)) } } textMark.value = textMarking.join("\r\n"); var textMarking = new Array(); for(var i in textStrings) { // Пробежим по всему тексту var text = textStrings[i]; var pos = text.indexOf("//"); if(pos >= 0) textMarking[i] = commentaries.substr(0, pos) + text.substr(pos); } textError.value = textMarking.join("\r\n"); textError.scrollTop = textMark.scrollTop = textLine.scrollTop = textArea.scrollTop; } function Init() { dgebi("text").focus(); } </script> <body onload="Init()"> <textarea id="lines" readonly cols="5" rows="25" >1</textarea><textarea id="mark1" readonly cols="80" rows="25" ></textarea><textarea id="text" cols="80" rows="25" onkeyup='dgebi("mark2").style.visibility="visible"; LiveEdit(this, dgebi("lines"), dgebi("mark1"), dgebi("mark2"))' onmouseover='dgebi("mark1").style.visibility="hidden"' onmouseout='dgebi("mark1").style.visibility="visible"; dgebi("mark2").style.visibility="visible"' >void DrawLine(HDC hdc, long x1, long y1, long x2, long y2, long color) { long dx = x2 - x1; // Delta by x long dy = y2 - y1; // Delta by y long len = abs(abs(dx) > abs(dy) ? dx : dy); // Length - maximal delta double x = (double)x1 + 0.5f; double y = (double)y1 + 0.5f; double xd = (double)dx / (double)len; // Float dalta by x double yd = (double)dy / (double)len; // Float delta by y while(len --) { // Build all points SetPixel(hdc, (long)x, (long)y, color); // on the context x += xd; // Next x y += yd; // Next y } }</textarea><textarea id="mark2" readonly cols="80" rows="25" onfocus='dgebi("text").focus()' onmouseover='this.style.visibility="hidden"' ></textarea> </body> |
Спасибо тебе мужик!
Зарегистрировался что бы сказать спасибо, мужик ты гений!
Спасибо! |
Часовой пояс GMT +3, время: 17:31. |