Dindent (también conocido como "embellecedor de HTML") sangrará el HTML para su desarrollo y prueba. Dedicado a aquellos que sufren al leer una plantilla de marcado producido por el motor.
Dindent no desinfectará ni manipulará de otro modo su salida más allá de la sangría.
Si desea eliminar código malicioso o asegurarse de que su documento cumpla con los estándares, considere las siguientes alternativas:
Si necesita sangrar su código en el entorno de desarrollo, tenga en cuenta que las bibliotecas mencionadas anteriormente intentarán corregir su marcado (ese es su propósito principal; la sangría es un subproducto).
Hay una buena razón para no utilizar expresiones regulares para analizar HTML. Sin embargo, el analizador DOM reconstruirá todo el documento HTML. Agregará etiquetas faltantes, cerrará etiquetas de bloques abiertos o eliminará cualquier cosa que no sea un HTML válido. Esto es lo que hace Tidy, DOM, etc. Este comportamiento no es deseable al depurar la salida HTML. El analizador basado en expresiones regulares no reconstruirá el documento. Dindent solo agregará sangría, sin afectar el marcado.
Lo anterior es también la razón por la cual Chrome DevTools no es un reemplazo directo de Dindent.
$ indenter = new Gajus Dindent Indenter ();
$ indenter -> indent ( ' [..] ' ); En el ejemplo anterior, [..] es un marcador de posición para:
<!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 lo convertirá a:
<!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 > El constructor Indenter acepta las siguientes opciones que controlan la sangría:
| Nombre | Descripción |
|---|---|
indentation_character | Carácter(es) utilizado(s) para la sangría. El valor predeterminado es 4 caracteres de espacio en blanco. |
Los elementos HTML son elementos "en línea" o elementos "a nivel de bloque".
Un elemento en línea ocupa solo el espacio delimitado por las etiquetas que definen el elemento en línea. El siguiente ejemplo demuestra la influencia del elemento en línea:
< p > This is an < span > inline </ span > element within a block element. </ p >Un elemento a nivel de bloque ocupa todo el espacio de su elemento principal (contenedor), creando así un "bloque". Los navegadores suelen mostrar el elemento a nivel de bloque con una nueva línea antes y después del elemento. El siguiente ejemplo demuestra la influencia del elemento a nivel de bloque:
< div >
< p > This is a block element within a block element. </ p >
</ div >Dindent identifica los siguientes elementos como "en línea":
Este es un subconjunto de los elementos en línea definidos en el MDN.
Todos los demás elementos se tratan como bloques.
Puede establecer el tipo de elemento en bloque o en línea usando el método 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 se puede utilizar a través del 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 forma recomendada de utilizar Dindent es a través de Composer.
{
"require" : {
"gajus/dindent" : " 2.0.* "
}
}
