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.

Công cụ này có hữu ích với bạn không?

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

Writing a GitHub or GitLab README and want to verify formatting before committing
Drafting a Markdown post for a blog platform, documentation site, or wiki
Checking a Markdown email or chat message renders correctly before sending
Learning Markdown syntax by experimenting with different formatting and seeing instant results
Converting a short Markdown snippet to HTML for pasting into a CMS or email template
Debugging a Markdown document where some formatting isn't rendering as expected

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

[object Object]
[object Object]
[object Object]
[object Object]
[object Object]

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.

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.

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.

What Markdown syntax does this tool support?

Headings (# through ######), bold (**text**), italics (*text*), inline code (`code`), code blocks (```), links ([text](url)), bulleted lists (- item), numbered lists (1. item), and blockquotes (> text).

Is my content saved or uploaded anywhere?

Why isn't my formatting showing up correctly?

Can I use this to preview a GitHub README before committing?

Sự khác biệt giữa Markdown và HTML là gì?

Markdown là một ngôn ngữ đánh dấu nhẹ, dễ viết và dễ đọc dưới dạng văn bản thuần túy. HTML là một ngôn ngữ đánh dấu hoàn chỉnh với cú pháp phức tạp hơn. Markdown thường được chuyển đổi thành HTML để hiển thị. Công cụ này hiển thị Markdown dưới dạng HTML theo thời gian thực.

How do I create a table in Markdown?

Markdown tiêu chuẩn không hỗ trợ bảng, nhưng GitHub-Flavored Markdown thì có. Hãy dùng ký tự ống (|) để phân tách các cột và dấu gạch ngang cho đường phân cách tiêu đề. Trình xem trước này không hiển thị bảng — hãy kiểm tra kết quả hiển thị cuối cùng trên nền tảng đích của bạn.

Can I write LaTeX math in Markdown?

This previewer doesn't support LaTeX math. For math rendering, use a tool that supports KaTeX or MathJax. Some platforms like GitHub don't render LaTeX in Markdown either.

Công Cụ Liên Quan

Khám phá thêm công cụ

Máy tính tỷ lệ khung hình

Máy Tính Băng Thông

Máy Tính Thời Gian Tải Xuống

Máy Tính Chi Phí Lưu Trữ Đám Mây

Máy Tính Chi Phí CDN

Máy tính Monetization API

Xem trước Markdown

Markdown

Xem trước

Hello World

Type markdown on the left and see it rendered here.

Live preview
No sign-up
Runs entirely in your browser

Nothing you type ever leaves your device.


console.log("code blocks work too")

Mọi thứ được hiển thị cục bộ trong trình duyệt của bạn — những gì bạn gõ không bao giờ được gửi đi đâu cả.

Công cụ này có hữu ích với bạn không?