พิมพ์ข้อความสะดวกสวยงามด้วย Markdown

ก่อนอื่นขออธิบายคำศัพท์บางอย่าง

  • HTML - เรียกง่าย ๆ ก็คือภาษาที่ใช้เขียนหน้าเว็บ มีลักษณะเป็น "Markup Language" คือถ้าต้องการทำอะไรกับข้อความก็หาอะไรพิเศษไปครอบไว้ ตัวอย่างเช่นจะทำอักษรตัวหนา (Strong) ก็ครอบข้อความด้วยคำสั่ง strong จาก <strong>หนา</strong> ก็จะกลายเป็น หนา
  • WYSIWYG Editor - หรือตัวช่วยพิมพ์แบบ What You See Is What You Get คือโปรแกรมเล็ก ๆ ฝังในหน้าเว็บที่ช่วยใส่คำสั่ง HTML กับข้อความให้เราอย่างเนียน ๆ โดยที่เราไม่ต้องพิมพ์คำสั่งเอง แต่กดปุ่มเอา ดูผลลัพธ์ได้ขณะที่พิมพ์ หน้าตาประมาณข้างล่างนี้ (ของ wordpress.com) ของแต่ละที่ก็อาจจะมีลูกเล่นต่างกันไป

WYSIWYG

ประเด็นก็คือ เวลาที่เราพิมพ์อะไรยาว ๆ เพื่อโพสต์ออนไลน์ แล้วกลัวว่าพิมพ์ ๆ อยู่จะเกิดปัญหาเครื่องดับ เน็ตหลุด ทำให้มันหาย เราก็ต้องหาอะไรมาพิมพ์เก็บไว้ก่อน จะพิมพ์ใส่ Notepad มันก็ได้แต่ข้อความโล้น ๆ ไม่มีตัวหนาตัวเอียง จะพิมพ์ใส่ Word (WYSIWYG เช่นกัน) แล้วเวลาก๊อบมาใส่ตัว WYSIWYG ในหน้าเว็บมันก็อาจจะไม่ได้อย่างใจ ต้องมานั่งแก้ใหม่ วันนี้มีทางออกมาเสนอ นั่นคือการพิมพ์แบบ Markdown

Markdown เป็นรูปแบบ (syntax) การพิมพ์แบบที่ประนีประนอมความเป็นข้อความโล้น ๆ กับการจัดแบบอักษรเข้าด้วยกัน (พูดอีกอย่างหนึ่ง คือเป็น Markup ที่จำง่าย ใกล้สามัญสำนึกกว่า HTML) ดูตัวอย่างก่อนดีกว่า

ถ้าพิมพ์ **หนา** ก็จะได้ หนา

ถ้าพิมพ์ _เอียง_ ก็จะได้ เอียง

ถ้าพิมพ์

- รายการ 1 - รายการ 2 - รายการ 3

ก็จะได้

  • รายการ 1
  • รายการ 2
  • รายการ 3

การทำงานของมันก็คือ เราก็พิมพ์ข้อความไปตามรูปแบบ Markdown นี่ แล้วเวลาจะแสดงผลในหน้าเว็บก็ติดตั้งส่วนเสริมของเว็บไซต์ให้แปลงรูปแบบข้อความ Markdown เป็น HTML (ต่างจากพวก WYSIWYG ที่เก็บข้อมูลเป็น HTML ไว้เลย) ซึ่งส่วนเสริมนี้ก็มีอยู่ในตัวช่วยจัดการเว็บไซต์ยอดนิยมอย่าง Drupal และ Wordpress อยู่แล้ว (จะเอาตัวแปลง Markdown ไปเชื่อมกับเว็บแบบอื่น ๆ ก็ไม่ยากเลย)

ข้อดีของมันก็คือ ในข้อมูลดิบก่อนการแสดงผลที่เป็นข้อความโล้น ๆ เนี่ย มันก็มีการเน้นแบบอักษรบ้างอยู่แล้ว คือแม้จะไม่มีตัวแปลง Markdown ก็ยังอ่านรู้ความว่าคนพิมพ์ต้องการจัดรูปแบบอะไรตรงไหน และยังแก้ไข คัดลอก เผยแพร่ ง่ายกว่าแบบ WYSIWYG ที่พอเกิดความผิดพลาดอาจจะแก้ได้ยากกว่า ความสามารถบางอย่างพวกเชิงอรรถ1 ผมว่า Markdown นี่ง่ายกว่าด้วยซ้ำ บล็อกนี้ก็ใช้ Markdown

หากอยากลองก่อน ก็ลองได้ที่นี่ ชาว Drupal และ Wordpress ก็ไปโหลดส่วนเสริมกันมาได้ตามสะดวก


  1. ตัวอย่างเชิงอรรถ แค่พิมพ์ [^1] ตรงที่อ้างถึง กับที่อธิบาย สองที่ก็เสร็จแล้ว ↩︎