วิธีใช้งาน
- วาง HTML ลงในช่องป้อนข้อมูล เปิดไฟล์ .html หรือลองใช้ตัวอย่าง
- เลือก Beautify เพื่อมาร์กอัปที่มีการเยื้องและอ่านง่าย หรือ Minify เพื่อผลลัพธ์ที่กะทัดรัด
- เมื่อจัดรูปแบบให้สวยงาม เลือก 2 ช่องว่าง 4 ช่องว่าง หรือแท็บ และเลือกว่าจะเก็บคอมเมนต์ไว้หรือไม่
- คัดลอกผลลัพธ์หรือดาวน์โหลดเป็นไฟล์ .html
วิธีการทำงาน
ตัวจัดรูปแบบอ่าน HTML ด้วย tokenizer แบบยืดหยุ่น คล้ายกับที่เบราว์เซอร์ทำ แล้วเขียนออกมาใหม่ โดยจะไม่เรนเดอร์อินพุตเลย ดังนั้นสคริปต์ในโค้ดที่วางจึงไม่ทำงาน และไม่มีการโหลดสิ่งใดจากเว็บ
โหมด Beautify จะวางองค์ประกอบระดับบล็อกแต่ละตัว (div, p, ul, li, section, table, …) ไว้บรรทัดของตัวเอง โดยเยื้องตามระดับการซ้อน ข้อความและองค์ประกอบอินไลน์ เช่น a, b, em, span, code, img และ br จะอยู่รวมกันในบรรทัดเดียว ดังนั้นช่องว่างระหว่างคำและลิงก์จะไม่ถูกเปลี่ยนในลักษณะที่ทำให้หน้าเพจที่แสดงผลเปลี่ยนไป ช่องว่างและตัวขึ้นบรรทัดใหม่ที่ต่อเนื่องกันในข้อความจะกลายเป็นช่องว่างเดียว ซึ่งเป็นวิธีที่เบราว์เซอร์แสดงผลตามปกติอยู่แล้ว
เนื้อหาภายในองค์ประกอบ pre, textarea, script และ style จะถูกคัดลอกตามที่เขียนไว้ทุกประการ รวมถึงช่องว่างและอักขระ < หรือ > องค์ประกอบ void เช่น br, img, input, meta และ link จะไม่มีแท็กปิด แท็กปิดตัวเอง เช่น <path /> ใน SVG แบบอินไลน์จะคงรูปแบบปิดตัวเองไว้
โหมด Minify จะยุบช่องว่างในข้อความเป็นช่องว่างเดียว ลบช่องว่างที่อยู่ติดกับองค์ประกอบระดับบล็อก จัดช่องว่างระหว่างแอตทริบิวต์ให้เป็นรูปแบบปกติ และถ้าตัวเลือก “เก็บคอมเมนต์” ถูกปิด จะลบคอมเมนต์ออก คอมเมนต์แบบมีเงื่อนไขจะถูกเก็บไว้เสมอ
เครื่องมือนี้ไม่แก้ไข HTML ที่ไม่ถูกต้อง ไม่เพิ่มแท็กที่ขาดหายไป ไม่เรียงลำดับแอตทริบิวต์ใหม่ และไม่ย่อ CSS หรือ JavaScript ภายในองค์ประกอบ style และ script องค์ประกอบที่เปิดค้างไว้จะถูกปิดที่ท้ายองค์ประกอบแม่ และแท็กปิดที่ไม่มีแท็กเปิดที่ตรงกันจะถูกเก็บไว้ตามที่เขียน
ตัวอย่าง
การอ่านมาร์กอัปที่สร้างขึ้น
ระบบ CMS ส่งเทมเพลตออกมาเป็นบรรทัดยาวบรรทัดเดียว การ Beautify ด้วยระยะเยื้อง 2 ช่องว่างจะแสดงเมนูนำทาง รายการ และเนื้อหาหลักเป็นโครงสร้างแบบเยื้อง ในขณะที่ “Prices include <strong>VAT</strong>.” ยังอยู่ในบรรทัดเดียวที่อ่านง่าย
การเตรียมเทมเพลตอีเมล
ย่อขนาดอีเมล HTML โดยปิดคอมเมนต์เพื่อลดขนาด บล็อก <pre> ที่มีตารางราคาและ <style> แบบอินไลน์จะถูกเก็บไว้เหมือนเดิมทุกประการ
การตรวจสอบโครงสร้าง
เมื่อแท็กปิด </div> หายไป เอาต์พุตที่ผ่านการจัดรูปแบบจะแสดงองค์ประกอบถัดไปโดยเยื้องลึกเกินไปหนึ่งระดับ ซึ่งช่วยให้เห็นได้ง่ายว่าองค์ประกอบควรสิ้นสุดที่ตำแหน่งใด
คำถามที่พบบ่อย
การจัดรูปแบบจะทำให้หน้าเว็บแสดงผลต่างไปหรือไม่
แทบทุกกรณีไม่เปลี่ยนแปลง ช่องว่างภายในองค์ประกอบแบบ block จะถูกยุบรวมและย้ายไปเป็นตัวแบ่งบรรทัด ซึ่งเบราว์เซอร์ไม่นำมาแสดงผล ข้อความและองค์ประกอบแบบ inline ยังคงอยู่ในบรรทัดเดิม และเนื้อหาใน pre, textarea, script และ style จะไม่ถูกแตะต้อง ยกเว้นหน้าเว็บที่ใช้ CSS white-space: pre กับองค์ประกอบทั่วไป
เครื่องมือนี้ย่อ CSS และ JavaScript ที่อยู่ในหน้าให้เล็กลงด้วยหรือไม่
ไม่ เนื้อหาใน script และ style จะถูกเก็บไว้ตรงตามที่เขียนเพื่อไม่ให้เกิดความเสียหาย ใช้เครื่องมือจัดรูปแบบ CSS เพื่อย่อสไตล์ชีตแยกต่างหาก
วาง HTML จากแหล่งที่ไม่รู้จักปลอดภัยหรือไม่
ปลอดภัย ข้อมูลนำเข้าถูกประมวลผลเป็นข้อความล้วนและไม่ถูกแทรกลงในหน้าเว็บ ดังนั้นสคริปต์ในนั้นจะไม่ทำงาน และรูปภาพหรือลิงก์จะไม่ถูกโหลด
เครื่องมือนี้ตรวจสอบความถูกต้องของ HTML หรือไม่
ไม่ เครื่องมือนี้ตั้งใจยืดหยุ่นและจัดรูปแบบมาร์กอัปที่เสียหายแทนที่จะปฏิเสธ แท็กปิดที่ไม่ตรงกันจะถูกเก็บไว้ การเยื้องจึงช่วยให้คุณสังเกตเห็นได้ แต่จะไม่มีการสร้างรายการข้อผิดพลาด
ความเป็นส่วนตัว
HTML ของคุณถูกประมวลผลในเบราว์เซอร์ของคุณเท่านั้น และไม่ถูกเรนเดอร์หรืออัปโหลด ไม่มีการจัดเก็บหรือรวมอยู่ใน analytics