Indent code on a web page, such as a code editor?

Question

Is it possible to cut off delayed code on a web page in the same way as in the code editor? See the screenshot below for a better understanding of what I mean:

pre-wrap on the Web page:

Indented line wrapping in code editor:

What I mean is that line indents support indentation even after packaging. This does not seem to happen on web pages. Is there a CSS property that does this? (JavaScript will be fine too.)

NOTE. I am not talking about dedicated code. This is about embedding wrapped lines.

---

If that matters, this is how I show code blocks on my web pages:

 <pre><code>if ( is_page() && $post->post_parent ) { return $post->post_parent; } else { return false; } </code></pre> 

... and white-space: pre-wrap; style white-space: pre-wrap; applies to the pre tag.

Answer 1

Algorithm

• Get the contents of an element and create a list of all rows.
• Use this element to measure the width of the space character.
• Create a document fragment (for optimal performance!).
• Scroll through all the lines. For each row:
  • Count the number of spaces preceding a space.
  • Create a block level element (for example, <div> ).
  • Set the marginLeft property (or paddingLeft , if you want) for the product, the size of one space and the number of prefix spaces.
  • Add the contents of the string (trimmed to the left).
• Replace the contents of the actual element with the fragment.

Code (demo: http://jsfiddle.net/YPnhX/ ):

 /** * Auto-indent overflowing lines * @author Rob W http://stackoverflow.com/u/938089 * @param code_elem HTMLCodeElement (or any element containing *plain text*) */ function autoindent(code_elem) { // Grab the lines var textContent = document.textContent === null ? 'textContent' : 'innerText'; var lines = code_elem[textContent].split(/\r?\n/), fragment = document.createDocumentFragment(), dummy, space_width, i, prefix_len, line_elem; // Calculate the width of white space // Assume that inline element inherit styles from parent (<code>) dummy = document.createElement('span'); code_elem.appendChild(dummy); // offsetWidth includes padding and border, explicitly override the style: dummy.style.cssText = 'border:0;padding:0;'; dummy[textContent] = ' '; space_width = dummy.offsetWidth; // Wipe contents code_elem.innerHTML = ''; for (i=0; i<lines.length; i++) { // NOTE: All preceeding white space (including tabs is included) prefix_len = /^\s*/.exec(lines[i])[0].length; line_elem = fragment.appendChild(document.createElement('div')); line_elem.style.marginLeft = space_width * prefix_len + 'px'; line_elem[textContent] = lines[i].substring(prefix_len); } // Finally, append (all elements inside) the fragment: code_elem.appendChild(fragment); } 

Browser compatible

• IE8 + (IE7- does not support white-space:pre-wrap )
• Chrome 1+
• Firefox 3+
• Safari 3+
• Opera 9+ (previous versions not verified)

Notes

• In this example, I calculated the space width (U + 0020). A similar method is used if you want to calculate different values ​​for other space characters.
• Subsequent observation of the previous note: to account for tabs, you need to go through a hard route, which degrades performance. For each line, set the contents of the dummy (added to code_elem !) To a prefix space, then calculate the width using .offsetWidth .
  Each time, an element is visualized. For hundreds of lines, this method can cause a surge in CPU usage. Never use tabs to display code on a web page!
• Function autoindent suggests that the contents of plain text element.