Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Простой способ подсветки синтаксиса textarea (начинающим) (https://javascript.ru/forum/events/8406-prostojj-sposob-podsvetki-sintaksisa-textarea-nachinayushhim.html)

Paguo-86PK 24.03.2010 03:42

Простой способ подсветки синтаксиса 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>

anete.javascriptru 17.12.2013 21:05

Спасибо тебе мужик!
 
Зарегистрировался что бы сказать спасибо, мужик ты гений!
Спасибо!


Часовой пояс GMT +3, время: 21:06.