ตัวแปลง Pug เป็น HTML
แปลง template ภาษา Pug (Jade) เป็น HTML ที่สะอาดและเยื้องถูกต้องในเบราว์เซอร์ คอมไพเลอร์อ่าน indentation ได้ รองรับ tag, id, class, attribute, block
Loading tool...
ตัวแปลง Pug เป็น HTML คืออะไร?
Pug (เดิมชื่อ Jade) เป็น template engine ที่ใช้ indentation แทนการปิด tag ตัวแปลง Pug เป็น HTML นี้คอมไพล์ template ของคุณให้เป็น HTML ที่สะอาดและเยื้องถูกต้อง ทั้งหมดในเบราว์เซอร์ รองรับ tag, id, class, attribute, block expansion, piped text, comment และ doctype โดย expression ของ template ฝั่ง server ยังคงอยู่ครบถ้วน
ประโยชน์หลัก
- แปลง template ภาษา Pug เป็น HTML โดยไม่ต้องติดตั้ง Node.js หรือ build tool
- คอมไพเลอร์แบบ indentation-aware สร้าง output ที่ซ้อนกันถูกต้องและอ่านง่าย
- เลือกเยื้องแบบ 2 spaces, 4 spaces หรือ tab ให้ตรงกับ code convention
- แจ้ง error ชัดเจน แทนการปล่อย HTML ที่พังแบบเงียบ ๆ
- ทำงาน 100% ฝั่ง client และ offline — ไม่มีอะไรออกจากเบราว์เซอร์ของคุณ
กรณีการใช้งาน
- •ย้าย codebase เก่าที่เป็น Pug หรือ Jade มาเป็น HTML template ธรรมดา
- •email template หรือหน้า static ที่ prototype ด้วย Pug แล้วต้องส่งมอบเป็น HTML
- •เรียนรู้ syntax ของ Pug จากการเห็น HTML ที่แต่ละบรรทัดสร้างขึ้นจริง
- •ส่งมอบ HTML ให้ designer หรือผู้มีส่วนได้ส่วนเสียที่อ่าน Pug ไม่ออก
- •คลี่ partial ของ Pug ขนาดเล็กเป็นหน้า CMS หรือ component อย่างรวดเร็ว
วิธีใช้ตัวแปลง Pug เป็น HTML
- วาง template ภาษา Pug: พิมพ์หรือวางโค้ด Pug ลงในช่องป้อนข้อมูล หรือกดปุ่มตัวอย่างเพื่อโหลดตัวอย่างฉบับเต็มที่ครอบคลุม doctype, head, body, เมนูนำทาง และการ์ด
- เลือกการเยื้องของ output: เลือก 2 spaces, 4 spaces หรือ tab จากตัวเลือกการเยื้อง ให้ตรงกับสไตล์ของโปรเจกต์
- ตรวจสอบ HTML ที่คอมไพล์แล้ว: HTML จะปรากฏขึ้นมาทันทีด้านล่าง หากคอมไพเลอร์เจอ syntax ที่ไม่รองรับ จะแสดงข้อความ error ชัดเจนแทนการคืนค่าที่พัง
- คัดลอกหรือดาวน์โหลด: กดคัดลอกเพื่อส่ง HTML ไปยัง clipboard หรือกดดาวน์โหลดเพื่อบันทึกเป็นไฟล์ .html
คุณสมบัติหลัก
- คอมไพเลอร์แบบ indentation-aware สร้าง HTML ที่ซ้อนกันถูกต้องและอ่านง่าย
- รองรับ syntax ย่อ: div.card#main, attribute หลายกลุ่ม และ boolean attribute
- รองรับ block expansion (li: a), piped text, comment แบบแสดง/ไม่แสดงผล และ doctype
- แทรก tag ในข้อความได้ โดย template expression ฝั่ง server ยังอยู่ครบถ้วน
- เลือก output indent แบบ 2 spaces, 4 spaces หรือ tab ตาม code convention ของทีม
- กด copy และดาวน์โหลดไฟล์ .html ได้ทันที ทำงาน offline ไม่ต้องมี server
คำถามที่พบบ่อย
Pug (เดิมชื่อ Jade) คืออะไร?
Pug เป็น template engine สำหรับ Node.js ที่ใช้ indentation แทนการปิด tag โดยชื่อเดิมคือ Jade ก่อนจะเปลี่ยนชื่อในปี 2015 เครื่องมือนี้คอมไพล์ subset ของ syntax Pug ที่ใช้งานบ่อยให้เป็น HTML ทั้งหมดในเบราว์เซอร์ ไม่ต้องติดตั้ง Node.js
รองรับ include, extend หรือ mixin หรือไม่?
ไม่รองรับ ฟีเจอร์เหล่านั้นต้องอ่านไฟล์และประมวลผลตอน runtime ซึ่งทำไม่ได้ในเครื่องมือแบบ static ในเบราว์เซอร์ ตัวแปลงนี้เน้น syntax ของ template โดยตรง ได้แก่ tag, attribute, block expansion, comment, doctype, piped text และ block text
expression แบบ interpolation ของตัวแปรถูกคอมไพล์ไหม?
ไม่ ตัวแปรแบบ placeholder จะคงอยู่ใน HTML ผลลัพธ์ตรงตามที่เขียน เพราะไม่มีข้อมูล context ให้ประเมินค่า เครื่องมือนี้ออกแบบมาเพื่อแปลง static template ส่วนการแทรก tag ในข้อความรองรับเต็มรูปแบบ
โค้ด template ของผมถูกส่งไป server ไหม?
ไม่เด็ดขาด คอมไพเลอร์เป็น JavaScript ธรรมดาที่ทำงานบนเครื่องของคุณเอง ไม่มีการอัปโหลด บันทึก หรือเก็บ log ใด ๆ จึงปลอดภัยที่จะวาง template ส่วนตัวหรือโค้ดที่เป็นความลับทางการค้า