แปลง HTML เป็น Markdown

การแปลง HTML เป็น Markdown คืออะไร?

การแปลง HTML เป็น Markdown คือกระบวนการเปลี่ยน HTML markup ให้เป็น Markdown ซึ่งเป็นรูปแบบการจัดรูปแบบข้อความธรรมดาที่มีน้ำหนักเบา สร้างขึ้นโดย John Gruber ในปี 2004 Markdown ได้รับการออกแบบให้อ่านได้โดยไม่ต้องผ่านการเรนเดอร์ ในขณะที่ HTML ต้องใช้แท็กเปิดและปิด เช่น <strong> และ <a href=""> Markdown ใช้อักขระย่อ เช่น **ตัวหนา** [ลิงก์](url) และ # หัวข้อ การแปลง HTML เป็น Markdown ได้ไฟล์ที่อ่านง่าย แก้ไขง่าย และจัดการกับ version control ได้สะดวกกว่า HTML แบบดิบ

กระบวนการแปลงจะจับคู่องค์ประกอบ HTML กับรูปแบบ Markdown ที่สอดคล้องกัน เช่น <h2> กลายเป็น ## ส่วน <ul><li> กลายเป็น - รายการ และแท็ก <a> กลายเป็น [ข้อความ](url) องค์ประกอบ HTML บางส่วนไม่มีรูปแบบ Markdown ที่ตรงกัน เช่น <div>, <span> หรือ data attribute แบบกำหนดเอง โปรแกรมแปลงมักจะตัดแท็กเหล่านี้ออกหรือส่งผ่านเป็น HTML ดิบ ขึ้นอยู่กับการตั้งค่า

Markdown ได้กลายเป็นรูปแบบการเขียนมาตรฐานสำหรับเอกสารนักพัฒนา (GitHub, GitLab, Bitbucket), static site generator (Hugo, Jekyll, Astro), แอปจดบันทึก (Obsidian, Notion) และบล็อกเทคนิค การแปลงเนื้อหา HTML ที่มีอยู่เป็น Markdown เป็นขั้นตอนทั่วไปเมื่อย้ายเว็บไซต์ นำเข้าเนื้อหาจาก CMS หรือเก็บถาวรหน้าเว็บในรูปแบบพกพาได้ ต่างจาก HTML ตรงที่ไฟล์ Markdown สร้าง diff ที่สะอาดใน version control ทำให้การ code review การเปลี่ยนแปลงเอกสารเป็นเรื่องที่ทำได้จริง

ทำไมต้องใช้เครื่องมือแปลง HTML เป็น Markdown?

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

กรณีการใช้งานการแปลง HTML เป็น Markdown

ตารางอ้างอิงองค์ประกอบ HTML เป็น Markdown

ตารางด้านล่างแสดงการแมปองค์ประกอบ HTML ทั่วไปไปยังรูปแบบ Markdown ที่สอดคล้องกัน การแมปนี้ใช้ข้อกำหนด GitHub-Flavored Markdown (GFM) ซึ่งขยาย CommonMark spec ด้วยตาราง strikethrough และ task list องค์ประกอบที่ไม่ได้แสดงในที่นี้ (เช่น <div>, <form> หรือ web component แบบกำหนดเอง) ไม่มีรูปแบบ Markdown เทียบเท่าและจะถูกตัดออกหรือส่งผ่านเป็น HTML ดิบ

รูปแบบ Markdown: GFM vs CommonMark vs ต้นฉบับ

Markdown ไม่ได้มีรูปแบบเดียว รูปแบบเอาต์พุตมีความสำคัญเพราะแพลตฟอร์มต่างกันแยกวิเคราะห์ Markdown ต่างกัน รูปแบบที่พบบ่อยที่สุดสามแบบคือ GitHub-Flavored Markdown (GFM), CommonMark และ Markdown ต้นฉบับของ Gruber

ตัวอย่างโค้ด

ตัวอย่างการทำงานใน JavaScript (Turndown), Python (markdownify และ html2text), Go และ Pandoc บน command line

import TurndownService from 'turndown'

const turndown = new TurndownService({ headingStyle: 'atx' })
const html = '<h1>Title</h1><p>A <strong>bold</strong> paragraph.</p>'
const md = turndown.turndown(html)
console.log(md)
// → "# Title\n\nA **bold** paragraph."

from markdownify import markdownify

html = '<h2>Section</h2><ul><li>First</li><li>Second</li></ul>'
md = markdownify(html, heading_style='ATX')
print(md)
# → "## Section\n\n- First\n- Second"

import html2text

converter = html2text.HTML2Text()
converter.body_width = 0  # disable line wrapping

html = '<p>Visit <a href="https://example.com">Example</a> for details.</p>'
md = converter.handle(html)
print(md)
# → "Visit [Example](https://example.com) for details."

package main

import (
	"fmt"
	md "github.com/JohannesKaufmann/html-to-markdown"
)

func main() {
	converter := md.NewConverter("", true, nil)
	html := `<h3>Go Example</h3><p>Code: <code>fmt.Println()</code></p>`
	markdown, _ := converter.ConvertString(html)
	fmt.Println(markdown)
	// → "### Go Example\n\nCode: `fmt.Println()`"
}

# Convert an HTML file to Markdown
pandoc input.html -f html -t markdown -o output.md

# Pipe HTML from stdin
echo '<p>Hello <em>world</em></p>' | pandoc -f html -t markdown
# → Hello *world*

# Use GitHub-Flavored Markdown output
pandoc input.html -f html -t gfm -o output.md

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