ปิดโฆษณา

ตัวแปลง Markdown

ตัวแปลง Markdown

รองรับการแปลงสองทิศทางระหว่าง Markdown และ HTML พร้อมการแสดงผลตัวอย่างแบบเรียลไทม์ รองรับไวยากรณ์ขยาย GFM การไฮไลต์โค้ด สูตรคณิตศาสตร์ KaTeX และไดอะแกรม Mermaid เหมาะสำหรับการเขียนเอกสาร การเผยแพร่บล็อก และการสร้างข้อความที่มีรูปแบบสำหรับอีเมล

วิธีใช้งาน

🚀 เริ่มต้นอย่างรวดเร็ว

  • วางเนื้อหาลงในช่องอินพุตด้านซ้าย
  • เลือกโหมดการแปลง
  • ระบบจะแปลงอัตโนมัติและแสดงผลลัพธ์ทางด้านขวา
  • ตัวอย่าง/เอาต์พุต HTML: เมื่อแปลงจาก Markdown → HTML จะเรนเดอร์ KaTeX/Mermaid ให้อัตโนมัติ

📌 สถานการณ์การใช้งานทั่วไป

  • ดูตัวอย่างบล็อก/เอกสาร: ตรวจการเรนเดอร์ Markdown และสี/สไตล์
  • อีเมล HTML: ใช้ผล HTML ที่ได้เพื่อวางในเนื้อหาอีเมล
  • Rich text → Markdown: ทำความสะอาดเนื้อหาจากเว็บ/ CMS ให้กลายเป็น Markdown ที่จัดเก็บในเวอร์ชันคอนโทรลได้
  • เอกสารเทคนิค: เรนเดอร์สูตร/ไดอะแกรมและส่งออกในขั้นตอนเดียว
  • ย้าย editor: ปรับให้เข้ากันระหว่าง flavor ของ Markdown ที่ต่างกัน
  • Wiki/คลังความรู้: แปลงหน้า HTML เป็น Markdown เพื่อใช้ import
  • บันทึกการเปลี่ยนแปลง API: แปลงคำอธิบาย HTML ให้เป็น Markdown เพื่อรีวิว/ทำ PR

🎛️ พารามิเตอร์การแปลงและการเรนเดอร์

  • โหมด Markdown → HTML จะเรนเดอร์ KaTeX/Mermaid ให้อัตโนมัติ
  • โหมด HTML → Markdown จะรักษา/แปลงจากต้นฉบับ โดยไม่ render HTML ซ้ำ
  • เปิดใช้ GFM ตามค่าเริ่มต้น หากต้องการความเข้มงวดให้ใช้ Markdown มาตรฐาน
  • เปิด soft line break; หากต้องการพฤติกรรมเข้มงวดให้ใช้บรรทัดว่างหรือเว้นวรรคสองช่องท้ายบรรทัด
  • หากอินพุตยาวมาก ระบบอาจสลับไปใช้ตัวอย่างแบบลดรายละเอียด (จำกัดการเรนเดอร์/ปิดไฮไลต์)

🧭 คำแนะนำการใช้งาน

  • อีเมล: แนะนำให้ใช้ inline style เพื่อความเข้ากันได้กับไคลเอนต์ต่าง ๆ
  • ไฟล์ยาวมาก: แนะนำให้แบ่งแปลงทีละส่วนเพื่อลดอาการหน่วง

⚠️ ข้อจำกัดและความเข้ากันได้

  • flavor ของ Markdown ต่างกัน: การเรนเดอร์อาจไม่เหมือนกันในแต่ละแพลตฟอร์ม ควรใช้ไวยากรณ์ที่พบบ่อยเป็นหลัก
  • HTML → Markdown เป็นแบบ best‑effort: สไตล์/เลย์เอาต์บางส่วนอาจหายไป
  • HTML → Markdown จะละเว้นบางส่วนของ HTML
  • ตารางซ้อนกันหรือโครงสร้างซับซ้อนอาจถูกลดรูป แนะนำให้ตรวจทาน
  • รูปภาพ/วิดีโอที่อ้างอิงจากภายนอกจะยังคงเป็นลิงก์ ไม่ถูกดาวน์โหลด
  • ไดอะแกรม Mermaid ที่ render เป็น SVG จากภายนอกอาจไม่สามารถกู้ source กลับมาได้อย่างน่าเชื่อถือ

🔒 ความเป็นส่วนตัวและความปลอดภัย

  • การประมวลผลทั้งหมดเกิดขึ้นในเบราว์เซอร์ของคุณ ข้อมูลจะไม่ออกจากอุปกรณ์
  • จะไม่รันแท็ก <script> จาก HTML ที่วางเข้ามา
  • KaTeX/Mermaid จะเรนเดอร์ด้วยการตั้งค่าที่ปลอดภัย
  • ไม่ได้ sanitize HTML ให้อัตโนมัติทั้งหมด แนะนำให้ตรวจผลก่อน/หลังแปลงเสมอ

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

ตัวอย่างที่นี่แสดงผลต่างจากแพลตฟอร์มปลายทาง ควรตรวจสอบอย่างไร?

ให้ระบุให้ชัดว่าปลายทางใช้ flavor ไหน หลีกเลี่ยง HTML ดิบและส่วนขยายเฉพาะ แยกกรณีให้เล็กที่สุดแล้วทดลองบนแพลตฟอร์มปลายทางก่อนค่อยขยาย

ถ้าจะนำ HTML ที่ได้ไปใช้ใน production อย่างปลอดภัยควรทำอย่างไร?

เครื่องมือนี้ไม่รัน <script> แต่ก็ไม่ได้ sanitize ให้อัตโนมัติ ควร sanitize บนเซิร์ฟเวอร์/ขั้นตอน publish ด้วยไลบรารีแบบ whitelist ปิด on* handlers และ URI ที่อันตราย และตั้งค่า CSP สำหรับสคริปต์

เวลาแปลง HTML → Markdown โครงสร้างซับซ้อนเพี้ยน ทำอย่างไรดี?

ควรปรับต้นฉบับให้เป็น semantics ที่พกพาได้ เช่น แปลงตาราง/ลิสต์ซ้อนกันให้เรียบลง วางข้อความเป็น plain text เพื่อล้าง span/style/class ก่อน แล้วค่อยแปลงทีละกรณีเล็ก ๆ

ข้อจำกัดของ KaTeX/Mermaid และวิธีดีบัก?

ไวยากรณ์: KaTeX ใช้ $$…$$ หรือ inline $…$; Mermaid ใช้ fenced block แบบ ```mermaid อินพุตที่ยาวมากอาจถูกลดรายละเอียด แนะนำให้ลดความหนาแน่น แปลงทีละส่วน และสร้างตัวอย่างเล็ก ๆ เพื่อหาจุดผิด Syntax อีกทั้ง KaTeX ยังสามารถกู้จาก HTML ที่ render แล้วได้ แต่ Mermaid จะกู้ได้เฉพาะไดอะแกรมที่เครื่องมือนี้สร้างและฝัง source ไว้เท่านั้น