Implementing uneditable line numbers into set of pre tags

Question

I want a group of editable pre tags, each one representing a line of text. The line should start off with the line number (uneditable) then be editable after that. If I do <span contentEditable="false">1 </span><pre contentEditable="true"></pre> then the span is uneditable and the pre is editable, but the pre is on the next line.

If I change it so the span is within the pre (<pre contentEditable="true"><span contentEditable="false">1 </span></pre>) then the entire thing is editable, and the 1 shows up in the middle of the line with weird tabs indenting it.

How can I get line numbers at the beginning of the pre line?

Answer 1

Simple code editor, without javascript.

http://jsfiddle.net/oswaldoacauan/tpY4Y/