Bộ chuyển đổi Markdown

Hỗ trợ chuyển đổi hai chiều giữa Markdown và HTML với hiển thị xem trước theo thời gian thực. Hỗ trợ cú pháp mở rộng GFM, làm nổi bật mã, công thức toán học KaTeX và sơ đồ Mermaid, phù hợp cho viết tài liệu, xuất bản blog và tạo văn bản định dạng cho email.

Hướng dẫn sử dụng

🚀 Bắt đầu nhanh

Dán nội dung vào ô nhập bên trái
Chọn chế độ chuyển đổi (→HTML hoặc →Markdown)
Nội dung sẽ được chuyển tự động, kết quả hiển thị ở khung bên phải
Xem trước/HTML output: Markdown → HTML sẽ render KaTeX/Mermaid theo mặc định

📌 Tình huống sử dụng phổ biến

Xem trước blog/tài liệu: nhanh chóng kiểm tra render Markdown và màu sắc.
Email: dán HTML đã xuất vào thân email (nên ưu tiên style inline).
Rich text → Markdown: làm sạch nội dung rich text từ web/CMS thành Markdown có thể version control.
Tài liệu kỹ thuật: render công thức/sơ đồ và xuất một lần.
Di chuyển editor: so khớp khác biệt giữa các flavor Markdown.
Wiki/Knowledge base: chuyển trang HTML sang Markdown để import.
API changelog: biến mô tả/HTML thành Markdown để review/PR.

🎛️ Tham số chuyển đổi & render

Markdown → HTML sẽ tự động render KaTeX/Mermaid.
HTML → Markdown giữ/khôi phục từ source; không render lại.
GFM (bảng/task list) được bật mặc định; nếu cần hành vi nghiêm ngặt hãy dùng Markdown chuẩn.
Đã bật soft line break; để nghiêm ngặt hãy dùng dòng trống hoặc hai khoảng trắng ở cuối dòng.
Với nội dung rất lớn, công cụ có thể tự chuyển sang chế độ xem trước suy giảm (giới hạn render/tắt highlight).

🧭 Gợi ý sử dụng

Email: ưu tiên dùng style inline để tương thích tốt hơn.
Tài liệu dài: nên chia nhỏ rồi chuyển từng phần để tránh lag.

⚠️ Giới hạn & khả năng tương thích

Flavour Markdown khác nhau: cách render có thể khác trên từng nền tảng; nên ưu tiên cú pháp chung.
HTML → Markdown là best‑effort: style/bố cục thường bị mất.
HTML → Markdown bỏ qua một số phần HTML (script/style/meta, embed/form, media, on* event, style/class, v.v.).
Bảng phức tạp/lồng nhau có thể bị giản lược; hãy kiểm tra lại.
Ảnh/video giữ nguyên link ngoài; không tải về.
Mermaid SVG do bên thứ ba render trước không thể phục hồi source một cách đáng tin cậy.

🔒 Quyền riêng tư & bảo mật

Toàn bộ xử lý diễn ra trong trình duyệt; dữ liệu của bạn không rời khỏi thiết bị.
Không thực thi thẻ <script> trong HTML được dán vào.
KaTeX/Mermaid được render với cấu hình an toàn.
Công cụ không tự sanitize toàn bộ HTML; hãy tự rà soát trước/sau khi chuyển đổi.

❓ Câu hỏi thường gặp

Preview khác với nền tảng đích — chẩn đoán thế nào?

Xác định flavour đích (CommonMark/GFM/custom). Tránh HTML thô và extension riêng. Dùng quy tắc xuống dòng chuẩn (dòng trống hoặc hai khoảng trắng cuối dòng). Rút gọn thành ví dụ nhỏ, xác minh trên nền tảng đích rồi mở rộng lại.

Làm sao xuất HTML an toàn lên production?

Công cụ không chạy <script>, nhưng cũng không tự sanitize. Hãy sanitize ở server/pipeline xuất bản bằng thư viện allow‑list (ví dụ DOMPurify), chặn handler on* và URI nguy hiểm, đồng thời thiết lập CSP cho script ngoài/inline.

HTML → Markdown làm méo cấu trúc phức tạp — nên xử lý ra sao?

Ưu tiên semantics có thể mang đi: chuyển bảng/lists lồng nhau thành bảng '|' và list phẳng; dán dạng plain text để bỏ span/style/class trước khi convert; tách một ví dụ nhỏ và chỉnh ngay trên source.

Giới hạn và cách xử lý lỗi KaTeX/Mermaid?

Cú pháp: KaTeX dạng $$…$$ hoặc inline $…$; Mermaid dùng code fence ```mermaid. Với nội dung lớn, công cụ có thể suy giảm (chỉ hiển thị source/tắt highlight). Hãy giảm mật độ, chia nhỏ khi convert và dùng ví dụ tối giản để bắt lỗi cú pháp. Phục hồi: KaTeX có thể phục hồi từ HTML render; Mermaid chỉ phục hồi được nếu sơ đồ được chính công cụ này sinh ra kèm source bên trong.