Displaying raw text in HTML like a text editor

Question

I have a UTF8 text string that I would like displayed in a div (or the entire <body>) in a web page according to the following rules:

All characters should be shown literally as they would in a unicode-aware text editor.
Whitespace should not be ignored. TABs should indent to some number of spaces (4 or 8 for example). LFs should cause a line break.
Text should be automatically word wrapped (as it would for a normal <p> paragraph, or as it would in a text editor with word wrap turned on) as the width of the containing div of the text file changes.

Clearly I need to perform some preprocessing steps on the text string before I insert it into the web page (perhaps I need to replace certain characters with named entities &foo;. Perhaps I need to surround the text file with a certain tag, <pre> for example, etc).

Precisely what preprocessing steps do I need to perform to achieve the above. If there are multiple sets of steps that achieve the above, than please answer with the shortest/simplest.

score 4 · Accepted Answer · answered Mar 21 '12 at 19:13

(1) and (3) are actually quite simple, if you serve your document as UTF-8 and you're fine with supporting IE >= 8. Then it's:

<body style="white-space: pre-wrap">
  (Your String here, '<' and '&' encoded to '&lt;' and '&amp;' respectively)
</body>

The white-space CSS property is the key here.

For (2) you will either need a pre-processing step (a la s/\t/ /g) or wait until all browsers support tab-size.

score 2 · Answer 2 · edited Jun 20 '20 at 09:12

A super-simple way of doing this without any preprocessing is to wrap it in a <textarea>.

HTML:

<textarea readonly class="code">
 <!DOCTYPE html>
   <html>
     <head>
       <meta charset=utf-8 />
       <title>My Code</title>
     </head>
     <body>
       My Content
     </body>
   </html>
</textarea>

CSS:

 .code {
    border:1px solid;
    width:500px;
    height:200px;
    overflow:auto;
    outline:none;
    resize:none;
  }

However, this is somewhat un-semantic as the textarea is for editing. If you don't care, though, it's a good solution - otherwise, I recommend Boldewyn's answer

http://jsbin.com/oxifek/edit#html,live

Displaying raw text in HTML like a text editor

2 Answers2

HTML:

CSS:

Linked