How to preformat inside textarea

javascript html textarea pre
jmnwong picture jmnwong · Mar 19, 2012 · Viewed 14.5k times · Source

I was wondering if it were possible to preformat text that is inside a textarea. Right now I have a textarea code that I want to add syntax highlighting and also add linenumbers so I am trying to wrap the text inside a pre tag. Is this correct or should I be doing something completely different?

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

Answer

Jared Farrish picture Jared Farrish · Mar 19, 2012

textareas are not able to render content like you're wanting to do, they only display text. I would suggest an in-browser code editor. A good one is CodeMirror, which is fairly easy to use:

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
});

And CodeMirror insert an editable block with that content within the new editor.

There are other options. Wikipedia has a comparison of Javascript-based source code editors entry.

Related questions

Creating a textarea with auto-resize

There was another thread about this, which I've tried. But there is one problem: the textarea doesn't shrink if you delete the content. I can't find any way to shrink it to the correct size - the clientHeight value comes …

Read More
How to add line breaks to an HTML textarea?

I’m editing a <textarea> with JavaScript. The problem is that when I make line breaks in it, they won’t display. How can I do this? I’m getting the value to write a function, but it …

Read More
Rendering HTML inside textarea

I need to be able to render some HTML tags inside a textarea (namely <strong>, <i>, <u>, <a>) but textareas only interpret their content as text. Is there an easy way of …

Read More