Dindent (หรือที่รู้จักในชื่อ "HTML beautifier") จะเยื้อง HTML เพื่อการพัฒนาและการทดสอบ ทุ่มเทสำหรับผู้ที่ประสบปัญหาจากการอ่านเครื่องมือสร้างเทมเพลตที่สร้างมาร์กอัป
Dindent จะไม่ฆ่าเชื้อหรือจัดการเอาต์พุตของคุณเกินกว่าการเยื้อง
หากคุณต้องการลบโค้ดที่เป็นอันตรายหรือตรวจสอบให้แน่ใจว่าเอกสารของคุณเป็นไปตามมาตรฐาน ให้พิจารณาทางเลือกอื่นต่อไปนี้:
หากคุณต้องการเยื้องโค้ดของคุณในสภาพแวดล้อมการพัฒนา โปรดระวังว่าไลบรารีที่กล่าวถึงก่อนหน้านี้จะพยายามแก้ไขมาร์กอัปของคุณ (นั่นคือจุดประสงค์หลักของพวกเขา การเยื้องเป็นผลพลอยได้)
มีเหตุผลที่ดีที่จะไม่ใช้นิพจน์ทั่วไปในการแยกวิเคราะห์ HTML อย่างไรก็ตาม ตัวแยกวิเคราะห์ DOM จะสร้างเอกสาร HTML ทั้งหมดขึ้นมาใหม่ มันจะเพิ่มแท็กที่หายไป ปิดแท็กบล็อกที่เปิด หรือลบสิ่งที่ไม่ใช่ HTML ที่ถูกต้อง นี่คือสิ่งที่ Tidy ทำ DOM ฯลฯ ลักษณะการทำงานนี้ไม่พึงประสงค์เมื่อทำการดีบักเอาต์พุต HTML ตัวแยกวิเคราะห์ที่ใช้ Regex จะไม่สร้างเอกสารขึ้นใหม่ 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.* "
}
}
