ข้ามไปยังเนื้อหาหลัก

แปลง Markdown เป็น HTML ฟรี

แปลง Markdown เป็น HTML ที่สะอาดพร้อมตัวอย่างสดๆ ใช้ source view คัดลอก HTML ที่พร้อมวางสำหรับบล็อก CMS หรือ template อีเมล

ใช้งานได้แบบออฟไลน์เมื่อโหลดแล้ว
HTML เอาต์พุตจะปรากฏที่นี่…

การใช้งานทั่วไป

  • เผยแพร่ Markdown ไปยัง CMSแปลงบันทึก Markdown เป็น HTML เพื่อวางไว้ใน CMS ที่ยอมรับเฉพาะ HTML
  • สร้างเนื้อหาอีเมล HTMLแปลง Markdown เป็น HTML สำหรับอีเมลธุรกรรมและจดหมายข่าว
  • ดูตัวอักษร README ในเครื่องวาง README.md ของคุณเพื่อดูวิธีการแสดงผลบน GitHub, GitLab หรือ npm
  • สร้างเนื้อหาหน้าสำหรับเว็บไซต์แบบคงที่แปลงเนื้อหา Markdown เป็น HTML สำหรับเว็บไซต์แบบคงที่ที่สร้างด้วยมือหรือหน้าครั้งเดียว
  • สร้างเอกสาร HTMLแปลงเอกสาร Markdown ภายในเป็น HTML สำหรับการฝังในแอป, ศูนย์ช่วยเหลือ หรือฐานความรู้

วิธีการทำงาน

การแปลงทำในเบราว์เซอร์ทั้งหมดโดยตัวแยกวิเคราะห์ Markdown ที่เขียนขึ้นเอง — ไม่มีไลบรารีภายนอก ไม่มีการร้องขอเซิร์ฟเวอร์ ตัวแยกวิเคราะห์ไล่ซอร์สทีละบรรทัด ใช้กฎระดับบล็อก (หัวเรื่อง รายการ ตาราง บล็อกโค้ด) แล้วรอบที่สองใช้รูปแบบ regex ในบรรทัดสำหรับตัวหนา ตัวเอียง ลิงก์ ภาพ และโค้ดในบรรทัด

  1. 1
    แยกวิเคราะห์โครงสร้างบล็อกก่อน
    ตัวแยกวิเคราะห์อ่าน Markdown ดิบทีละบรรทัด ระบุโครงสร้างระดับบล็อก: บล็อกโค้ด (พร้อมคลาสภาษาแบบเลือกได้) หัวเรื่อง ATX (# ถึง ######) blockquote รายการแบบมีลำดับและไม่มีลำดับ รวมถึงช่องทำเครื่องหมายรายการงาน GFM ตาราง GFM พร้อมการจัดแนวคอลัมน์ เส้นคั่นแนวนอน และย่อหน้าที่เชื่อมบรรทัดต่อเนื่องที่ตัดคำได้ถูกต้อง
  2. 2
    ใช้รูปแบบในบรรทัดภายในแต่ละบล็อก
    หลัง escape HTML ข้อความของแต่ละบล็อก ชุด regex ใน parseInline() จะแปลงไวยากรณ์ในบรรทัด: ภาพและลิงก์ (พร้อม whitelist สคีม URL ที่ตัด href แบบ javascript: และ data:) **ตัวหนา** *ตัวเอียง* ~~ขีดฆ่า~~ และโค้ดในบรรทัด — ตามลำดับความสำคัญนั้น
  3. 3
    ผลลัพธ์ HTML สดพร้อมสวิตช์ตัวอย่าง
    สตริง HTML คำนวณใหม่ผ่าน useMemo ทุกการกดแป้น แผงด้านขวาจึงอัปเดตทันที สวิตช์สลับระหว่างมุมมองซอร์ส HTML ดิบกับตัวอย่างที่เรนเดอร์ด้วยเอนจินจัดวางของเบราว์เซอร์เอง
  4. 4
    ตัวเลือกผลลัพธ์สามแบบ รวมการคัดลอกข้อความแบบมีรูปแบบ
    คุณคัดลอกมาร์กอัป HTML ดิบ ดาวน์โหลดไฟล์ .html สมบูรณ์พร้อม DOCTYPE และแท็ก meta charset หรือใช้ 'คัดลอกข้อความแบบมีรูปแบบ' — ซึ่งเขียนทั้ง MIME type text/html และ text/plain ลงคลิปบอร์ดผ่าน ClipboardItem ของ Clipboard API ผลลัพธ์ที่จัดรูปแบบจึงวางลงใน Gmail, Google Docs หรือ Word ได้โดยตรง

เครื่องมือที่เกี่ยวข้อง

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