7

是否可以像在代码编辑器中那样在网页上包装缩进代码？请参阅下面的屏幕截图比较以更好地理解我的意思：

pre-wrap在网页上：

截图 1

在代码编辑器中换行缩进：

截图 2

我的意思是缩进线即使在换行后也保持缩进。这似乎不会发生在网页上。是否有一个 CSS 属性可以做到这一点？（JavaScript 也可以。）

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

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

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

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

...并且white-space: pre-wrap;样式应用于pre标签。

4

1 回答 1

6

算法

  1. 获取元素的内容，并生成所有行的列表。
  2. 使用该元素测量空格字符的宽度。
  3. 创建一个文档片段（以获得最佳性能！）。
  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）
  • 铬 1+
  • 火狐 3+
  • 野生动物园 3+
  • Opera 9+（以前的版本未经测试）

笔记

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