在代码编辑器中的网页上缩进代码？

Question

是否可以按照在代码编辑器中完成的方式将缩进代码包装在网页上？请参阅下面的屏幕截图比较，以便更好地理解我的意思：

网页上的

pre-wrap：

在代码编辑器中包装缩进行：

我所暗示的是，即使在包装后，缩进的行也会保持缩进。这似乎不会发生在网页上。有没有这样做的CSS属性？ （JavaScript也可以。）

注意：我不是在谈论代码突出显示。这是关于包裹线的缩进。

---

如果这很重要 - 这就是我在网页上显示代码块的方式：

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

} else {
  return false;
}
</code></pre>

... white-space: pre-wrap;样式应用于pre代码。

Answer 1

算法

1. 获取元素的内容，并生成所有行的列表。
2. 使用元素测量空格字符的宽度。
3. 创建document fragment（以获得最佳效果！）。
4. 遍历所有行。对于每一行：
   • 计算前面空格的数量。
   • 创建块级元素（例如<div>）。
   • 将marginLeft（或paddingLeft，如果您愿意）属性设置为单个空格大小和前缀空格数的乘积。
   • 追加该行的内容（左侧修剪）。
5. 用片段替换实际元素的内容。

代码（演示：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);
}

浏览器兼容性

• IE8 +（IE7-不支持white-space:pre-wrap）
• Chrome 1 +
• Firefox 3 +
• Safari 3 +
• Opera 9+（以前版本未经测试）

备注

• 在此示例中，我计算了空格（U + 0020）字符的宽度。如果要为其他空白字符计算不同的值，则使用类似的方法。
• 上一个注释的后续行动：要考虑选项卡，您必须采用硬路线，这会降低性能。对于每一行，将哑元的内容（附加到code_elem！）设置为带前缀的空格，然后使用.offsetWidth计算宽度。
  每次都会渲染元素。对于数百行，此方法可能会导致CPU使用率激增。不要使用标签来显示网页中的代码！
• autoindent函数假定元素的内容为纯文本。