Dindent (também conhecido como "embelezador de HTML") recuará o HTML para desenvolvimento e teste. Dedicado para quem sofre com a leitura de marcações produzidas por um mecanismo de template.
A Dindent não irá higienizar ou manipular sua saída além do recuo.
Se você deseja remover códigos maliciosos ou garantir que seu documento esteja em conformidade com os padrões, considere as seguintes alternativas:
Se você precisar recuar seu código no ambiente de desenvolvimento, tome cuidado, pois as bibliotecas mencionadas anteriormente tentarão corrigir sua marcação (esse é o objetivo principal; o recuo é um subproduto).
Há um bom motivo para não usar expressões regulares para analisar HTML. No entanto, o analisador DOM reconstruirá todo o documento HTML. Ele adicionará tags ausentes, fechará tags de blocos abertos ou removerá qualquer coisa que não seja um HTML válido. Isso é o que o Tidy faz, DOM, etc. Esse comportamento é indesejável ao depurar a saída HTML. O analisador baseado em Regex não reconstruirá o documento. Dindent apenas adicionará recuo, sem afetar a marcação.
O motivo acima também é o motivo pelo qual o Chrome DevTools não é um substituto direto do Dindent.
$ indenter = new Gajus Dindent Indenter ();
$ indenter -> indent ( ' [..] ' ); No exemplo acima, [..] é um espaço reservado 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 irá convertê-lo 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 > O construtor Indenter aceita as seguintes opções que controlam o recuo:
| Nome | Descrição |
|---|---|
indentation_character | Caractere(s) usado(s) para recuo. O padrão é 4 caracteres de espaço em branco. |
Os elementos HTML são elementos "inline" ou elementos "em nível de bloco".
Um elemento embutido ocupa apenas o espaço delimitado pelas tags que definem o elemento embutido. O exemplo a seguir demonstra a influência do elemento inline:
< p > This is an < span > inline </ span > element within a block element. </ p >Um elemento de nível de bloco ocupa todo o espaço de seu elemento pai (contêiner), criando assim um “bloco”. Os navegadores normalmente exibem o elemento no nível do bloco com uma nova linha antes e depois do elemento. O exemplo a seguir demonstra a influência do elemento no nível do bloco:
< div >
< p > This is a block element within a block element. </ p >
</ div >A Dindent identifica os seguintes elementos como "inline":
Este é um subconjunto dos elementos embutidos definidos no MDN.
Todos os outros elementos são tratados como bloco.
Você pode definir o tipo de elemento como bloco ou embutido usando o 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 pode ser usado através do 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.A forma recomendada de usar o Dindent é através do Composer.
{
"require" : {
"gajus/dindent" : " 2.0.* "
}
}
