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.
Khi Nào Nên Sử Dụng Máy Tính Này
- Viết README GitHub hoặc GitLab và muốn xác minh định dạng trước khi commit
- Soạn bài đăng Markdown cho nền tảng blog, trang tài liệu hoặc wiki
- Kiểm tra email hoặc tin nhắn chat Markdown hiển thị đúng trước khi gửi
- Học cú pháp Markdown bằng cách thử nghiệm với các định dạng khác nhau và xem kết quả ngay lập tức
- Chuyển đổi đoạn Markdown ngắn sang HTML để dán vào CMS hoặc mẫu email
- Gỡ lỗi tài liệu Markdown nơi một số định dạng không hiển thị như mong đợi
Các bước:
- 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ả.
Công Thức
# Tiêu đề →
Tiêu đề
**đậm** → đậm *nghiêng* → nghiêng `mã` →mã
[văn bản](url) → văn bản
- mục → - mục
Trường Hợp Sử Dụng
- 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
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
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
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
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
Khái niệm liên quan
- Trình định dạng JSON:
- Trình kiểm tra regex:
- Trình tạo mật khẩu:
- Trình chuyển đổi màu sắc:
- Mã hóa/giải mã URL:
Ví Dụ
Gõ "## Xin chào
Đâ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.
Giải thích kết quả của bạn
Bảng bên trái hiển thị văn bản nguồn Markdown thô của bạn, còn bảng bên phải hiển thị nó dưới dạng HTML đã định dạng theo thời gian thực. Mỗi lần gõ phím đều cập nhật bản xem trước ngay lập tức, vì vậy bạn có thể thấy ngay tác dụng của từng yếu tố cú pháp.
Các vấn đề hiển thị phổ biến thường liên quan đến khoảng trắng. Hầu hết bộ hiển thị yêu cầu một dòng trống giữa một đoạn văn và danh sách theo sau nó. Tiêu đề cần một khoảng trắng sau ký hiệu #. Hàng rào mã (```) cần nằm trên dòng riêng để kích hoạt hiển thị khối mã.
Bản xem trước là một phép xấp xỉ sát với cách Markdown của bạn sẽ xuất hiện trên hầu hết các nền tảng (GitHub, Slack, Discord, v.v.), nhưng mỗi nền tảng đều có bộ hiển thị riêng với những khác biệt nhỏ. Luôn kiểm tra lần cuối trên nền tảng đích cho bất kỳ thứ gì vượt ra ngoài định dạng cơ bản.