Dindent (alias "HTML embellisseur") indentera le HTML pour le développement et les tests. Dédié à ceux qui souffrent de la lecture d'un balisage produit par un moteur de modèles.
Dindent ne nettoiera ni ne manipulera votre sortie au-delà de l'indentation.
Si vous souhaitez supprimer le code malveillant ou vous assurer que votre document est conforme aux normes, envisagez les alternatives suivantes :
Si vous avez besoin d'indenter votre code dans l'environnement de développement, sachez que les bibliothèques mentionnées précédemment tenteront de corriger votre balisage (c'est leur objectif principal ; l'indentation est un sous-produit).
Il existe une bonne raison de ne pas utiliser d’expressions régulières pour analyser le HTML. Cependant, l'analyseur DOM reconstruira l'intégralité du document HTML. Il ajoutera des balises manquantes, fermera les balises de bloc ouvertes ou supprimera tout ce qui n'est pas un code HTML valide. C'est ce que fait Tidy, DOM, etc. Ce comportement n'est pas souhaitable lors du débogage de la sortie HTML. L'analyseur basé sur Regex ne reconstruira pas le document. Dindent ajoutera uniquement une indentation, sans affecter autrement le balisage.
Ce qui précède est également la raison pour laquelle Chrome DevTools ne remplace pas directement Dindent.
$ indenter = new Gajus Dindent Indenter ();
$ indenter -> indent ( ' [..] ' ); Dans l'exemple ci-dessus, [..] est un espace réservé pour :
<!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 le convertira en :
<!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 > Le constructeur Indenter accepte les options suivantes qui contrôlent l’indentation :
| Nom | Description |
|---|---|
indentation_character | Caractère(s) utilisé(s) pour l'indentation. La valeur par défaut est 4 caractères d'espacement. |
Les éléments HTML sont soit des éléments « en ligne », soit des éléments « au niveau bloc ».
Un élément en ligne occupe uniquement l'espace délimité par les balises qui définissent l'élément en ligne. L'exemple suivant montre l'influence de l'élément inline :
< p > This is an < span > inline </ span > element within a block element. </ p >Un élément de niveau bloc occupe tout l'espace de son élément parent (conteneur), créant ainsi un « bloc ». Les navigateurs affichent généralement l'élément au niveau du bloc avec une nouvelle ligne avant et après l'élément. L'exemple suivant montre l'influence de l'élément de niveau bloc :
< div >
< p > This is a block element within a block element. </ p >
</ div >Dindent identifie les éléments suivants comme « en ligne » :
Il s'agit d'un sous-ensemble des éléments en ligne définis dans le MDN.
Tous les autres éléments sont traités comme des blocs.
Vous pouvez définir le type d'élément sur block ou inline à l'aide de la méthode setElementType :
$ 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 peut être utilisé via le script CLI ./bin/dindent.php .
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.La méthode recommandée pour utiliser Dindent consiste à utiliser Composer.
{
"require" : {
"gajus/dindent" : " 2.0.* "
}
}
