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 >Dindent 将以下元素标识为“内联”：
这是 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.* "
}
}
