Dindent (auch bekannt als „HTML-Verschönerer“) rückt HTML für Entwicklung und Tests ein. Gedacht für diejenigen, die unter dem Lesen eines von einer Template-Engine erstellten Markups leiden.
Dindent wird Ihre Ausgabe über die Einrückung hinaus nicht bereinigen oder anderweitig manipulieren.
Wenn Sie schädlichen Code entfernen oder sicherstellen möchten, dass Ihr Dokument den Standards entspricht, ziehen Sie die folgenden Alternativen in Betracht:
Wenn Sie Ihren Code in der Entwicklungsumgebung einrücken müssen, beachten Sie, dass die oben genannten Bibliotheken versuchen werden, Ihr Markup zu korrigieren (das ist ihr Hauptzweck; Einrückung ist ein Nebenprodukt).
Es gibt einen guten Grund, reguläre Ausdrücke nicht zum Parsen von HTML zu verwenden. Der DOM-Parser erstellt jedoch das gesamte HTML-Dokument neu. Es fügt fehlende Tags hinzu, schließt offene Block-Tags oder entfernt alles, was kein gültiger HTML-Code ist. Dies ist, was Tidy tut, DOM usw. Dieses Verhalten ist beim Debuggen der HTML-Ausgabe unerwünscht. Der auf Regex basierende Parser erstellt das Dokument nicht neu. Dindent fügt nur Einrückungen hinzu, ohne das Markup anderweitig zu beeinflussen.
Dies ist auch der Grund, warum Chrome DevTools kein direkter Ersatz für Dindent ist.
$ indenter = new Gajus Dindent Indenter ();
$ indenter -> indent ( ' [..] ' ); Im obigen Beispiel ist [..] ein Platzhalter für:
<!DOCTYPE html >
< html >
< head > </ head >
< body >
< script >
console . log ( 'te> <st' ) ;
function ( ) {
test ; < ! -- < a > -- >
}
</ script >
< div >
< script src =" //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js " > </ script >
< div > < table border =" 1 " style =" background-color: red; " > < tr > < td > A cell test! </ td >
< td colspan =" 2 " rowspan =" 2 " > < table border =" 1 " style =" background-color: green; " > < tr > < td > Cell </ td > < td colspan =" 2 " rowspan =" 2 " > </ td > </ tr > < tr >
< td > < input > < input > < input > </ td > </ tr > < tr > < td > Cell </ td > < td > Cell </ td > < td > Ce
ll </ td > </ tr > </ table > </ td > </ tr > < tr > < td > Test < span > Ce ll </ span > </ td > </ tr > < tr > < td > Cell </ td > < td > Cell </ td > < td > Cell </ td > </ tr > </ table > </ div > </ div >
</ body >
</ html >Dindent wird es umwandeln in:
<!DOCTYPE html >
< html >
< head > </ head >
< body >
< script >
console . log ( 'te> <st' ) ;
function ( ) {
test ; < ! -- < a > -- >
}
</ script >
< div >
< script src =" //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js " > </ script >
< div >
< table border =" 1 " style =" background-color: red; " >
< tr >
< td > A cell test! </ td >
< td colspan =" 2 " rowspan =" 2 " >
< table border =" 1 " style =" background-color: green; " >
< tr >
< td > Cell </ td >
< td colspan =" 2 " rowspan =" 2 " > </ td >
</ tr >
< tr >
< td >
< input >
< input >
< input >
</ td >
</ tr >
< tr >
< td > Cell </ td >
< td > Cell </ td >
< td > Ce ll </ td >
</ tr >
</ table >
</ td >
</ tr >
< tr >
< td > Test < span > Ce ll </ span > </ td >
</ tr >
< tr >
< td > Cell </ td >
< td > Cell </ td >
< td > Cell </ td >
</ tr >
</ table >
</ div >
</ div >
</ body >
</ html > Indenter akzeptiert die folgenden Optionen, die die Einrückung steuern:
| Name | Beschreibung |
|---|---|
indentation_character | Zeichen, die zum Einrücken verwendet werden. Der Standardwert beträgt 4 Leerzeichen. |
HTML-Elemente sind entweder „Inline“-Elemente oder „Block-Level“-Elemente.
Ein Inline-Element nimmt nur den Raum ein, der durch die Tags begrenzt wird, die das Inline-Element definieren. Das folgende Beispiel demonstriert den Einfluss des Inline-Elements:
< p > This is an < span > inline </ span > element within a block element. </ p >Ein Element auf Blockebene nimmt den gesamten Raum seines übergeordneten Elements (Containers) ein und erstellt so einen „Block“. Browser zeigen das Element auf Blockebene normalerweise mit einer neuen Zeile sowohl vor als auch nach dem Element an. Das folgende Beispiel demonstriert den Einfluss des Elements auf Blockebene:
< div >
< p > This is a block element within a block element. </ p >
</ div >Dindent identifiziert die folgenden Elemente als „inline“:
Dies ist eine Teilmenge der im MDN definierten Inline-Elemente.
Alle anderen Elemente werden als Block behandelt.
Mit der setElementType -Methode können Sie den Elementtyp entweder auf Block oder Inline festlegen:
$ indenter = new Gajus Dindent Indenter ();
/**
* @param string $element_name Element name, e.g. "b".
* @param ELEMENT_TYPE_BLOCK|ELEMENT_TYPE_INLINE $type
* @return null
*/
$ indenter -> setElementType ( ' foo ' , Gajus Dindent Indenter :: ELEMENT_TYPE_BLOCK );
$ indenter -> setElementType ( ' bar ' , Gajus Dindent Indenter :: ELEMENT_TYPE_INLINE ); Dindent kann über das CLI-Skript ./bin/dindent.php verwendet werden.
php ./bin/dindent.php
Indent HTML.
Options:
--input=./input_file.html
Input file
--indentation_character= " "
Character(s) used for indentation. Defaults to 4 whitespace characters.
--inline
A list of comma separated " inline " element names.
--block
A list of comma separated " block " element names.
Examples:
./dindent.php --input= " ./input.html "
Indent " input.html " file and print the output to STDOUT.
./dindent.php --input= " ./input.html " | tee ./output.html
Indent " input.html " file and dump the output to " output.html " .
./dindent.php --input= " ./input.html " --indentation_character= " t "
Indent " input.html " file using tab to indent the markup.
./dindent.php --input= " ./input.html " --inline= " div,p "
Indent " input.html " file treating < div > and < p > elements as inline.
./dindent.php --input= " ./input.html " --block= " span,em "
Indent " input.html " file treating < span > and < em > elements as block.Die empfohlene Verwendung von Dindent erfolgt über Composer.
{
"require" : {
"gajus/dindent" : " 2.0.* "
}
}
