Chuyển Đổi HTML sang Markdown

Chuyển Đổi HTML sang Markdown là gì?

Chuyển đổi HTML sang Markdown là quá trình biến đổi mã đánh dấu HTML thành Markdown — cú pháp định dạng văn bản thuần nhẹ do John Gruber tạo ra năm 2004. Markdown được thiết kế để có thể đọc được mà không cần render. Trong khi HTML yêu cầu thẻ mở và đóng như <strong> và <a href="">, Markdown sử dụng ký tự viết tắt: **in đậm**, [liên kết](url) và # tiêu đề. Chuyển đổi HTML sang Markdown tạo ra các tệp dễ đọc, dễ chỉnh sửa và dễ quản lý phiên bản hơn so với HTML thô.

Quá trình chuyển đổi ánh xạ các phần tử HTML sang các tương đương Markdown. Thẻ <h2> trở thành ##, cặp <ul><li> trở thành - mục, và thẻ <a> trở thành [văn bản](url). Một số phần tử HTML không có tương đương trực tiếp trong Markdown, chẳng hạn <div>, <span> hay các thuộc tính dữ liệu tùy chỉnh. Tùy theo cấu hình, các công cụ chuyển đổi thường loại bỏ các thẻ này hoặc giữ nguyên chúng dưới dạng HTML thô.

Markdown đã trở thành định dạng viết tài liệu tiêu chuẩn cho các nền tảng lập trình (GitHub, GitLab, Bitbucket), các công cụ tạo trang tĩnh (Hugo, Jekyll, Astro), ứng dụng ghi chú (Obsidian, Notion) và blog kỹ thuật. Chuyển đổi nội dung HTML hiện có sang Markdown là bước phổ biến khi di chuyển website, nhập nội dung từ CMS hoặc lưu trữ trang web ở định dạng linh hoạt. Không giống HTML, các tệp Markdown tạo ra diff gọn gàng trong hệ thống quản lý phiên bản, giúp việc xem xét thay đổi tài liệu trong code review trở nên thực tiễn hơn.

Tại Sao Dùng Công Cụ Chuyển Đổi HTML sang Markdown?

Tự viết lại HTML thành Markdown thủ công vừa chậm vừa dễ mắc lỗi, đặc biệt với các trang có danh sách lồng nhau, bảng biểu hoặc hàng chục liên kết. Công cụ chuyển đổi tự động xử lý toàn bộ cấu trúc ánh xạ một cách tức thì và nhất quán.

Các Trường Hợp Sử Dụng Chuyển Đổi HTML sang Markdown

Bảng Tham Chiếu Phần Tử HTML sang Markdown

Bảng dưới đây cho thấy cách các phần tử HTML phổ biến được ánh xạ sang tương đương Markdown. Ánh xạ này tuân theo quy ước GitHub-Flavored Markdown (GFM), mở rộng đặc tả CommonMark với bảng biểu, gạch ngang và danh sách task. Các phần tử không liệt kê ở đây (như <div>, <form> hay web component tùy chỉnh) không có tương đương Markdown và sẽ bị loại bỏ hoặc giữ nguyên dưới dạng HTML thô.

Các Biến Thể Markdown: GFM, CommonMark và Bản Gốc

Không phải tất cả Markdown đều giống nhau. Định dạng đầu ra quan trọng vì các nền tảng khác nhau phân tích cú pháp Markdown theo cách khác nhau. Ba biến thể phổ biến nhất là GitHub-Flavored Markdown (GFM), CommonMark và Markdown gốc của Gruber.

Ví Dụ Code

Các ví dụ thực tế trong JavaScript (Turndown), Python (markdownify và html2text), Go và Pandoc trên dòng lệnh.

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

Câu Hỏi Thường Gặp