Search code examples
javascripthtmltextareapre

How to preformat inside textarea

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>
Solution

  • 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.