Pug to HTML Converter: แปลง template แบบย่อหน้าเป็น HTML สะอาด ๆ ในเบราว์เซอร์ได้ทันที

ยุคนี้แม้ frontend จะเต็มไปด้วย framework แต่ Pug — template engine ที่เดิมชื่อ Jade — ก็ยังผงาดขึ้นมาในที่ที่ลบทิ้งไม่ได้: แอป Express รุ่นเก่าที่โฟลเดอร์ views/ เต็มไปด้วยไฟล์ .pug, โปรเจกต์ Vue ที่ scaffold ด้วย vue-cli และ webpack vue-loader รุ่นเก่า, build pipeline สมัย Gulp ราวกลางทศวรรษ 2010 หรือเอกสารภายในที่เขียนก่อนการเปลี่ยนชื่อจาก Jade เป็น Pug ปี 2016 พอต้องรับช่วงโค้ดพวกนี้ก็หมายความว่าต้องกลับมาอ่าน Pug อีกครั้ง และทางลัดที่เร็วที่สุดกลับไปสู่ markup ธรรมดาคือ Pug to HTML Converter — วาง template ลงไป รับ HTML กลับมาทันที ทำงานในเบราว์เซอร์ล้วน ๆ

แนวคิดหลักของ Pug คือใช้ indentation แทน angle brackets ไม่มี tag ปิด หนึ่งบรรทัดต่อหนึ่ง element และมี shorthand สำหรับ id กับ class ความกระชับแบบนี้ทำให้ตอนเขียนสนุกมาก แต่พอผ่านไปหลายปีกลับอ่านเหมือนปริศนา โดยเฉพาะกับ developer ที่ไม่เคยใช้มาก่อน converter ตัวนี้ทำหน้าที่เป็นล่ามแปลระหว่างสองโลก ชี้ให้เห็นชัด ๆ ว่าแต่ละบรรทัดที่ย่อหน้าไว้กลายเป็น tag ที่ซ้อนกันอย่างไร

เพราะ compiler ทำงาน 100% ฝั่ง client จึงไม่มีอะไรต้องติดตั้งและไม่มีอะไรถูกอัปโหลด ไม่ต้อง npm install pug ไม่ต้องตั้ง build step ไม่ต้องสมัครสมาชิก เปิดเครื่องมือวางคู่กับ editor แล้วทำงานต่อได้เลย

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

• ไม่ต้องติดตั้งหรือตั้งค่าอะไรเลย การ compile Pug ปกติต้องลุ้น build step หรือหา sandbox ใช้ แต่ที่นี่วางแล้วอ่านได้เลย ใช้งานได้ทันทีตั้งแต่หน้าเว็บโหลดเสร็จ
• เข้าใจ syntax ของ Pug ของแท้ tags, #id, .class, attribute ในวงเล็บ, block expansion ด้วยโคลอน, piped text, comment ทั้งแบบ HTML และ JavaScript และบรรทัด doctype ถูก parse ด้วย compiler ที่คำนึงถึง indentation ไม่ใช่ find-and-replace หยาบ ๆ
• เห็นผลแบบเรียลไทม์ขณะพิมพ์ ผลลัพธ์ HTML อัปเดตตามทุกครั้งที่แก้ ลดระดับการซ้อนทิ้งหรือเปลี่ยนชื่อ class ปุ๊บก็เห็นผลปั๊บ
• เป็นส่วนตัวตั้งแต่การออกแบบ template มักมีชื่อ route, id และข้อความภายในองค์กร ทุกอย่าง compile ในเครื่องด้วย JavaScript ข้อมูลจึงไม่เคยออกจากเครื่องของคุณ
• ใช้เป็นบทเรียนได้ด้วย การเห็น Pug กับ HTML วางคู่กันคือวิธีเร็วที่สุดที่จะเข้าใจว่า shorthand แม็ปไปเป็น markup จริงแบบไหน
• ฟรี ไม่มี quota จะแปลง template เดียวหรือห้าสิบไฟล์ก็ได้ ไม่มีการสมัครสมาชิกและไม่มีขีดจำกัด

ฟีเจอร์หลัก

จุดที่ทำให้ผลลัพธ์ใช้งานได้ทันทีมีสองเรื่อง: โครงสร้างการซ้อนคำนวณจาก indentation เพียงอย่างเดียว ผลลัพธ์จึงตรงกับที่ engine จริงจะ render และทุก tag ปิดตามลำดับที่ถูกต้อง อ่านรู้เรื่องตั้งแต่แรกเห็น ถ้าวันหนึ่งต้องเดินทางกลับทาง — จาก HTML กลับเป็น Pug — ในตระกูลเดียวกันนี้ก็มี converter สำหรับทางกลับโดยเฉพาะ

วิธีใช้งาน

1. เปิด converter เข้าไปที่หน้า Pug to HTML Converter input pane พร้อมใช้ตั้งแต่หน้าโหลดเสร็จ ไม่ต้องตั้งค่าอะไร
2. วาง template Pug จะเป็น snippet สองบรรทัดหรือหน้าเต็มก็ได้ มีทั้ง doctype, tag ซ้อนกัน, attribute และ comment ยังไงก็รับได้หมด
3. อ่านผลลัพธ์ HTML แบบเรียลไทม์ markup ที่ compile แล้วจะโผล่ใน output pane ทันที ตรวจดูว่าการซ้อนของ tag ตรงกับ indentation ที่เขียนไว้
4. ปรับแล้วไล่ดูซ้ำ แก้ indentation เพิ่มหรือลดระดับการซ้อน ขยาย attribute — ผลลัพธ์ตามทุกการเปลี่ยนแปลงขณะพิมพ์
5. คัดลอกผลลัพธ์ไปใช้ เอา HTML ไปวางที่ที่ต้องการ ไม่ว่าจะเป็น static page, component, ตัวอย่างในเอกสาร หรือ comment ใน code review

ทบทวน Syntax ของ Pug

Pug ดูกระชับจนงง แต่พอกติกาไม่กี่ข้อเข้าที่แล้วจะอ่านราบรื่นมาก นี่คือกฎทั้งหมดที่ converter รองรับ

Indentation คือโครงสร้าง

ไม่มี tag ปิดให้เขียน บรรทัดที่ย่อหน้าลึกกว่าบรรทัดบนหนึ่งระดับจะกลายเป็นลูกของบรรทัดนั้น พอย่อกลับมาระดับเดิม parent ก็ปิดตัว ความกว้างของ indent จะเว้นวรรคหนึ่งช่อง สี่ช่อง หรือใช้ tab ก็ไม่สำคัญ ขอแค่คุณสม่ำเสมอ เพราะสิ่งที่นับจริง ๆ คือความลึกสัมพัทธ์

Tag, id และ class แบบย่อ

คำเปล่า ๆ หนึ่งคำคือ tag: main, section, span เติม #app ตัว element จะได้ id เติม .card จะได้ class ต่อกันได้เลย — main#app.card — ทั้งคู่ก็เกาะ element เดียวกัน ส่วนบรรทัดที่ขึ้นต้นด้วย .card อย่างเดียวจะ default เป็น div

Attribute ในวงเล็บ

ทุกอย่างที่ tag หอบมาใน (วงเล็บ) จะกลายเป็น attribute: a(href="/pricing" target="_blank") ค่าจะมี quote หรือเปล่าก็ได้ attribute หลายตัวคั่นด้วยช่องว่าง และ boolean attribute อย่าง disabled ยืนโดด ๆ ได้สบาย

Block Expansion ด้วยโคลอน

ใส่โคลอนต่อท้าย tag เมื่อไหร่ จะซ้อนอีกหนึ่งระดับในบรรทัดเดียวได้: ul: li First item ให้ list ที่มี list item อยู่ข้างใน ต่อกันหลายระดับก็ได้ เหมาะกับ wrapper สั้น ๆ

Piped Text

บรรทัดที่ขึ้นต้นด้วย pipe | จะถูกแสดงออกมาเป็นข้อความ literal ภายใน parent — ใช้ปะข้อความเข้ากับ inline element โดยไม่กระตุ้นการ parse tag

Comment: // กับ //-

// note จะกลายเป็น HTML comment จริง ๆ ในผลลัพธ์ ส่วน //- note เป็น silent comment ของ Pug ที่หายไปเลย อยากเขียนโน้ตที่ไม่ต้องการให้ขึ้น production ให้ใช้แบบมีขีด

บรรทัด Doctype

doctype html บรรทัดแรกจะ emit คำประกาศ document type ของ HTML5 ออกมา ถ้าไม่มี converter จะ render ให้เฉพาะ fragment เท่านั้น

ตัวอย่างครบทั้งชุด

Input:

doctype html
html(lang="en")
  head
    title Customer Portal
  body
    main#content.container
      h2 Account Overview
      p Welcome back — your dashboard is ready.

Output:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Customer Portal</title>
  </head>
  <body>
    <main id="content" class="container">
      <h2>Account Overview</h2>
      <p>Welcome back — your dashboard is ready.</p>
    </main>
  </body>
</html>

Pug แปดบรรทัดขยายเป็น HTML สิบห้าบรรทัด — และยิ่ง template ใหญ่ขึ้น สัดส่วนนี้ยิ่งคุ้ม

กับดักที่พบบ่อย

• ผสม tab กับช่องว่าง Pug ผูกกับ indentation character ตัวเดียวต่อหนึ่งไฟล์ ผสมกันเมื่อไหร่ parse พังทันทีด้วย invalid-indentation error ถ้า template ที่วางไปแล้วอาการแปลกก็หมายที่จุดนี้เป็นอันดับแรก
• สมมติเรื่อง self-closing engine รู้จัก void element — img, br, hr, input, meta, link — และ emit แบบไม่มี tag ปิดให้อัตโนมัติ แต่ tag อื่นจะได้ tag ปิดเสมอ ถ้าบังเอิญซ้อนเนื้อหาไว้ใต้ element ที่คิดว่าจะว่าง โครงสร้างทั้งก้อนด้านล่างก็จะถูกเลื่อนตามไปด้วย

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

ฟื้นแอป Express และ Node รุ่นเก่า

สถานการณ์คลาสสิก: แอป Express สมัยปี 2017 ยังรับ user จริงอยู่ ทุก view เขียนด้วย Pug การ compile template เป็น HTML ให้ reference ที่อ่านออกไว้ใช้เขียน view ใหม่เป็น component — หรือจะคงไฟล์ .pug เดิมไว้แต่รู้ชัดว่าแต่ละไฟล์ render อะไรอยู่ในวันนี้ก็ยังได้

แปลง template เป็นครั้งคราว

บางทีไฟล์ .pug ก็แค่ต้องกลายเป็น .html ครั้งเดียว: email template ที่ designer อยากได้, static export ของหน้าเดียว หรือตัวอย่างแปะใน ticket browser converter จัดการเสร็จก่อนที่ build pipeline จะ install dependency เสร็จด้วยซ้ำ

สอนและเรียนรู้ template engine

ถ้าต้องอธิบายว่า template engine มันทำอะไร ไม่มีอะไรชนะการแปลสด ๆ หน้าชนกัน ให้ผู้เรียนวาง template ลงไป ลบ indent หนึ่งระดับ แล้วดู tag คลายออก — abstraction ที่เคยลอย ๆ กลับมาจับต้องได้ในไม่กี่วินาที

Prototype markup โดยไม่ต้องตั้ง toolchain

กำลังร่าง layout หน้าเว็บอยู่? เขียนด้วย shorthand อันกระชับของ Pug แล้วอ่าน HTML เทียบเท่าแบบสด ๆ ไม่ต้องพึ่ง editor plugin, package.json หรือรอ watcher process อะไรทั้งนั้น

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

• จัด indentation ให้เรียบร้อยก่อนวาง แปลง tab เป็นช่องว่าง (หรือกลับกัน) ก่อน เผื่ออักขระแปลกปลอมตัวเดียวทำ parse พัง
• วางทีละ template compile เป็นหน่วยเล็ก ๆ จะเห็นชัดว่าบรรทัดไหนให้กำเนิด tag ไหน
• ใช้ silent comment กับโน้ตภายใน แบบ //- จะไม่หลุดไปอยู่ใน HTML ของจริง ข้อมูลส่วนตัวจึงไม่รั่วไปกับ markup ที่ส่งออก
• เขียน attribute แบบเต็มเมื่อความชัดสำคัญ attribute ที่มี quote และสะกดครบจะอ่านไม่กำกวมเวลาดูผลลัพธ์ที่แปลงแล้ว
• เช็ก doctype กับงานแบบหน้าเต็ม มีหรือไม่มีบรรทัด doctype html ต่างกันที่จะได้ document หรือแค่ fragment
• ตรวจการซ้อนด้วยตา เทียบความลึกของ indentation กับความลึกของ tag ในผลลัพธ์ ทั้งสองฝั่งควรสะท้อนกันเป๊ะ

พร้อมดูแล้วว่า template เก่า ๆ ของคุณ render อะไรกันแน่? เปิด Pug to HTML Converter วางไฟล์ .pug ลงไป แล้วอ่าน HTML เสร็จในไม่กี่วินาที

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

• HTML to Pug Converter — ทำทางกลับ จาก HTML ที่มีอยู่เป็น Pug ที่ย่อหน้าเรียบร้อย
• Markdown to HTML Converter — เปลี่ยนงานเขียน Markdown เป็นเอกสาร HTML สะอาด ๆ
• HTML Tag Remover — ล้าง markup ทิ้งเมื่อต้องการแค่ plain text จาก HTML

ขอให้ทุกบรรทัดที่ย่อหน้าไว้ลงตัวพอดีกับ tag ของมันเสมอ — Online Tools Forge Team

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

ถ: เครื่องมืออัปโหลด template ของฉันขึ้น server ไหนหรือเปล่า?

ตอบ: ไม่ครับ การ compile เกิดขึ้นทั้งหมดในเบราว์เซอร์ด้วย JavaScript ฝั่ง client ไม่ว่า template จะมี route ภายใน, id หรือข้อความลับ ๆ แค่ไหนก็ไม่เคยออกจากเครื่องของคุณ

ถ: รองรับ syntax ของ Pug ส่วนไหนบ้าง?

ตอบ: tags ที่ใช้ shorthand #id กับ .class, attribute ในวงเล็บ, block expansion ด้วยโคลอน, piped text, comment ทั้ง // และ //- และการประกาศ doctype — คือ syntax แกนหลักที่ครอบคลุม template ในโลกจริงเกือบทั้งหมด

ถ: แปลงย้อนกลับจาก HTML เป็น Pug ได้ไหม?

ตอบ: เครื่องมือตัวนี้ทำทางเดียวจาก Pug ไป HTML ครับ ถ้าต้องการทางกลับ ให้ใช้ HTML to Pug Converter ตัวร่วมตระกูล ที่จัด indentation ให้ markup กลับไปอยู่ในรูป Pug

ถ: template ล้มเหลวด้วย indentation error ควรแก้ยังไง?

ตอบ: เกือบทั้งหมดมาจากการผสม tab กับช่องว่าง หรือความกว้าง indent ไม่สม่ำเสมอตรงกลางไฟล์ จัด whitespace ให้เป็นระเบียบแล้ววางใหม่ก็จบ

ถ: มีขีดจำกัดขนาด template ไหม?

ตอบ: ไม่มีขีดจำกัดตายตัวครับ ทุกอย่างรันในเครื่อง เพดานจริง ๆ คือปริมาณที่แท็บเบราว์เซอร์ของคุณรับไหว ซึ่งไปไกลกว่า template หน้าเว็บทั่วไปอยู่แล้ว