ตัวแปลง HTML เป็น Pug
แปลง HTML เป็น Pug (Jade) template syntax ฟรี เลือก indentation ได้ รองรับ class และ id shorthand พร้อมจัดการ comments — ทำงานในเบราว์เซอร์ 100%
Loading tool...
ตัวแปลง HTML เป็น Pug คืออะไร?
ตัวแปลง HTML เป็น Pug เปลี่ยน HTML markup มาตรฐานให้เป็น Pug (เดิมชื่อ Jade) template syntax โดย Pug ใช้ indentation แทน closing tags ทำให้หน้า HTML ทั้งหน้ายุบเหลือ template ที่กระชับอ่านง่าย ซึ่ง Node.js framework อย่าง Express เรนเดอร์ได้โดยตรง
ประโยชน์หลัก
- ไฟล์ template เล็กลงประมาณ 30-50% เพราะไม่มี closing tags
- syntax แบบ indentation ทำให้การซ้อนกันสม่ำเสมอและรีวิวง่าย
- attribute class และ id กลายเป็น shorthand selector ที่กระชับ
- ทำงานในเบราว์เซอร์ล้วน ๆ — ไม่ต้องสมัครสมาชิก ไม่อัปโหลด ไม่จำกัดจำนวน
- ปรับ indentation และการเก็บ comments ได้ตามข้อตกลงของทีม
กรณีการใช้งาน
- •ย้าย HTML view เดิมไปยังแอป Express หรือ NestJS ที่เรนเดอร์ด้วย Pug
- •แปลง static HTML mockup เป็น Pug template สำหรับ backend แบบ Node.js
- •เรียนรู้ Pug syntax จากการดูว่า HTML ที่คุ้นเคยแมปไปเป็นอะไร
- •จัดระเบียบ HTML ที่ copy-paste มาให้เป็น template ที่ indentation สม่ำเสมอ
- •เตรียม email หรือ page template สำหรับ build pipeline ที่ใช้ Pug
วิธีใช้ตัวแปลง HTML เป็น Pug
- วาง HTML ของคุณ: วาง HTML markup ลงในช่องป้อนข้อมูล หรือกดปุ่มตัวอย่างเพื่อลองกับเอกสารสาธิต
- เลือกตัวเลือกการจัดรูปแบบ: เลือกสไตล์ indentation (2 spaces, 4 spaces หรือ tab) และสลับตัวเลือก class/id shorthand กับการเก็บ comments
- ตรวจสอบผลลัพธ์ Pug: Pug ที่แปลงแล้วจะแสดงทันที — การซ้อนกัน, attributes และ comments ถูกรักษาไว้ในหน้าต่างผลลัพธ์
- คัดลอกหรือดาวน์โหลด: กดคัดลอกเพื่อนำ Pug code ไปใช้ หรือดาวน์โหลดบันทึกเป็นไฟล์ .pug สำหรับโปรเจกต์ของคุณ
คุณสมบัติหลัก
- แปลง nested tags, void elements และ script หรือ style blocks ได้ถูกต้องแม่นยำ
- ใช้ Pug class และ id shorthand เป็นค่าเริ่มต้น พร้อมสวิตช์เก็บ attribute แบบ literal
- เลือก indentation ได้ทั้ง 2 spaces, 4 spaces หรือ tab ให้ตรงสไตล์โปรเจกต์
- เก็บ HTML comments เป็น Pug comments — หรือตัดออกได้ในคลิกเดียว
- คัดลอกหรือดาวน์โหลดผลลัพธ์เป็นไฟล์ .pug ได้ทันที
- แปลงฝั่ง client 100% — HTML ของคุณไม่ออกจากเบราว์เซอร์
คำถามที่พบบ่อย
Pug คืออะไร และทำไมต้องใช้แทน HTML?
Pug (เดิมชื่อ Jade) เป็น template engine สำหรับ Node.js ที่ใช้ indentation แทน closing tags ทำให้ template สั้นลง เห็นโครงสร้างการซ้อนกันชัดเจน และได้ความสามารถเพิ่ม เช่น mixins, includes และ interpolation ที่ HTML ทั่วไปไม่มี
ตัวแปลงรองรับ attribute class และ id หรือไม่?
รองรับ โดยค่าเริ่มต้น class และ id จะถูกแปลงเป็น Pug shorthand เช่น div#main.card.active หากทีมของคุณชอบ attribute แบบระบุชัด สามารถเปิดตัวเลือกเก็บเป็น class และ id แบบ literal ได้
HTML ของฉันถูกอัปโหลดไปเซิร์ฟเวอร์หรือไม่?
ไม่ การแปลงทำงานในเบราว์เซอร์ของคุณทั้งหมดด้วย DOM parser ในตัว ไม่มีข้อมูลถูกส่งไปเซิร์ฟเวอร์ใด ๆ จึงปลอดภัยกับ markup ภายในองค์กรหรืองานที่เป็นความลับ
รองรับคุณสมบัติ HTML อะไรบ้าง?
รองรับ nested tags, void elements อย่าง img, br, input และ meta, boolean attributes, HTML comments, การประกาศ doctype และ script หรือ style blocks ส่วน HTML เก่าหรือผิดรูปแบบมากอาจได้การซ้อนกันที่คาดไม่ถึง
เลือกใช้ tab แทน spaces ได้ไหม?
ได้ เครื่องมือรองรับทั้ง 2 spaces, 4 spaces และ tab indentation ไม่ว่าเลือกแบบใด output จะสม่ำเสมอทั้งไฟล์