Trình xem trước Markdown

Nhập ở bên trái, xem HTML được render ở bên phải. Trình xem trước hiểu Markdown theo phong cách GitHub: bảng, danh sách công việc, khối mã có hàng rào kèm tô sáng cú pháp, chữ gạch ngang, URL tự động liên kết và HTML nội tuyến. Hữu ích để soạn thảo README trước khi commit, kiểm tra một bình luận sẽ hiển thị thế nào trên PR, hoặc đơn giản là học cú pháp Markdown bằng cách xem từng phím gõ được render.

Cách sử dụng trình xem trước

  1. 1

    Viết Markdown

    Khung bên trái nhận Markdown thô. Mỗi thay đổi sẽ render lại khung bên phải ngay lập tức.

  2. 2

    Xem bản xem trước HTML

    Khung bên phải hiển thị kết quả render với kiểu dáng giống GitHub.

  3. 3

    Chuyển chế độ

    Xem song song, chỉ xem trước, hoặc chỉ xem mã nguồn để viết mà không bị phân tâm.

  4. 4

    Sao chép HTML

    Lấy HTML đã render nếu bạn cần dán vào ứng dụng email hoặc CMS.

Những gì trình xem trước này hỗ trợ

  • CommonMark: tiêu đề, đoạn văn, nhấn mạnh, danh sách, trích dẫn khối, khối mã, liên kết, hình ảnh, đường kẻ ngang.
  • Tiện ích mở rộng GFM: bảng căn chỉnh cột, danh sách công việc (- [ ]- [x]), chữ gạch ngang bằng ~~, URL tự động liên kết và khối mã có hàng rào kèm gợi ý ngôn ngữ.
  • Tô sáng cú pháp: hơn 100 ngôn ngữ qua highlight.js, JavaScript, Python, Go, Rust, SQL, YAML, v.v.
  • HTML thô: HTML nội tuyến được truyền qua (đã làm sạch để đảm bảo an toàn).
  • Toán học (tùy chọn): $...$ nội tuyến và $$...$$ dạng khối nếu bạn bật tiện ích toán học.

Không hỗ trợ

  • Liên kết wiki tùy chỉnh theo phong cách Obsidian ([[Page]]), chỉ dành cho Obsidian.
  • Khối div có hàng rào của Pandoc (:::), chỉ dành cho Pandoc.
  • Chèn phía máy chủ (server-side includes) hoặc thẻ mẫu {% ... %}.

Ứng dụng điển hình

  • Soạn thảo README bên ngoài IDE rồi dán phiên bản cuối cùng.
  • Kiểm tra định dạng bình luận PR trước khi đăng, hộp bình luận của GitHub không xem trước đúng các khối mã.
  • Chuyển ghi chú thành HTML khi bạn cần dán nội dung có định kiểu vào email hoặc CMS chấp nhận HTML thô.
  • Dạy Markdown, giao diện song song giúp cú pháp trở nên rõ ràng.

Hiệu suất

Quá trình render dùng bộ phân tích Markdown-it với plugin GFM, chạy hoàn toàn trong trình duyệt. Tài liệu vài trăm KB được render trong mili giây; những tài liệu rất lớn (cả một cuốn sách trong một tệp) có thể giật khi bạn gõ, hãy chia chúng thành các chương nếu gặp trường hợp này.

Xuất

  • Sao chép HTML cho bạn <div> chứa nội dung đã render, kèm các lớp định kiểu.
  • Tải xuống .md lưu lại mã nguồn.
  • In sang PDF từ hộp thoại in của trình duyệt tạo ra bản sao PDF có định kiểu của giao diện đã render.

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

GitHub áp dụng CSS riêng của họ lên trên GFM. Đầu ra HTML sẽ khớp; phần tạo kiểu (phông chữ, khoảng cách) là của họ. Để giống hệt nhau, hãy dùng nút chuyển chủ đề “hiển thị trên GitHub”.

Có, nếu bạn bật tiện ích toán học, $...$ nội tuyến và $$...$$ dạng khối được render bằng KaTeX. Tính năng này mặc định tắt để giữ trang nhẹ.

Nó được làm sạch, các thẻ an toàn như <div>, <span>, <table>, <img> được cho qua; <script> và các trình xử lý sự kiện nội tuyến bị loại bỏ.

Hàng trăm KB chạy mượt mà. Với các tệp rất lớn, hãy tắt render trực tiếp và render theo yêu cầu.

Quá trình render hoàn toàn ở phía máy khách. Nội dung không được gửi đi đâu cả. Nếu bạn làm mới trang, bản nháp sẽ mất trừ khi trình duyệt giữ lại trạng thái biểu mẫu.

Công cụ liên quan

Công cụ này có phiên bản bằng các ngôn ngữ khác