HTML to Pug Converter: แปลง markup HTML ที่ยืดยาวเป็น Pug template สะอาด ๆ พร้อม indentation เรียบร้อย

เสน่ห์ของ Pug คือสิ่งที่มันตัดออก: ไม่มี tag ปิด ไม่มี noise วงเล็บเหลี่ยม เหลือแค่ indentation กับความตั้งใจ แต่ดราม่าอยู่ทางเข้า ถ้าทีมคุณดูแลแอป Express หรือ stack สาย Jade คงคุ้นเคยกับฉากนี้ดี: การเปลี่ยนไฟล์ static HTML ที่ดีไซเนอร์ส่งมาให้เป็น Pug template ด้วยมือ กินเวลาช่วงบ่ายทั้งบ่ายไปกับการลบ tag ปิดทีละบรรทัด จัด indentation ใหม่ทีละระดับ แล้วเขียน attribute ใหม่เป็น shorthand — งานกึ่งกลไกที่เสี่ยงจริง เพราะ indentation พลาดแค่บรรทัดเดียว โครงสร้าง template ก็เปลี่ยนเงียบ ๆ HTML to Pug Converter ทำส่วนนั้นให้: วาง markup แล้วรับ Pug ที่ย่อหน้าถูกที่ถูกทางกลับมาในแท็บเดิม

การแปลงนี้ไม่ได้แค่เปลี่ยนหน้าตา Pug — template engine ที่เดิมชื่อ Jade — เป็น whitespace-significant โดย indentation คือโครงสร้างต้นไม้ของมันเอง การแปลงด้วยมือคือการทำงานแทน parser และพลาดนิดเดียว layout ก็พังตอน render แถมทุกอย่างรันในเบราว์เซอร์ล้วน ๆ ไม่มีอะไรถูกอัปโหลด — ปลอดภัยทั้งหน้า internal และงาน client ที่ติด NDA

ทำไมต้องใช้ HTML to Pug Converter?

• ประมวลผลในเบราว์เซอร์ 100%. ไม่มี round trip ไป server markup ไม่เคยออกจากเครื่องคุณ และผลลัพธ์โผล่ทันทีที่วาง
• แปลง shorthand ได้ถูกต้อง. div class="container" กลายเป็น .container และ div id="nav" กลายเป็น #nav class หลายตัวต่อกันเป็น .card.featured พร้อม toggle ให้เก็บ attribute แบบ literal ถ้าโปรเจกต์ชอบแบบชัด ๆ
• คุม indentation ให้ตรงกับโปรเจกต์. เลือก 2 spaces, 4 spaces หรือ tabs — ให้ตรงกับหน่วยที่ทีมประกาศไว้ใน .editorconfig
• รองรับ markup จริง ไม่ใช่ snippet สาธิต. void element อย่าง img กับ input ออกมาเป็นบรรทัดเดียว ส่วน boolean attribute อย่าง required ออกมาเปล่า ๆ ตามที่ Pug ต้องการ
• จัดการ comment ตามสะดวก. เก็บ HTML comment เป็น // ของ Pug ไว้ตำแหน่งเดิม หรือตัดทิ้งเพื่อขึ้น production
• ฟรี ไม่มีข้อจำกัด. ไม่ต้องสมัคร ไม่มีโควตา ไม่ต้องติดตั้ง

ฟีเจอร์หลัก

ผลลัพธ์ re-render สด ๆ ทุกครั้งที่แก้ HTML หรือเปลี่ยน option และสั่ง copy หรือ download เป็น index.pug เก็บลง views/ ได้เลย — มีปุ่ม sample ให้กดดูกติกาทุกข้อก่อนวางของจริง

วิธีใช้งาน

1. เตรียม markup. ไฟล์ export จากดีไซเนอร์, fragment จาก prototype หรือหน้าเก่าที่กำลังย้ายเข้า Express
2. วางลงช่อง input ในหน้า HTML to Pug Converter ถ้าเป็นเอกสารเต็มจะได้ doctype html พร้อม skeleton html/head/body ส่วน fragment ก็แปลงเป็น fragment ไม่มีการแต่ง wrapper เพิ่ม
3. ตั้งค่า option. หน่วย indentation, shorthand หรือ literal attribute และจะเก็บ comment ไว้ไหม
4. ตรวจผลลัพธ์. ความลึกการย่อหน้าสะท้อนโครงสร้างเดิม class กับ id โผล่เป็น shorthand และ attribute ที่เหลืออยู่ในวงเล็บหลัง tag
5. Copy หรือ download แล้ว compile. วางไฟล์ลง views/, render ผ่าน Express หรือ Pug CLI แล้วแก้จุดที่ compiler ฟ้อง

อะไรถูกทำให้เรียบง่ายขึ้น

div หายไป: class และ id กลายเป็น shorthand

ใน Pug ชื่อ tag div ถูก implied เมื่อบรรทัดขึ้นต้นด้วย class หรือ id div class="container" จึงสั้นเหลือ .container และ div id="nav" เหลือ #nav ถ้ามีทั้งคู่ใน element เดียวก็รวมกันเป็น #app.wrapper และ class หลายตัวต่อกันด้วยจุด ส่วน toggle keep-literal จะกลับพฤติกรรมนี้ ปล่อย div(class="wrapper", id="app") ไว้ตามเดิม

attribute อยู่ครบในวงเล็บ

สิ่งที่ไม่ใช่ class หรือ id คง syntax attribute ของ Pug: a(href="/home", target="_blank") value ยังอยู่ใน quote และ boolean attribute อย่าง required compile กลับเป็น HTML attribute เปล่า ๆ

Indentation: 2 spaces vs 4 spaces vs tabs

compiler ของ Pug วัด indentation เพื่อสร้าง tree หน่วยผสมจึงไม่ใช่แค่เรื่องสไตล์ แต่เป็น syntax error เครื่องมือ normalize ทุกบรรทัดตามที่คุณเลือก — default 2 spaces, 4 spaces แบบกว้าง หรือ tabs — โดยความลึกสะท้อนการซ้อนของต้นทางเสมอ

ข้อความ inline และ pipe

element ที่มีลูกเป็นข้อความล้วนยุบลงบรรทัดเดียว: p Welcome to my site ถ้ามี element ลูกปนจะขยายเป็นบรรทัด indent ของตัวเอง และข้อความที่ลอยอยู่ใน container กลายเป็นบรรทัด pipe | — render ข้อความตรง ๆ โดยไม่แต่ง tag ครอบ

โหมด comment

<!-- site header --> กลายเป็น // site header ที่ระดับความลึกเดิม เก็บตำแหน่งไว้ระหว่าง migration ถ้าเอาติ๊กออก comment จะถูกตัดทิ้งเพื่อขึ้น production

ก่อนและหลัง: header ที่ใช้งานจริง

markup แบบที่ไฟล์ export จากดีไซน์มักมี:

<header id="site-header" class="main-header">
  <h1 class="title">Hello world</h1>
  <p>Welcome to my site</p>
  <ul id="nav">
    <li><a href="/home">Home</a></li>
    <li><a href="/about" target="_blank">About</a></li>
  </ul>
</header>

และผลลัพธ์จากเครื่องมือด้วย indentation แบบ 2 spaces:

header#site-header.main-header
  h1.title Hello world
  p Welcome to my site
  ul#nav
    li
      a(href="/home") Home
    li
      a(href="/about", target="_blank") About

noise ของ tag กับ attribute ทั้งหมดยุบเหลือโครงสร้างที่อ่านรู้เรื่องในแวบเดียว

จุดที่ยังต้องเก็บรายละเอียดด้วยมือ

มีสามจุดที่ควรผ่านมนุษย์ script กับ style inline จะถูกแปลงเป็นรูปแบบ dot-block ของ Pug แต่ JavaScript จริง ๆ ควรอยู่ใน bundle ส่วน conditional comment สำหรับ Internet Explorer รุ่นเก่าไม่มีรูปแบบที่สะอาดใน Pug — เขียนมือหรือลบทิ้ง และ fragment ที่ต้อง loop หรือ branch ต้องเติม logic เอาเอง เครื่องมือให้โครง เติม each, if และตัวแปรเอง

กรณีการใช้งานจริง

ย้ายเว็บ static ขึ้น Express และ Pug

เว็บ marketing โตจน static hosting ไม่ไหว ย้ายขึ้น Express แปลงแต่ละหน้าเป็น template ใน views/ แล้วผ่า shell ที่ใช้ร่วมกันออกมาเป็น layout พร้อม partial header กับ footer

แปลงไฟล์ export จากดีไซน์

เครื่องมือ prototype ผลิต HTML ที่เป๊ะแต่แข็ง แปลง export เป็น Pug ตั้งแต่วันแรก ทำให้ prototype ใช้ภาษา template เดียวกับแอป และการ tweak หน้าบ้านหลังจากนั้นกลายเป็น diff ใน version control

รีแฟกเตอร์โปรเจกต์ Jade รุ่นเก่า

หน้าใหม่ยังมาเป็น HTML เสมอ — จาก agency หรือทีม marketing — แม้ codebase จะเก่าสมัย Jade แปลงให้เข้าสไตล์ Pug ของโปรเจกต์แทนการเอาไฟล์ .html มาแปะบนแอปที่ขับเคลื่อนด้วย template

สร้าง template library ที่ใช้ซ้ำได้

แปลง markup ต้นแบบของ button, card, modal ครั้งเดียวเป็น partial แบบ components/card.pug แล้วค่อยใส่ตัวแปรกับ mixin library จ่ายค่า conversion ครั้งเดียวแล้วได้คืนตลอดไป

แนวปฏิบัติที่ดี

• ตรวจ indentation ก่อน compile เสมอ. ใน Pug indentation คือโครงสร้าง สแกนความลึกสิบวินาทีจับ artifact ได้เกือบหมด
• รักษา semantic tag อย่าให้กลับไปเป็น div soup. header, main, nav รอดจากการแปลงมาเป็นอยู่แล้ว อย่าเพิ่งแกะกลับเป็น div
• ระวัง block script กับ style แบบ inline. มันมาเป็น dot-block จุดตัดสินใจให้ชัดว่าโค้ดพวกนั้นควรอยู่ใน template หรือใน bundle
• เช็กแบบ round-trip. ส่งผลลัพธ์กลับเข้า Pug to HTML Converter แล้ว diff กับต้นฉบับ — วิธีพิสูจน์ที่เร็วที่สุดว่าไม่มีอะไรหาย
• ตั้งหน่วย indent ให้ตรงโปรเจกต์ก่อนแปลง. ตั้งในเครื่องมือเลย ดีกว่าจัดใหม่ทีหลัง
• แปลงเป็นชิ้นเล็ก ๆ. ครั้งละหน้าหรือ component code review ยังมีความหมาย และ regression จับง่าย

พร้อมเลิกพิธีกดปุ่ม delete แล้วหรือยัง? เปิด HTML to Pug Converter วางหนึ่งหน้า แล้วดู markup ยืดยาวยุบเป็น template เรียบร้อย ๆ ในไม่กี่วินาที

เครื่องมืออื่น ๆ ที่น่าสนใจ:

• Pug to HTML Converter — compile Pug กลับเป็น HTML มาตรฐานสำหรับ preview และ debug
• HTML to Markdown Converter — แปลงหน้า HTML เป็น Markdown สะอาด ๆ สำหรับ docs และ CMS
• Markdown to HTML Converter — เรนเดอร์ Markdown กลับเป็น markup HTML ที่มีโครงสร้าง

ขอให้ทุก template compile ผ่านตั้งแต่ครั้งแรก และทุกบรรทัดย่อหน้าลงตัวที่ควรจะเป็น — Online Tools Forge Team

คำถามที่พบบ่อย

ถ: HTML ของฉันถูกอัปโหลดขึ้น server ไหน?

ตอบ: ไม่ครับ การแปลงเกิดขึ้นทั้งหมดในเบราว์เซอร์ด้วย DOM parser ฝั่ง client markup ของคุณจึงไม่เคยออกจากเครื่อง

ถ: class กับ id จะกลายเป็นอะไร?

ตอบ: ค่า default คือ Pug shorthand class ทุกตัวต่อกันเป็น .class และ id เป็น #id เช่น div class="card featured" id="promo" จะกลายเป็น #promo.card.featured มี checkbox ให้เก็บแบบ literal attribute แทน

ถ: void element อย่าง img กับ input จัดการยังไง?

ตอบ: ออกมาเป็นบรรทัดเดียวพร้อม attribute ในวงเล็บ — input(type="text", name="q", required) — boolean attribute ออกมาเปล่า ๆ และไม่มี tag ปิดผี

ถ: ใช้ tabs แทน spaces ได้ไหม?

ตอบ: ได้ เลือก 2 spaces, 4 spaces หรือ Tab ได้จากตัวเลือก indentation แต่ต้องใช้หน่วยเดียวต่อไฟล์ เพราะ Pug ถือว่า indentation ผสมเป็น syntax error