Bộ chuyển đổi Markdown sang HTML — Chuyển Markdown sang HTML trực tuyến _

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

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 văn bản có 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. HTML là dạng được kết xuất mà trình duyệt hiển thị. Chuyển Markdown sang HTML cho phép bạn soạn thảo bằng cú pháp nhẹ và phát hành tới một bề mặt được kết xuất — một README, trang static-site hay phần thân email — mà không cần viết tay các thẻ.

Các tính năng nào của GitHub Flavored Markdown được hỗ trợ?

Trình phân tích marked@12.0.2 đi kèm hỗ trợ toàn bộ superset GFM: tiêu đề kiểu ATX từ # đến ######, 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~~, liên kết nội tuyến [text](url) và ảnh nội tuyến ![alt](src), khối code fenced với thẻ ngôn ngữ tùy chọn (```js), inline code spans `code`, bảng pipe có hàng tiêu đề, danh sách công việc GFM - [ ] / - [x], blockquotes >, đường ngang --- và autolinks. Mỗi tính năng hiển thị trong khung xem trước giống hệt cách GitHub kết xuất.

Chuyển đổi Markdown sang HTML 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 hai thư viện đi kèm — không CDN, không fetch, không telemetry. Các bước ở mức cao là:

1. Phân tích: marked.parse(source) đọc Markdown của bạn và tạo ra một chuỗi HTML. Trình phân tích chạy ở chế độ GFM, do đó bảng, danh sách công việc, gạch ngang và autolinks đều được nhận diện.
2. Làm sạch: kết quả HTML được chạy qua DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) trước khi gán cho innerHTML. DOMPurify là cùng bộ làm sạch XSS được Mozilla MDN, Atlassian và Microsoft 365 sử dụng — nó phân tích HTML, đi qua DOM và loại bỏ các phần tử <script>, mọi thuộc tính event handler on* và các URI scheme javascript:.
3. Kết xuất: HTML đã làm sạch được ghi vào khung xem trước qua innerHTML, và HTML thô được hiển thị trong tab thứ hai qua <textarea> chỉ đọc để bạn có thể copy markup. Chế độ trực tiếp debounce đầu vào 150 ms để bản xem trước cập nhật khi bạn gõ mà không làm parser quá tải.

Vì sao nên dùng công cụ này để chuyển Markdown sang HTML?

• Quyền riêng tư: mọi lần parse, sanitize và render đều xảy ra trong trình duyệt của bạn. Markdown — bao gồm bài blog chưa phát hành, bản nháp tài liệu nội bộ và nội dung README mật — không bao giờ đến máy chủ của chúng tôi.
• An toàn XSS theo mặc định: khung xem trước chạy mọi chuỗi HTML qua DOMPurify trước innerHTML, nên một thẻ <script> hoặc handler onerror= lạc vào HTML thô trong Markdown của bạn tạo ra bản xem trước trơ. Tab thô hiển thị kết quả chưa làm sạch để bạn kiểm tra nhưng nó nằm trong <textarea> qua value — không bao giờ được thực thi.
• GFM-đầy đủ: bảng, gạch ngang, danh sách công việc và autolinks đều kết xuất giống cách GitHub kết xuất chúng. Một bảng pipe Markdown trở thành <table> HTML với <thead> và <tbody> — không mất hàng, không mất cấu trúc.

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

Chuyển Markdown thành HTML xuất hiện trong tài liệu, công việc static-site và soạn email:

• Soạn README GitHub: viết một README dự án cục bộ dưới dạng Markdown và xem trước HTML đã kết xuất trước khi push. Bản xem trước khớp với bộ kết xuất GFM của GitHub cho bảng, danh sách công việc và fenced code.
• Nội dung static-site: dán một bài viết Markdown và lấy HTML cho trường CMS hoặc templating engine mong đợi markup thay vì Markdown nguồn.
• Mẫu email: viết phần thân của email giao dịch dưới dạng Markdown và chuyển sang HTML cho templating engine của nhà cung cấp dịch vụ email. Kết quả là HTML semantic thuần — không có inline styles, không có quirks của email client xen vào.

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

Dán # Title\n\n- item 1\n- item 2\n\n[link](https://example.com) tạo ra khung xem trước chứa <h1>Title</h1>, một danh sách không thứ tự gồm hai mục và một <a href="https://example.com">link</a>. Tab thô hiển thị chính xác chuỗi HTML để bạn có thể copy thẳng vào template. Một bảng pipe với hàng căn lề |---|---| trở thành <table> đầy đủ với <thead> và <tbody> — xác nhận bảng GFM kết xuất giống cách GitHub kết xuất.

Bộ chuyển đổi Markdown sang HTML 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 parse, sanitize và render chạy cục bộ dưới dạng JavaScript bên trong tab trình duyệt của bạn. Hai thư viện đi kèm — 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 chưa phát hành, tài liệu nội bộ và README 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 và các biểu thức CSS nguy hiểm đã biết. 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 hỗ trợ không?

Có. Hướng Markdown → HTML xử lý bảng pipe natively qua chế độ GFM của marked — một hàng tiêu đề ngăn cách bởi hàng căn lề |---|---|, theo sau bởi các hàng dữ liệu, tạo ra một <table> với <thead> + <tbody>. Gạch ngang (~~text~~ → <del>text</del>) và danh sách công việc (- [ ] / - [x] → <input type="checkbox">) kết xuất giống cách GitHub kết xuất chúng.

Markdown của tôi có chuyển đổi không mất mát 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ả HTML ổn định và khớp với bộ kết xuất của GitHub. Một số hành vi đáng biết: HTML nội tuyến thô trong Markdown (ví dụ <sub>text</sub>) đi qua nguyên vẹn đến đầu ra, và tiêu đề setext CommonMark (=== gạch dưới) và tiêu đề ATX (# Title) đều tạo ra cùng <h1>. Đây là các hành vi marked đã được tài liệu hóa, không phải bug. Nếu bạn cần chiều ngược lại, kéo HTML đã kết xuất trở lại Markdown, hãy dùng công cụ HTML sang Markdown.

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.

Bộ chuyển đổi Markdown sang HTML này đi kèm marked@12.0.2 và DOMPurify@3.1.7 được bundle ở cùng origin, hỗ trợ 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.