8

我想知道是否可以预先格式化文本区域内的文本。现在我有一个 textarea 代码，我想添加语法突出显示并添加行号，所以我试图将文本包装在 pre 标记内。这是正确的还是我应该做一些完全不同的事情？

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

3 回答 3

3

textareas 无法像您想要的那样呈现内容，它们只显示文本。我建议使用浏览器内代码编辑器。一个很好的是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 的源代码编辑器条目的比较。

于 2012-03-19T00:29:55.973 回答
1

让 Pre 标记包含文本区域在 Chrome 中有效

于 2015-08-04T17:44:45.783 回答
0

元素内容在实现中textarea被视为预先格式化，但默认情况下，如果一行比cols属性指定的长，浏览器会自动换行。可以使用非标准但广泛支持的属性禁用包装wrap=off。

但是，textarea 元素不足以仅仅显示内容。它也不适合设置具有格式化功能的输入编辑器，因为里面的所有标记textarea都是按字面意思理解的。

于 2012-03-19T06:11:02.083 回答