Xem trước Markdown

Gõ Markdown ở một bên và xem nó được hiển thị trực tiếp ở bên kia — tiêu đề, chữ đậm, chữ nghiêng, danh sách, khối mã và liên kết, tất cả được xem trước ngay lập tức trong trình duyệt của bạn.

Xem trước Markdown là gì?

Markdown là cú pháp định dạng gọn nhẹ đứng sau các tệp README, bài đăng blog, tin nhắn trò chuyện, tài liệu, và vô số nơi khác mà bạn muốn định dạng đơn giản, dễ đọc mà không cần viết HTML thuần. Vì Markdown là văn bản thuần, nó dễ viết ở bất cứ đâu — nhưng cũng dễ viết sai cú pháp một chút mà không nhận ra cho đến khi bạn đã xuất bản nó.

Công cụ xem trước này hiển thị Markdown của bạn ngay khi gõ, đặt cạnh mã nguồn, để bạn có thể phát hiện lỗi định dạng ngay lập tức — thiếu khoảng trắng sau dấu #, một khối mã chưa đóng, hoặc một danh sách chưa tách khỏi đoạn văn phía trên — trước khi bạn commit một README, xuất bản một bài viết, hoặc gửi một tin nhắn đã định dạng.

Công Thức

# Tiêu đề → <h1>Tiêu đề</h1>

**đậm** → <strong>đậm</strong>

*nghiêng* → <em>nghiêng</em>

`mã` → <code>mã</code>

[văn bản](url) → <a href="url">văn bản</a>

- mục → <ul><li>mục</li></ul>

Cách Tính

Gõ hoặc dán Markdown của bạn vào bảng bên trái.
Xem bản xem trước HTML đã hiển thị cập nhật ngay lập tức ở bên phải.
Điều chỉnh cú pháp cho đến khi bản xem trước khớp với những gì bạn dự định.
Sao chép mã nguồn Markdown hoàn chỉnh khi bạn hài lòng với kết quả.

Ví Dụ

Gõ "## Xin chào\n\nĐây là chữ **đậm** và đây là chữ *nghiêng*." hiển thị thành một tiêu đề cấp 2 theo sau bởi một đoạn văn có chữ đậm và chữ nghiêng.

Lợi Ích Chính

Xem Markdown của bạn được hiển thị ngay lập tức, đặt cạnh mã nguồn
Phát hiện lỗi cú pháp trước khi xuất bản ở bất cứ đâu
Chạy hoàn toàn ngoại tuyến trong trình duyệt của bạn — không có gì được tải lên
Miễn phí, không cần đăng ký, không giới hạn kích thước tệp cho việc sử dụng thông thường

Những Lỗi Thường Gặp Cần Tránh

Quên dòng trống cần thiết giữa một đoạn văn và danh sách theo sau
Thiếu khoảng trắng sau ký hiệu # trong tiêu đề, khiến chúng không hiển thị đúng
Để một khối mã (```) chưa đóng, khiến phần còn lại của tài liệu bị coi là mã
Dùng một dấu sao đơn cho chữ đậm thay vì hai dấu sao, tạo ra chữ nghiêng thay vì chữ đậm

Mẹo Chuyên Nghiệp

Thêm một dòng trống trước và sau danh sách và khối mã để có kết quả hiển thị đáng tin cậy nhất trên các bộ phân tích Markdown khác nhau
Dùng hai dấu sao cho chữ đậm và một dấu sao (hoặc gạch dưới) cho chữ nghiêng để tránh nhầm lẫn
Xem trước trong công cụ này trước, sau đó kiểm tra trên nền tảng đích (GitHub, Slack, v.v.) vì một số nơi hỗ trợ thêm cú pháp như bảng
Giữ tiêu đề theo thứ tự liên tục (đừng nhảy từ # sang ###) để có cấu trúc tài liệu và khả năng tiếp cận tốt hơn

Các Thuật Ngữ Chính Được Giải Thích

CommonMark: một đặc tả chuẩn hóa của cú pháp Markdown, được thiết kế để giảm sự không nhất quán
GFM: GitHub-Flavored Markdown, một phương ngữ mở rộng hỗ trợ bảng và danh sách công việc
Khối mã (Code fence): một khối được giới hạn bằng ba dấu backtick (```) dùng để định dạng mã nhiều dòng
Định dạng nội tuyến (Inline formatting): định dạng áp dụng trong một dòng duy nhất, như *nghiêng* hoặc `mã`, khác với các phần tử cấp khối

Trường Hợp Sử Dụng Phổ Biến

Xem trước README của GitHub hoặc GitLab trước khi commit
Soạn thảo tin nhắn đã định dạng cho Slack, Discord, hoặc các ứng dụng trò chuyện hỗ trợ Markdown khác
Kiểm tra định dạng bài đăng blog hoặc tài liệu trước khi xuất bản
Học cú pháp Markdown bằng cách thử nghiệm và xem kết quả ngay lập tức
Nhanh chóng chuyển đổi một đoạn Markdown ngắn sang HTML để dán ở nơi khác

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

Công cụ này hỗ trợ cú pháp Markdown nào?

Tiêu đề (# đến ######), chữ đậm (**text**), chữ nghiêng (*text*), mã nội tuyến (`code`), khối mã (```), liên kết ([text](url)), danh sách dấu đầu dòng (- item), danh sách đánh số (1. item), và trích dẫn khối (> text).

Nội dung của tôi có được lưu hoặc tải lên đâu không?

Không. Mọi thứ được phân tích và hiển thị hoàn toàn trong trình duyệt của bạn bằng JavaScript. Không có gì bạn gõ được gửi tới bất kỳ máy chủ nào, được lưu trữ hay ghi log.

Tại sao định dạng của tôi không hiển thị đúng?

Markdown đòi hỏi cú pháp chính xác — ví dụ, cần một dòng trống giữa một đoạn văn và một danh sách để nhiều bộ hiển thị phân tách chúng đúng cách, và tiêu đề cần một khoảng trắng sau các ký hiệu #. Hãy kiểm tra xem có thiếu khoảng trắng hoặc ngắt dòng xung quanh phần định dạng bạn đang dùng không.

Tôi có thể dùng công cụ này để xem trước README trên GitHub trước khi commit không?

Có, đối với các thành phần Markdown thông dụng mà công cụ này hỗ trợ. Bộ hiển thị của GitHub hỗ trợ thêm một số phần mở rộng GitHub-Flavored Markdown (như bảng và danh sách công việc) mà công cụ xem trước nhẹ này không bao gồm, vì vậy hãy luôn kiểm tra lại kết quả hiển thị cuối cùng trên chính GitHub với bất cứ điều gì vượt ra ngoài cú pháp cơ bản.