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.* "
}
}
