ตัวแสดงตัวอย่าง Markdown คืออะไร?
Markdown คือไวยากรณ์การจัดรูปแบบแบบเบาที่ใช้ในไฟล์ README บทความบล็อก ข้อความแชท เอกสารประกอบ และอีกมากมายเมื่อคุณต้องการการจัดรูปแบบที่เรียบง่ายและอ่านง่ายโดยไม่ต้องเขียน HTML โดยตรง เนื่องจาก Markdown เป็นข้อความธรรมดา จึงเขียนได้ง่ายทุกที่ แต่ก็อาจเขียนไวยากรณ์ผิดเล็กน้อยโดยไม่สังเกตเห็นจนกว่าจะเผยแพร่แล้ว
เครื่องมือนี้จะแสดงผล Markdown ของคุณขณะพิมพ์เคียงคู่กับโค้ดต้นฉบับ เพื่อให้คุณสามารถจับข้อผิดพลาดการจัดรูปแบบได้ทันที — เช่น เว้นวรรคหลัง # ไม่ถูกต้อง โค้ดบล็อกไม่ได้ปิด หรือรายการไม่ได้แยกจากย่อหน้าด้านบน — ก่อนที่จะคอมมิต README เผยแพร่บทความ หรือส่งข้อความที่จัดรูปแบบ
เมื่อไหร่ควรใช้เครื่องคำนวณนี้
- เขียน README ของ GitHub หรือ GitLab และต้องการตรวจสอบการจัดรูปแบบก่อน commit
- ร่างโพสต์ Markdown สำหรับแพลตฟอร์มบล็อก เว็บไซต์เอกสาร หรือวิกิ
- ตรวจสอบว่าอีเมลหรือข้อความแชทใน Markdown แสดงผลถูกต้องก่อนส่ง
- เรียนรู้ Markdown syntax โดยทดลองกับการจัดรูปแบบต่างๆ และเห็นผลทันที
- แปลงโค้ด Markdown สั้นๆ เป็น HTML เพื่อวางใน CMS หรือเทมเพลตอีเมล
- ดีบักเอกสาร Markdown ที่การจัดรูปแบบบางส่วนไม่แสดงผลตามที่คาดไว้
ขั้นตอน:
- พิมพ์หรือวาง Markdown ของคุณลงในแผงด้านซ้าย
- ดูตัวอย่าง HTML ที่แสดงผลอัปเดตทันทีทางด้านขวา
- ปรับไวยากรณ์ของคุณจนกว่าตัวอย่างจะตรงกับที่คุณตั้งใจไว้
- คัดลอกต้นฉบับ Markdown ที่เสร็จสมบูรณ์แล้วเมื่อคุณพอใจกับผลลัพธ์
สูตร
# หัวข้อ →
หัวข้อ
**ตัวหนา** → ตัวหนา *ตัวเอียง* → ตัวเอียง `โค้ด` →โค้ด
[ข้อความ](url) → ข้อความ
- รายการ → - รายการ
กรณีใช้งาน
- ดูตัวอย่าง README ของ GitHub หรือ GitLab ก่อนคอมมิต
- ร่างข้อความที่จัดรูปแบบสำหรับ Slack, Discord หรือแอปแชทอื่นๆ ที่รองรับ Markdown
- ตรวจสอบการจัดรูปแบบบทความบล็อกหรือเอกสารประกอบก่อนเผยแพร่
- เรียนรู้ไวยากรณ์ Markdown ด้วยการทดลองและเห็นผลลัพธ์ทันที
- แปลงข้อความ Markdown สั้นๆ เป็น HTML อย่างรวดเร็วเพื่อนำไปวางที่อื่น
ประโยชน์หลัก
- ดู Markdown ของคุณแสดงผลทันที เคียงข้างกับต้นฉบับ
- จับข้อผิดพลาดด้านไวยากรณ์ก่อนเผยแพร่ที่ใดก็ตาม
- ทำงานแบบออฟไลน์ทั้งหมดในเบราว์เซอร์ของคุณ — ไม่มีการอัปโหลดใดๆ
- ใช้งานฟรี ไม่ต้องสมัครสมาชิก ไม่จำกัดขนาดไฟล์สำหรับการใช้งานทั่วไป
เคล็ดลับ
- เพิ่มบรรทัดว่างก่อนและหลังรายการและบล็อกโค้ดเพื่อการแสดงผลที่น่าเชื่อถือที่สุดในตัวแปล Markdown ต่างๆ
- ใช้เครื่องหมายดอกจันคู่สำหรับตัวหนาและดอกจันเดี่ยว (หรือขีดล่าง) สำหรับตัวเอียงเพื่อหลีกเลี่ยงความกำกวม
- ดูตัวอย่างในเครื่องมือนี้ก่อน จากนั้นตรวจสอบบนแพลตฟอร์มเป้าหมาย (GitHub, Slack ฯลฯ) เนื่องจากบางแพลตฟอร์มรองรับไวยากรณ์เพิ่มเติมเช่นตาราง
- รักษาลำดับหัวข้อให้ต่อเนื่อง (อย่าข้ามจาก # ไปยัง ###) เพื่อโครงสร้างเอกสารและการเข้าถึงที่ดีขึ้น
ข้อผิดพลาดที่พบบ่อย
- ลืมบรรทัดว่างที่จำเป็นระหว่างย่อหน้ากับรายการที่ตามมา
- ขาดช่องว่างหลังสัญลักษณ์ # ในหัวข้อ ซึ่งทำให้ไม่แสดงผลถูกต้อง
- ปล่อยให้รั้วโค้ด (```) ไม่ถูกปิด ซึ่งทำให้เนื้อหาที่เหลือทั้งหมดถูกกลืนกลายเป็นโค้ด
- ใช้เครื่องหมายดอกจันเดี่ยวสำหรับตัวหนาแทนที่จะเป็นดอกจันคู่ ทำให้กลายเป็นตัวเอียงแทน
คำศัพท์สำคัญ
- CommonMark: ข้อกำหนดมาตรฐานของไวยากรณ์ Markdown ที่ออกแบบมาเพื่อลดความไม่สอดคล้องกัน
- GFM: GitHub-Flavored Markdown รูปแบบขยายที่รองรับตารางและรายการงาน
- รั้วโค้ด (Code fence): บล็อกที่คั่นด้วยเครื่องหมายแบ็กทิกสามตัว (```) ใช้จัดรูปแบบโค้ดหลายบรรทัด
- การจัดรูปแบบในบรรทัด (Inline formatting): การจัดรูปแบบที่ใช้ภายในบรรทัดเดียว เช่น *ตัวเอียง* หรือ `โค้ด` ตรงข้ามกับองค์ประกอบระดับบล็อก
แนวคิดที่เกี่ยวข้อง
- ตัวจัดรูปแบบ JSON:
- ตัวทดสอบ Regex:
- ตัวสร้างรหัสผ่าน:
- ตัวแปลงสี:
- ตัวเขียน/ถอดรหัส URL:
ตัวอย่าง
การพิมพ์ "## สวัสดี
นี่คือ **ตัวหนา** และนี่คือ *ตัวเอียง*." จะแสดงผลเป็นหัวข้อระดับ 2 ตามด้วยย่อหน้าที่มีข้อความตัวหนาและตัวเอียง
การตีความผลลัพธ์
แผงด้านซ้ายแสดงข้อความต้นฉบับ Markdown ดิบของคุณ และแผงด้านขวาแสดงผลเป็น HTML ที่จัดรูปแบบแล้วแบบเรียลไทม์ ทุกครั้งที่คุณพิมพ์ ตัวอย่างจะอัปเดตทันที เพื่อให้คุณเห็นผลขององค์ประกอบไวยากรณ์แต่ละตัวได้ทันที
ปัญหาการแสดงผลทั่วไปมักเกิดจากการเว้นวรรค ตัวแสดงผลส่วนใหญ่ต้องการบรรทัดว่างระหว่างย่อหน้ากับรายการที่ตามมา หัวข้อต้องการช่องว่างหลังสัญลักษณ์ # เส้นกั้นโค้ด (```) ต้องอยู่ในบรรทัดของตัวเองเพื่อให้แสดงผลเป็นบล็อกโค้ด
ตัวอย่างนี้ใกล้เคียงกับวิธีที่ Markdown ของคุณจะปรากฏบนแพลตฟอร์มส่วนใหญ่ (GitHub, Slack, Discord ฯลฯ) แต่แต่ละแพลตฟอร์มมีตัวแสดงผลของตัวเองที่แตกต่างกันเล็กน้อย ควรตรวจสอบขั้นสุดท้ายบนแพลตฟอร์มเป้าหมายเสมอสำหรับสิ่งใดก็ตามที่เกินกว่าการจัดรูปแบบพื้นฐาน