So behalten Sie den Leerraumeindruck von Text bei, der in HTML & lt; pre & gt; Tags mit Ausnahme der aktuellen Einrückungsebene von & lt; pre & gt; Tag im Dokument?

PRE soll preserve whitespace-genau so, wie es scheint, (es sei denn, geändert durch white-space im CSS, das nicht genügend Flexibilität zur Unterstützung der Formatierung von code).

Vor

Formatierung erhalten bleibt, aber so ist alles in die Einkerbung außerhalb der PRE tag. Es wäre schön, Leerzeichen Erhaltung, verwendet der Ortsbezug als Ausgangspunkt.

Nach

Inhalt noch formatiert erklärt, aber das überflüssige führende Leerzeichen, verursacht durch die position der PRE - tag innerhalb des Dokuments werden entfernt.

Ich habe mit dem folgenden plugin, um das Problem lösen zu wollen, entfernen Sie überflüssige Leerzeichen, verursacht durch die Einrückung die Gliederung des Dokuments. Dieser code verwendet die erste Zeile innerhalb des PRE-Tags, um zu bestimmen, wie viel es wurde eingerückt rein durch den Einzug des Dokuments.

Dieser code funktioniert im IE7, IE8, IE9, Firefox, und Chrome. Ich habe es getestet, kurz mit dem Prettify Bibliothek zum kombinieren der erhaltenen Formatierung mit ziemlich Druck. Stellen Sie sicher, dass die erste Zeile innerhalb der PRE tatsächlich repräsentiert das Basisniveau Einrücken, die Sie ignorieren möchten (oder können Sie das plugin intelligenter).

Das ist die Ungefähre code. Wenn Sie einen Fehler oder es funktioniert nicht so, wie Sie wollen, bitte korrigieren/kommentieren; nicht nur downvote. Ich schrieb diesen code um ein problem zu beheben, die ich hatte, und ich bin aktiv mit, so dass ich möchte, dass es so fest wie möglich!

/*!
*** 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 );

Dieses plugin kann dann angewendet werden, mit einem standard-jQuery-Selektor:

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

InformationsquelleAutor der Antwort Tim Medora

Fand ich auch, dass wenn Sie mit haml können Sie die preserve Methode. Zum Beispiel:

preserve yield

Diese beibehalten wird, das Leerzeichen in der erzeugten yield ist in der Regel markdown mit dem code-Blöcke.

InformationsquelleAutor der Antwort Michael Barton

Wenn Sie diese auf einem code-block, wie:

<pre>
  <code>
    ...
  </code>
</pre>

Können Sie einfach css verwenden, wie dies zu verrechnen, die große Menge der weißen Raum in der front.

pre code {
  position: relative;
  left: -95px; //or whatever you want
}

InformationsquelleAutor der Antwort Skäggiga Mannen