Dindent (alias, "HTML beautifier") akan membuat indentasi HTML untuk pengembangan dan pengujian. Didedikasikan bagi mereka yang menderita karena membaca markup yang dihasilkan mesin template.
Dindent tidak akan membersihkan atau memanipulasi keluaran Anda melebihi lekukan.
Jika Anda ingin menghapus kode berbahaya atau memastikan dokumen Anda mematuhi standar, pertimbangkan alternatif berikut:
Jika Anda perlu membuat indentasi kode di lingkungan pengembangan, berhati-hatilah karena pustaka yang disebutkan sebelumnya akan mencoba memperbaiki markup Anda (itulah tujuan utamanya; indentasi adalah produk sampingan).
Ada alasan bagus untuk tidak menggunakan ekspresi reguler untuk mengurai HTML. Namun, parser DOM akan membangun kembali seluruh dokumen HTML. Ini akan menambahkan tag yang hilang, menutup tag blok yang terbuka, atau menghapus apa pun yang bukan HTML yang valid. Inilah yang dilakukan Tidy, DOM, dll. Perilaku ini tidak diinginkan saat men-debug keluaran HTML. Parser berbasis regex tidak akan membangun kembali dokumen. Dindent hanya akan menambahkan indentasi, tanpa mempengaruhi markup.
Hal di atas juga menjadi alasan mengapa Chrome DevTools bukan pengganti langsung Dindent.
$ indenter = new Gajus Dindent Indenter ();
$ indenter -> indent ( ' [..] ' ); Dalam contoh di atas, [..] adalah pengganti untuk:
<!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 akan mengubahnya menjadi:
<!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 > Konstruktor Indenter menerima opsi berikut yang mengontrol indentasi:
| Nama | Keterangan |
|---|---|
indentation_character | Karakter yang digunakan untuk indentasi. Defaultnya adalah 4 karakter spasi. |
Elemen HTML bisa berupa elemen "sebaris" atau elemen "tingkat blok".
Elemen inline hanya menempati ruang yang dibatasi oleh tag yang mendefinisikan elemen inline. Contoh berikut menunjukkan pengaruh elemen inline:
< p > This is an < span > inline </ span > element within a block element. </ p >Elemen tingkat blok menempati seluruh ruang elemen induknya (wadah), sehingga menciptakan "blok". Browser biasanya menampilkan elemen tingkat blok dengan baris baru sebelum dan sesudah elemen. Contoh berikut menunjukkan pengaruh elemen tingkat blok:
< div >
< p > This is a block element within a block element. </ p >
</ div >Dindent mengidentifikasi elemen berikut sebagai "inline":
Ini adalah subset dari elemen sebaris yang ditentukan di MDN.
Semua elemen lainnya diperlakukan sebagai blok.
Anda dapat mengatur tipe elemen menjadi blok atau inline menggunakan metode 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 dapat digunakan melalui skrip 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.Cara yang disarankan untuk menggunakan Dindent adalah melalui Composer.
{
"require" : {
"gajus/dindent" : " 2.0.* "
}
}
