Как предварительно отформатировать внутри textarea - PullRequest
Новая
       4

Как предварительно отформатировать внутри textarea

5 голосов
/ 19 марта 2012

Мне было интересно, можно ли предварительно отформатировать текст внутри текстовой области. Прямо сейчас у меня есть код textarea, в который я хочу добавить подсветку синтаксиса, а также добавить числа белья, поэтому я пытаюсь обернуть текст внутри предварительного тега. Это правильно или я должен делать что-то совершенно другое? 

<code><textarea id="conversation" class="codebox" style="font-family:courier;">
<pre class="brush: js;">//  Start typing...

Ответы [ 3 ]

3 голосов
/ 19 марта 2012

textarea s не могут отображать содержимое так, как вы хотите, они только отображают текст.Я хотел бы предложить редактор кода в браузере.Хорошим является CodeMirror , который довольно прост в использовании:

HTML 

<textarea id="code" name="code">
// Demo code (the actual new parser character stream implementation)

function StringStream(string) {
  this.pos = 0;
  this.string = string;
}
...
</textarea>

Javascript 

var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
    lineNumbers: true,
    matchBrackets: true
});

И CodeMirror вставляет редактируемый блок с этим содержимым в новый редактор.

Существуют и другие варианты.В Википедии есть сравнение редакторов исходного кода на основе Javascript entry .

1 голос
/ 04 августа 2015

Наличие тега Pre содержит текстовую область в Chrome

0 голосов
/ 19 марта 2012

Содержимое элемента textarea обрабатывается как предварительно отформатированное в реализациях, хотя в браузерах по умолчанию строка переносит текст, если строка длиннее, чем указано атрибутом cols. Обертывание можно отключить с помощью нестандартного, но широко поддерживаемого атрибута wrap=off.

Однако элемент textarea не подходит для простого отображения контента. Он также не подходит для настройки редактора ввода с функциями форматирования, поскольку вся разметка внутри textarea воспринимается буквально.

...