Dindent (он же «украшение HTML») будет делать отступы в HTML для разработки и тестирования. Посвящается тем, кто страдает от чтения разметки, созданной шаблонизатором.
Dindent не будет очищать или иным образом манипулировать вашим выводом, помимо отступов.
Если вы хотите удалить вредоносный код или убедиться, что ваш документ соответствует стандартам, рассмотрите следующие альтернативы:
Если вам необходимо сделать отступы для вашего кода в среде разработки, будьте осторожны: ранее упомянутые библиотеки попытаются исправить вашу разметку (это их основная цель; отступы — побочный продукт).
Есть веская причина не использовать регулярные выражения для анализа HTML. Однако парсер DOM перестроит весь HTML-документ. Он добавит недостающие теги, закроет теги открытых блоков или удалит все, что не является допустимым HTML. Это то, что делает Tidy, DOM и т. д. Такое поведение нежелательно при отладке вывода HTML. Анализатор на основе регулярных выражений не будет перестраивать документ. Dindent только добавит отступы, не влияя иным образом на разметку.
Вышеуказанное также является причиной того, что Chrome DevTools не является прямой заменой Dindent.
$ indenter = new Gajus Dindent Indenter ();
$ indenter -> indent ( ' [..] ' ); В приведенном выше примере [..] является заполнителем для:
<!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 преобразует его в:
<!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 принимает следующие параметры, управляющие отступом:
| Имя | Описание |
|---|---|
indentation_character | Символ(ы), используемые для отступа. По умолчанию — 4 пробельных символа. |
Элементы HTML являются либо «встроенными» элементами, либо элементами «блочного уровня».
Встроенный элемент занимает только пространство, ограниченное тегами, определяющими встроенный элемент. Следующий пример демонстрирует влияние встроенного элемента:
< p > This is an < span > inline </ span > element within a block element. </ p >Элемент блочного уровня занимает все пространство своего родительского элемента (контейнера), тем самым создавая «блок». Браузеры обычно отображают элемент уровня блока с новой строкой как до, так и после элемента. Следующий пример демонстрирует влияние элемента уровня блока:
< div >
< p > This is a block element within a block element. </ p >
</ div >Диндент идентифицирует следующие элементы как «встроенные»:
Это подмножество встроенных элементов, определенных в MDN.
Все остальные элементы рассматриваются как блоки.
Вы можете установить тип элемента как блочный, так и встроенный, используя метод 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 можно использовать через скрипт 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.Рекомендуемый способ использования Dindent — через Composer.
{
"require" : {
"gajus/dindent" : " 2.0.* "
}
}
