如何保留HTML标记中包含的文本的空格缩进(不包括文档中标记的当前缩进级别)?

我试图在网站上显示我的代码,但我有问题,正确保留空白缩进。

例如给出以下代码段:

<html>
 <body>
   Here is my code:
   <pre>
     def some_funtion
       return 'Hello, World!'
     end
   </pre>
 <body>
</html>

这在浏览器中显示为:

Here is my code:

     def some_funtion
       return 'Hello, World!'
     end

当我想它显示为:

Here is my code:

def some_funtion
 return 'Hello, World!'
end

区别在于,HTML前标记的当前缩进级别正被添加到代码的缩进中。我使用nanoc作为静态网站生成器,我使用google prettify也添加语法高亮。

任何人都可以提出任何建议?

最佳答案
PRE旨在保留完全符合其出现的空格(除非被CSS中的空格替换,因为CSS没有足够的灵活性来支持格式化代码)。

之前

格式化被保留,但PRE标记之外的所有缩进都被保留。这将是很高兴有空白保存使用标签的位置作为起点。

内容仍然格式化为已声明,但是删除了由PRE标记在文档中的位置导致的无关的前导空白。

我想出了以下插件来解决想要删除由文档大纲的缩进引起的多余的空白的问题。此代码使用PRE标记中的第一行来确定它由于文档缩进而缩进了多少。

此代码适用于IE7,IE8,IE9,Firefox和Chrome。我已经测试它与Prettify图书馆结合保存的格式与漂亮的打印。确保PRE中的第一行实际上代表您想要忽略的缩进的基线水平(或者,您可以修改插件更智能)。

这是粗略的代码。如果你发现错误或它不工作的方式你想要的,请修复/评论;不要只是downvote。我写了这个代码来解决一个我正在使用的问题,我积极使用它,所以我希望它尽可能的坚实!

/*!
*** prettyPre ***/

(function( $ ) {

    $.fn.prettyPre = function( method ) {

        var defaults = {
            ignoreExpression: /\s/ // what should be ignored?
        };

        var methods = {
            init: function( options ) {
                this.each( function() {
                    var context = $.extend( {}, defaults, options );
                    var $obj = $( this );
                    var usingInnerText = true;
                    var text = $obj.get( 0 ).innerText;

                    // some browsers support innerText...some don't...some ONLY work with innerText.
                    if ( typeof text == "undefined" ) {
                        text = $obj.html();
                        usingInnerText = false;
                    }

                    // use the first line as a baseline for how many unwanted leading whitespace characters are present
                    var superfluousSpaceCount = 0;
                    var currentChar = text.substring( 0, 1 );

                    while ( context.ignoreExpression.test( currentChar ) ) {
                        currentChar = text.substring( ++superfluousSpaceCount, superfluousSpaceCount + 1 );
                    }

                    // split
                    var parts = text.split( "\n" );
                    var reformattedText = "";

                    // reconstruct
                    var length = parts.length;
                    for ( var i = 0; i < length; i++ ) {
                        // cleanup, and don't append a trailing newline if we are on the last line
                        reformattedText += parts[i].substring( superfluousSpaceCount ) + ( i == length - 1 ? "" : "\n" );
                    }

                    // modify original
                    if ( usingInnerText ) {
                        $obj.get( 0 ).innerText = reformattedText;
                    }
                    else {
                        // This does not appear to execute code in any browser but the onus is on the developer to not 
                        // put raw input from a user anywhere on a page, even if it doesn't execute!
                        $obj.html( reformattedText );
                    }
                } );
            }
        }

        if ( methods[method] ) {
            return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ) );
        }
        else if ( typeof method === "object" || !method ) {
            return methods.init.apply( this, arguments );
        }
        else {
            $.error( "Method " + method + " does not exist on jQuery.prettyPre." );
        }
    }
} )( jQuery );

然后可以使用标准的jQuery选择器应用此插件:

<script>
    $( function() { $("PRE").prettyPre(); } );
</script>

转载注明原文:如何保留HTML标记中包含的文本的空格缩进(不包括文档中标记的当前缩进级别)? - 代码日志