Dindent（又稱「HTML 美化器」）將縮排 HTML 以進行開發和測試。專門為那些因閱讀模板引擎產生的標記而苦惱的人。
除了縮排之外，Dindent 不會清理或以其他方式操縱您的輸出。
如果您希望刪除惡意程式碼或確保您的文件符合標準，請考慮以下替代方案：
如果您需要在開發環境中縮排程式碼，請注意前面提到的程式庫將嘗試修復您的標記（這是它們的主要目的；縮排是副產品）。
有充分的理由不使用正規表示式來解析 HTML。然而，DOM 解析器將重建整個 HTML 文件。它將添加缺少的標籤、關閉開啟的區塊標籤或刪除任何不是有效 HTML 的內容。這就是 Tidy、DOM 等所做的事情。基於正規表示式的解析器不會重建文件。 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.* "
}
}
