วิธีการทำงานของ HTML beautification
Beautifier อ่านมาร์กอัปทีละแท็ก ติดตามความลึกของการซ้อน (nesting) ของแต่ละ element แล้ว re-emit ออกมาพร้อมการย่อหน้าที่สม่ำเสมอ โดยไม่เปลี่ยนวิธีที่หน้าแสดงผลเลย — เปลี่ยนแค่การจัดวาง source code
- แยกวิเคราะห์แท็ก. ไลบรารีสแกน input เป็น token stream: opening tag, closing tag, text content, comment และเนื้อหาของ script กับ style block ค่า attribute ที่อยู่ใน quote และเนื้อหาของ pre กับ textarea element ถูกมองเป็นหน่วยเดียว ทำให้ช่องว่างภายในไม่ถูกแตะต้อง
- ติดตาม nesting. ขณะเดิน token stream beautifier จะรักษา indent level แบบ real-time opening tag ที่ไม่ใช่ self-closing จะทำให้ level ลึกขึ้น ส่วน closing tag ที่ตรงกันจะดึง level กลับ ความลึกนี้กำหนดจำนวน indent unit ที่วางหน้าแต่ละบรรทัดในผลลัพธ์
- ใช้ตัวเลือกที่ตั้งไว้. ตัวเลือกการย่อหน้า (2 ช่องว่าง, 4 ช่องว่าง หรือ tab) กำหนดความกว้างของหนึ่ง level ค่าตัดบรรทัดจะแบ่งบรรทัดยาวที่มี attribute มากหรือข้อความยาวเมื่อเกินคอลัมน์ที่กำหนด ส่วน cap บรรทัดว่างจะยุบบรรทัดว่างหลายๆ บรรทัดลงเหลือตามจำนวนที่ตั้งไว้
- ส่งออกมาร์กอัปอีกครั้ง. สุดท้าย formatter พิมพ์แท็กกลับออกมาพร้อม indentation และ line break ที่คำนวณไว้ หากเปิดใช้ inline formatting เนื้อหาของแต่ละ style block จะผ่าน CSS formatter และเนื้อหาของแต่ละ script block จะผ่าน JS formatter ทำให้โค้ดที่ฝังไว้เรียงกับมาร์กอัปรอบข้าง
ทำไมต้องจัดรูปแบบ HTML
- อ่านหน้าที่ถูกบีบอัด. Production HTML ลบ line break ออกเพื่อประหยัดไบต์ การ beautify ช่วยคืนโครงสร้าง ทำให้หาส่วนที่ต้องการได้ พบ closing tag ที่ขาดหาย และเข้าใจการซ้อนที่แท้จริงของเอกสาร
- จัดการ template ที่ไม่สม่ำเสมอ. มาร์กอัปที่หลายคนแตะมักมีการย่อหน้าและตำแหน่งแท็กที่ปะปน ผ่าน beautifier ครั้งเดียวก็ normalize ทั้งไฟล์ให้เป็น layout เดียวกัน ทำให้ commit ถัดไปแสดงเฉพาะการเปลี่ยนแปลงจริง ไม่ใช่ whitespace ที่ถูก reformat ทั้งหมด
- เครื่องมือนี้ไม่ทำให้หน้าช้าลง. formatter ออนไลน์ส่วนใหญ่โหลดไลบรารีทั้งหมดทันทีที่เปิดหน้า เครื่องมือนี้ lazy-load js-beautify เฉพาะเมื่อคุณคลิก Beautify หรือเปิดโหมดสด การเปิดหน้าจึงใช้เพียงไม่กี่กิโลไบต์แทนที่จะเป็นหลายร้อย และการ render เริ่มต้นยังคงเร็ว
- ไม่มีอะไรออกจากเบราว์เซอร์. ทุกอย่างทำงานบนอุปกรณ์ของคุณ มาร์กอัปของคุณไม่ถูกอัปโหลดขึ้น server เลย ซึ่งสำคัญมากเมื่อหน้าเป็นของลูกค้า มี internal URL หรืออยู่ภายใต้ข้อตกลงการรักษาความลับ
การใช้งานทั่วไป
HTML beautification เกิดขึ้นทุกครั้งที่มีคนต้องอ่านมาร์กอัปที่ไม่ได้เขียนมาเพื่อให้อ่าน
- ตรวจสอบหน้าที่ใช้งานจริง: วาง minified source จาก View Source เพื่อหามาร์กอัปที่อยู่เบื้องหลัง layout bug ที่ reproduce ในเครื่องไม่ได้
- ทำความสะอาด CMS output: reformat template ที่ page builder export มาเป็นบรรทัดเดียวก่อน commit กลับเข้า repository
- ตรวจสอบ accessibility และ SEO: ขยายเอกสารเพื่อตรวจสอบลำดับ heading โครงสร้าง landmark และ alt attribute เทียบกับ DOM จริง
ตัวอย่างที่ใช้งานได้จริง
ลองใช้สนิปเปตที่บีบอัดแล้ว: <div><p>hi</p><span>x</span></div> วางด้านบนโดยตั้ง indentation เป็น 2 ช่องว่าง แล้วคลิก Beautify คุณจะได้ block ที่อ่านได้: <div> บรรทัดต่างหาก, <p>hi</p> และ <span>x</span> indent ลึกขึ้นหนึ่ง level และ </div> ที่ตรงกันเรียงอยู่ด้านล่าง เปลี่ยน indentation เป็น Tab แล้วแต่ละ level จะใช้ tab character แทนสองช่องว่าง เพิ่ม block <style>a{color:red}</style> เปิด "จัดรูปแบบ CSS และ JS แบบ inline ด้วย" แล้ว rule จะขยายออกเป็นบรรทัดที่ indent แทนที่จะอยู่บรรทัดเดียว
FAQ
รันในเบราว์เซอร์ของฉันหรือไม่?
ใช่ ไลบรารี js-beautify โหลดแบบ lazy ครั้งแรกที่คุณคลิก Beautify หรือเปิดโหมดสด แล้ว cache ไว้ มาร์กอัปของคุณจะไม่ออกจากหน้าเลย ไม่มีการส่งข้อมูลไป server และไม่มีการอัปโหลด
การ beautify จะเปลี่ยนวิธีที่หน้าแสดงผลไหม?
ไม่ Beautifier เพิ่มและลบแค่ whitespace และ line break ระหว่างแท็กเท่านั้น เบราว์เซอร์ละเว้น whitespace นั้นเมื่อสร้างหน้า ดังนั้นผลลัพธ์การแสดงผลจึงเหมือนเดิม สิ่งที่ต้องระวังคือเนื้อหาที่ sensitive ต่อ whitespace ภายใน pre, textarea หรือ inline element ซึ่ง formatter จะไม่แตะต้องโดยตั้งใจ
สวิตช์ inline CSS และ JS ทำอะไร?
เมื่อปิด เนื้อหาของ style และ script block จะเหมือนกับที่คุณวางไว้ทุกประการ เมื่อเปิด CSS ภายใน style block แต่ละตัวจะผ่าน CSS formatter และ JavaScript ภายใน script block แต่ละตัวจะผ่าน JS formatter ทำให้โค้ดที่ฝังไว้มีการย่อหน้าตรงกับมาร์กอัปรอบข้าง
"ตัดบรรทัดที่คอลัมน์" ทำอะไร?
กำหนดความยาวบรรทัดที่แท็กที่มี attribute มากหรือข้อความยาวจะถูกแบ่งเป็นหลายบรรทัด ตั้งค่าเป็น 0 เพื่อเก็บแต่ละ element ไว้ในบรรทัดเดียวโดยไม่คำนึงถึงความยาว ตั้งเป็น 80 หรือ 120 แล้ว formatter จะ wrap ส่วนที่เกินคอลัมน์นั้น ทำให้ element ที่กว้างอ่านได้ใน editor แคบ
HTML beautification ฝั่งเบราว์เซอร์ให้มาร์กอัปที่อ่านได้โดยไม่ต้องมี build step หรืออัปโหลด วางหน้าที่ถูกบีบอัดหรือรก เลือก indentation และ wrap width ตัดสินใจว่าจะ reformat inline CSS และ JS หรือไม่ แล้วคัดลอกหรือดาวน์โหลดผลลัพธ์ ไม่มีอะไรออกจากอุปกรณ์ของคุณ ไม่ต้องมีบัญชี และไลบรารีโหลดเฉพาะเมื่อคุณขอเท่านั้น การเปิดหน้านี้จึงสิ้นเปลืองเพียงไม่กี่กิโลไบต์ ไม่ใช่เมกะไบต์