在代码编辑器中的网页上缩进代码？ [英] Indent code on a web page like in a code editor?

问题描述

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

Is it possible to wrap indented code on a web page the way it's done in a code editor? See the screenshot comparison below to better understand what I mean:

在网页上预先包装 ：

pre-wrap on a web page:

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

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

What I am implying is that the indented lines maintain indentation even after wrapping. This doesn't seem to happen on web pages. Is there a CSS property that does this? (JavaScript would be fine too.)

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

NOTE: I am not talking about code highlighting here. It's about indentation of wrapped lines.

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

If this matters — this is how I am showing code blocks on my web pages:

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

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

...和白色空间：预包装; 样式适用于 pre 标记。

...and the white-space: pre-wrap; style is applied on pre tag.

推荐答案

算法

Algorithm

1. 获取元素的内容，并生成所有行的列表。


2. 使用测量空格字符宽度的元素。


3. 创建文档片段（为了获得最佳性能！）。


4. 遍历所有行。对于每一行：
   
   
   
   • 计算前面空格的数量。
   
   
   • 创建块级元素（例如< div> ）。
   
   
   • 设置 marginLeft （或 paddingLeft ，如果你愿意的话）属性为单个空格大小的产品和前缀空格的数量。
   
   
   • 追加行的内容（左）修剪）。
   
   

1. Get the contents of the element, and generate a list of all lines.
2. Use the element to measure the width of a space character.
3. Create a document fragment (for optimal performance!).
4. Loop through all lines. For each line:
   • Count the number of preceeding white space.
   • Create a block-level element (such as <div>).
   • Set the marginLeft (or paddingLeft, if you wish) property to the product of the size of a single space and the number of prefixed spaces.
   • Append The contents of the line (left trimmed).

代码（演示： http://jsfiddle.net/YPnhX/ ）：

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);
}

浏览器兼容性

• IE8 +（IE7-不支持 空格：预先包装 ）


• Chrome 1 +


• Firefox 3 +


• Safari 3 +


• Opera 9+（以前的版本未经测试）



Browser compatibility

• IE8 + (IE7- doesn't support white-space:pre-wrap)
• Chrome 1+
• Firefox 3+
• Safari 3+
• Opera 9+ (previous versions untested)


• 在这个例子中，我计算了空格（U + 0020）字符的宽度。如果要为其他空白字符计算不同的值，则使用类似的方法。


• 上一个注释的后续跟踪：要考虑选项卡，您必须采用硬路由，这会降低性能。对于每一行，将虚拟内容（附加到 code_elem ！）设置为前缀空白区域，然后使用 .offsetWidth计算宽度。
  
  每次都会渲染元素。对于数百行，此方法可能会导致CPU使用率激增。不要使用选项卡在网页中显示代码！


• autoindent 函数假定元素的内容为纯文本。


• In this example, I calculated the width of a space (U+0020) character. The similar method is used if you want to calculate different values for other white-space characters.
• Follow-up to the previous note: To account for tabs, you have to take a hard route, which degrades performance. For each line, set the contents of the dummy (appended to code_elem!) to the prefixed white space, then calculate the width using .offsetWidth.
  Each time, the element is rendered. For hundreds of lines, this method may cause a spike in the CPU usage. Don't ever use tabs to display code in a web page!
• The autoindent function assumes that the contents of a element is plain text.

这篇关于在代码编辑器中的网页上缩进代码？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！