Công cụ chuyển HTML sang Markdown — Chuyển HTML sang Markdown trực tuyến _

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

HTML là dạng markup được kết xuất mà trình duyệt hiển thị — <h1>, <ul>, <table>, <a> và phần còn lại. Markdown là định dạng văn bản thuần nhẹ sử dụng dấu câu tối thiểu (# cho tiêu đề, * cho nhấn mạnh, - cho mục danh sách) để mã hóa cùng cấu trúc đó. GitHub Flavored Markdown (GFM) mở rộng đặc tả CommonMark gốc với bảng, gạch ngang, danh sách công việc và autolinks. Chuyển HTML sang Markdown kéo HTML đã kết xuất hoặc xuất khẩu trở lại Markdown văn bản thuần có thể chỉnh sửa — chính xác là thứ cần thiết cho một đợt content migration khỏi CMS, hay một lần dọn dẹp README.

Công cụ đầu ra hỗ trợ những tính năng nào của GitHub Flavored Markdown?

Trình phân tích turndown@7.2.0 đi kèm với extension turndown-plugin-gfm phát ra toàn bộ superset GFM từ HTML của bạn: tiêu đề kiểu ATX từ # đến ###### từ <h1>–<h6>, danh sách có thứ tự và không thứ tự có lồng nhau, in đậm **text** và in nghiêng *text*, gạch ngang ~~text~~ từ <del>, liên kết nội tuyến [text](url) và ảnh nội tuyến ![alt](src), khối code fenced với gợi ý ngôn ngữ (```js), inline code spans `code`, bảng pipe từ <table>, GFM task lists - [ ] / - [x] từ checkbox inputs, blockquotes > và đường ngang ---. Khung xem trước kết xuất lại Markdown phát ra bằng marked@12.0.2 để bạn có thể xác nhận kết quả chuyển đổi trực quan.

Chuyển đổi HTML sang Markdown hoạt động như thế nào?

Mỗi lần chuyển đổi đều chạy cục bộ trong trình duyệt của bạn bằng ba thư viện đi kèm — không CDN, không fetch, không telemetry. Các bước ở mức cao là:

1. Làm sạch: HTML được dán trước tiên chạy qua DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) để loại bỏ các phần tử <script>, mọi event handler on* và URI javascript: trước khi bất cứ thứ gì duyệt qua markup. DOMPurify là cùng bộ làm sạch XSS được Mozilla MDN, Atlassian và Microsoft 365 sử dụng.
2. Chuyển đổi: turndownService.turndown duyệt qua DOM đã được làm sạch và phát ra GitHub Flavored Markdown — tiêu đề trở thành tiền tố #, danh sách trở thành mục - / 1., <table> trở thành bảng pipe, và cứ thế. Markdown được ghi vào <textarea> đầu ra chỉ đọc qua value (không bao giờ qua innerHTML), nên nó vốn dĩ an toàn.
3. Kết xuất: Markdown phát ra được tái phân tích bởi marked.parse, được làm sạch lại qua DOMPurify, và gán cho innerHTML của khung xem trước để bạn có xác nhận trực quan rằng Markdown round-trips về đúng cấu trúc mong đợi. Chế độ trực tiếp debounce đầu vào 150 ms để đầu ra cập nhật khi bạn dán mà không làm parser quá tải.

Vì sao chuyển HTML sang Markdown bằng công cụ này?

• Quyền riêng tư: mọi lần sanitize, chuyển đổi và render đều xảy ra trong trình duyệt của bạn. HTML — bao gồm bài viết CMS xuất khẩu, tài liệu nội bộ và nội dung page source bí mật — không bao giờ đến máy chủ của chúng tôi.
• An toàn XSS theo mặc định: HTML được dán chạy qua DOMPurify trước khi turndown duyệt qua, và khung xem trước chạy HTML được kết xuất lại qua DOMPurify một lần nữa trước innerHTML, nên dán markup chứa thẻ <script> hoặc handler onerror= tạo ra một bản xem trước trơ và Markdown sạch.
• Đầy đủ GFM: các phần tử <table> chuyển đổi thành bảng pipe Markdown, <del> thành gạch ngang, và danh sách checkbox thành GFM task lists. Hầu hết các bộ chuyển đổi trực tuyến bỏ mất bảng trên đường HTML → Markdown — extension turndown-plugin-gfm đi kèm bảo tồn chúng.

Các ứng dụng phổ biến của chuyển đổi HTML sang Markdown là gì?

Chuyển HTML sang Markdown xuất hiện trong nhiều tình huống migration nội dung, tài liệu và lưu trữ:

• Migration CMS: xuất một bài WordPress hoặc Ghost dưới dạng HTML và chuyển sang Markdown để rebuild static-site bằng Hugo / Jekyll / 11ty / Astro. Kết quả chuyển đổi bảo toàn cấp tiêu đề, liên kết, danh sách và nhấn mạnh nội tuyến.
• Dọn dẹp README: dán HTML đã kết xuất của một trang wiki hoặc bài viết web và kéo về lại Markdown có thể chỉnh sửa cho project README hay trang tài liệu, thay vì gõ lại cấu trúc bằng tay.
• Lưu trữ và ghi chú: chụp một email HTML hoặc web clipping và chuyển sang Markdown để lưu trữ trong Obsidian, Notion hoặc knowledge base văn bản thuần — Markdown giữ nguyên tính diff-friendly và sống sót qua format churn.

Ví dụ chuyển đổi HTML sang Markdown trông như thế nào?

Dán <h2>Heading</h2><ul><li>a</li><li>b<ul><li>nested</li></ul></li></ul> tạo ra Markdown với ## Heading, một danh sách bullet lồng nhau và một khung xem trước được kết xuất lại thành cùng cấu trúc lồng. Dán một <table> với hàng tiêu đề và hai hàng dữ liệu tạo ra bảng pipe | col | col | tương đương — xác nhận kết quả chuyển đổi bảo toàn tiêu đề, danh sách và bảng.

Công cụ chuyển HTML sang Markdown này có chạy hoàn toàn trong trình duyệt của tôi không?

Có. Mọi lần sanitize, chuyển đổi và render chạy cục bộ dưới dạng JavaScript bên trong tab trình duyệt của bạn. Ba thư viện đi kèm — turndown@7.2.0 (cùng turndown-plugin-gfm@1.0.2), marked@12.0.2 và DOMPurify@3.1.7 — được phục vụ từ cùng origin với trang, nên không có phụ thuộc CDN, không có fetch, không có XMLHttpRequest, không có navigator.sendBeacon trên đầu vào. Công cụ cũng hoạt động ngoại tuyến khi trang đã được tải, vì đây là một gói HTML/CSS/JS tĩnh với các thư viện vendor được copy bên cạnh. Bài viết xuất khẩu, tài liệu nội bộ và page source bí mật vẫn ở trên thiết bị của bạn.

Khung xem trước được kết xuất có an toàn XSS không?

Có. Mọi chuỗi HTML được gán vào innerHTML đều đi qua DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) trước. DOMPurify là bộ làm sạch XSS mã nguồn mở do Cure53 duy trì; đây là cùng thư viện được Mozilla MDN, Atlassian và Microsoft 365 sử dụng để gia cố HTML do người dùng cung cấp. Profile html mặc định loại bỏ các phần tử <script>, mọi thuộc tính event handler on* (onerror, onclick, v.v.), các URI scheme javascript: bên trong href / src. Dán <img src=x onerror=alert(1)> tạo ra một bản xem trước nơi document.querySelector('#output-preview img[onerror]') trả về null và không có alert nào kích hoạt.

Bảng GFM có được chuyển đổi từ HTML không?

Có. Hướng HTML → Markdown sử dụng turndown-plugin-gfm, thêm một quy tắc turndown tùy chỉnh đi qua các nút <table> và phát ra pipe-table Markdown tương đương — một hàng tiêu đề, một hàng căn lề |---|---|, rồi các hàng dữ liệu. Hầu hết các bộ chuyển đổi trực tuyến đánh rơi bảng ở đường này; công cụ này bảo toàn chúng. Gạch ngang (<del>text</del> → ~~text~~) và danh sách công việc (<input type="checkbox"> → - [ ] / - [x]) chuyển đổi theo cùng cách.

HTML của tôi có chuyển đổi sạch không?

Với tập tính năng GFM chuẩn — tiêu đề h1 đến h6, danh sách có thứ tự và không thứ tự có lồng nhau, in đậm / in nghiêng / gạch ngang, liên kết nội tuyến, ảnh nội tuyến, khối code fenced với thẻ ngôn ngữ, inline code spans, bảng pipe, danh sách công việc, blockquotes, đường ngang và autolinks — kết quả chuyển đổi sạch và có thể dự đoán. Các trường hợp biên: chú thích HTML (<!-- ... -->) bị loại bỏ (Markdown không có cú pháp chú thích); inline styling và thuộc tính class bị loại bỏ vì Markdown không có tương đương; và các thẻ nội tuyến hiếm gặp như <sub> / <sup> được chuyển thành văn bản thuần. Đây là các hành vi turndown đã được ghi chép, không phải bug.

Có hỗ trợ tô màu cú pháp trong khối code fenced không?

Không trong v1. Khối code fenced được kết xuất với font monospace và nền nhẹ nhưng không có tô màu token theo từng ngôn ngữ. Thêm tô màu cú pháp sẽ yêu cầu bundle Prism hoặc highlight.js, mỗi cái thêm 15–40 KB cùng với tập tin grammar theo ngôn ngữ và một ma trận theme cần được căn chỉnh với bảng màu Workshop Terminal. Hiện tại bộ kết xuất tập trung vào tính đúng đắn và an toàn XSS; nếu có nhu cầu của người dùng về tô màu nội tuyến, một toggle opt-in là follow-up khả thi.

Công cụ chuyển HTML sang Markdown này đi kèm turndown@7.2.0 (+ turndown-plugin-gfm@1.0.2), marked@12.0.2 và DOMPurify@3.1.7 được bundle ở cùng origin, phát ra toàn bộ tập tính năng GFM và làm sạch mọi chuỗi HTML được kết xuất trước khi nó chạm vào DOM. Không tải lên, không CDN, không telemetry — mọi byte đều ở trong trình duyệt của bạn.