เครื่องแปลง HTML เป็น Markdown

การย้ายบทความจาก WordPress ไปยัง Hugo การจัดเก็บหน้าใน Confluence เป็นโน้ต หรือการปรับปรุงอีเมลที่ใช้ข้อความแบบริชเท็กซ์สำหรับวิกิเอกสาร ล้วนหมายถึงการแปลงข้อมูลจาก HTML เป็น Markdown โปรแกรมแปลงนี้จะจับคู่หัวเรื่อง ย่อหน้า รายการ ลิงก์ รูปภาพ และบล็อกโค้ดกับรูปแบบ Markdown ที่เทียบเท่ากัน เพื่อให้เนื้อหายังคงมีโครงสร้างเดิมโดยไม่มีความยุ่งยากจาก HTML

วิธีแปลง HTML เป็น Markdown

  1. 1

    วาง HTML

    ไม่ว่าจะเป็นหน้าเต็ม เนื้อหาอีเมลแบบ rich text หรือข้อความสั้น ๆ ก็ตาม ทั้งหมดจะถูกวิเคราะห์

  2. 2

    แปลง

    หัวเรื่อง ย่อหน้า รายการ ลิงก์ รูปภาพ และบล็อกโค้ดจะถูกแปลงเป็น Markdown

  3. 3

    คัดลอก Markdown

    นำผลลัพธ์ไปวางใน Obsidian, Hugo, Jekyll, Notion หรือที่เก็บ Git

แปลง HTML เป็น Markdown

ตัวแปลงจะเดินไปตามโครงสร้าง DOM และสร้าง Markdown สำหรับแต่ละองค์ประกอบที่รู้จัก แท็กห่อหุ้มเช่น <div>, <span>, <section> และ <article> จะถูกตัดออก และเนื้อหาภายในจะถูกเก็บไว้ที่ระดับการซ้อนที่ถูกต้อง

การจับคู่องค์ประกอบ

HTML ผลลัพธ์ Markdown
<h1> ถึง <h6> หัวเรื่อง # ถึง ######
<strong>, <b> **text**
<em>, <i> *text*
<code> แบบอินไลน์ `text`
<pre><code> บล็อกล้อมด้วยแบ็กทิกสามตัว พร้อมระบุภาษาหากตั้งค่าไว้
<a href> [text](url)
<img src alt> ![alt](src)
<ul><li> - item
<ol><li> 1. item
<blockquote> > quote
<hr> ---

สิ่งที่เกิดขึ้นกับส่วนที่เหลือ

Markdown ไม่สามารถแสดงทุกองค์ประกอบของ HTML ได้ แท็กที่ไม่มีรูปแบบเทียบเท่าใน Markdown จะถูกตัดออก และเหลือไว้เพียงเนื้อหาข้อความเท่านั้น:

  • <table>: ข้อความในเซลล์ยังคงอยู่ แต่โครงสร้างตารางจะหายไป ใช้ตัวแปลงที่รองรับตารางเมื่อโครงสร้างมีความสำคัญ
  • <del>, <u> และสไตล์อินไลน์อื่น ๆ: ข้อความยังคงอยู่ แต่รูปแบบการจัดแต่งจะหายไป
  • <video>, <audio>, <iframe>: องค์ประกอบที่ฝังเหล่านี้ไม่ให้ผลลัพธ์ที่แสดงใน Markdown ได้
  • <details> / <summary>: ข้อความภายในยังคงอยู่ แต่วิดเจ็ตแบบเปิด-ปิดจะหายไป

สำหรับการแปลงไป-กลับแบบไม่สูญเสียข้อมูล ควรแปลงจากไฟล์ Markdown ต้นฉบับ แทนที่จะแปลงจาก HTML ที่แสดงผลแล้ว

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

ตัวห่อ <div> และ <span> แบบธรรมดาจะถูกตัดออก และเนื้อหาภายในจะถูกแสดงที่ระดับการซ้อนที่ถูกต้อง ส่วน div ที่ใช้เพื่อการจัดวางเท่านั้นจะมองไม่เห็นใน Markdown ซึ่งโดยทั่วไปก็คือสิ่งที่คุณต้องการสำหรับเอกสาร

ใช่ <pre><code class="language-js"> จะกลายเป็นบล็อกแบบล้อมกรอบ โดยใช้ js เป็นคำใบ้ภาษา ส่วนบล็อกโค้ดแบบเยื้องที่ไม่มีภาษากำกับจะกลับไปเป็นบล็อกแบบล้อมกรอบธรรมดา

ข้อความในเซลล์ของ <table> ยังคงอยู่ แต่โครงสร้างตารางเองจะหายไป: แถวและคอลัมน์ไม่ได้รับการเก็บรักษาไว้ โปรดใช้ตัวแปลงที่รองรับตารางเมื่อโครงสร้างมีความสำคัญ

เกือบทั้งหมด แต่การจัดรูปแบบที่ละเอียดอ่อน เช่น ลิงก์แบบอ้างอิง การขึ้นบรรทัดใหม่แบบบังคับด้วยช่องว่างสองตัวท้ายบรรทัด และเครื่องหมายเน้นข้อความแบบอื่น อาจถูกปรับให้เป็นมาตรฐานได้ หากต้องการแปลงไป-กลับโดยไม่สูญเสียข้อมูล ควรเก็บ Markdown ฉบับเดิมไว้

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

ตารางอ้างอิง ASCII

ตาราง ASCII ครบตั้งแต่ 0 ถึง 127 พร้อมค่าเลขฐานสิบ ฐานสิบหก ฐานแปด ฐานสอง และรูปแบบการอ้างอิงอักขระแบบตัวเลขของ HTML รวม NUL, LF และ DEL

อ้างอิงตัวอักษร HTML

รายการที่สามารถค้นหาได้ขององค์ประกอบ HTML พร้อมรหัสชื่อและรหัสตัวเลข รวมถึงฟังก์ชันสำเนาด้วยคลิกเดียวสำหรับตัวอักษรพิเศษและสัญลักษณ์ต่างๆ

ตารางอ้างอิงแป้นพิมพ์ลัด

ค้นหาแป้นพิมพ์ลัดเริ่มต้นตามเอกสารของ VS Code, Chrome และ Bash ที่ใช้ GNU Readline บน macOS, Windows และ Linux

ตัวตรวจสอบอีเมล

ตรวจสอบที่อยู่อีเมล: ตรวจไวยากรณ์ RFC 5322 ค้นหา MX เรกคอร์ดแบบเรียลไทม์ พร้อมรายละเอียดส่วนท้องถิ่น โดเมน และความยาว ไม่มีการส่งอีเมลใด ๆ

เครื่องสร้างตัวอักษรสุ่ม

สร้างตัวอักษร A-Z แบบสุ่ม เลือกจำนวน ตัวพิมพ์ใหญ่ ตัวพิมพ์เล็ก หรือแบบผสม แล้วใช้กับเกม โจทย์ หรือกิจกรรมในห้องเรียน

เครื่องมือสร้าง EditorConfig

สร้างไฟล์ .editorconfig ด้วยกฎสไตล์และขนาดการเยื้อง การจบบรรทัด ชุดอักขระ และช่องว่างของคุณ เพื่อให้การจัดรูปแบบสอดคล้องกันในทุก IDE และโปรแกรมแก้ไข

เครื่องมือนี้มีให้บริการในภาษาอื่น