Искал в сети способы подсветки текста в 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>