Xem trước Markdown online: cú pháp, cách render và giới hạn cần biết
Công cụ xem trước Markdown chia đôi màn hình: bạn gõ Markdown ở khung trái, khung phải hiện ngay kết quả đã render. Bộ chuyển đổi chạy bằng JavaScript ngay trên trình duyệt nên nội dung bạn dán vào không đi đâu cả. Trang này giải thích cú pháp Markdown, sự khác nhau giữa các phiên bản Markdown và những gì bản xem trước này chưa làm được.
Tính năng nổi bật
- Khung soạn thảo và khung xem trước đặt cạnh nhau, cập nhật ngay từng ký tự bạn gõ
- Nhận tiêu đề ba cấp: một dấu thăng cho H1, hai dấu cho H2, ba dấu cho H3
- Nhận chữ đậm với hai dấu sao và chữ nghiêng với một dấu sao
- Nhận khối mã ba dấu huyền và mã nội dòng bằng một dấu huyền
- Nhận trích dẫn bằng dấu lớn hơn ở đầu dòng
- Nhận danh sách gạch đầu dòng bằng dấu trừ và danh sách đánh số kiểu 1. 2. 3.
- Nhận liên kết theo dạng ngoặc vuông kèm ngoặc đơn, tự mở sang tab mới
- Nút sao chép toàn bộ Markdown về clipboard bằng một lần bấm
- Có sẵn đoạn Markdown mẫu để bạn thử ngay mà không cần tự gõ
Xem trước trước khi commit tiết kiệm hơn nhiều so với sửa sau
Markdown đọc bằng mắt thì tưởng dễ, nhưng lỗi hay nằm ở chỗ không nhìn thấy được: thiếu dòng trống trước danh sách khiến cả khối bị gộp vào đoạn văn phía trên, dùng ba dấu huyền nhưng quên đóng khiến toàn bộ phần còn lại của tài liệu biến thành khối mã, hoặc trộn lẫn dấu sao với dấu gạch dưới khiến chữ đậm không ăn. Trên GitHub, mỗi lần muốn xem những lỗi đó bạn phải commit rồi tải lại trang. Với một khung xem trước cạnh bên, vòng lặp sửa và kiểm tra rút xuống còn vài giây. Công cụ này đặc biệt hợp cho lúc bạn đang học cú pháp, đang gõ nhanh phần mô tả cho một pull request, hoặc muốn kiểm tra một đoạn ngắn trước khi dán vào Notion, Discord hay trình soạn bài viết. Vì mọi thứ chạy trong trình duyệt, bạn có thể dán cả nội dung nội bộ mà không phải lo dữ liệu bị gửi đi.
Lợi ích khi sử dụng
- Thấy ngay lỗi cú pháp thay vì phải commit lên GitHub mới biết
- Học Markdown bằng cách thử trực tiếp, đối chiếu cú pháp và kết quả
- Không cần cài trình soạn thảo, chỉ cần một tab trình duyệt
- Nội dung không rời khỏi máy nên dùng được với tài liệu nội bộ
- Nút sao chép giúp chuyển nhanh sang nền tảng đích mà không mất định dạng
Cách dùng khung xem trước Markdown
- 1Xóa đoạn Markdown mẫu ở khung trái rồi dán hoặc gõ nội dung của bạn vào đó.
- 2Nhìn sang khung phải, kết quả đã render hiện ngay mà không cần bấm nút nào.
- 3Sửa dần cú pháp cho tới khi bản render đúng ý: thêm dòng trống trước danh sách và khối mã nếu thấy chúng bị dính vào đoạn trên.
- 4Bấm biểu tượng sao chép ở góc trên khung trái để lấy toàn bộ Markdown về clipboard.
- 5Dán sang GitHub, GitLab, Notion hay trình soạn thảo của bạn rồi xem lại lần cuối bằng chính bản xem trước của nền tảng đó.
Cú pháp Markdown cơ bản cần thuộc
Tiêu đề dùng dấu thăng ở đầu dòng, số lượng dấu thăng là cấp tiêu đề, và bắt buộc có một dấu cách sau dấu thăng cuối cùng. Chữ nghiêng bọc giữa một dấu sao, chữ đậm bọc giữa hai dấu sao, vừa đậm vừa nghiêng thì ba dấu sao. Danh sách không thứ tự bắt đầu bằng dấu trừ hoặc dấu sao kèm một dấu cách; danh sách có thứ tự bắt đầu bằng số, dấu chấm rồi dấu cách. Trích dẫn dùng dấu lớn hơn ở đầu dòng và có thể lồng nhiều cấp bằng cách viết liền nhiều dấu. Mã nội dòng bọc trong một dấu huyền, khối mã nhiều dòng bọc trong ba dấu huyền, dòng mở khối có thể ghi tên ngôn ngữ ngay sau ba dấu huyền. Liên kết viết theo dạng chữ hiển thị trong ngoặc vuông rồi địa chỉ trong ngoặc đơn; ảnh giống hệt nhưng thêm dấu chấm than ở trước. Đường kẻ ngang là ba dấu gạch ngang trên một dòng riêng. Muốn hiển thị chính các ký tự đặc biệt này, bạn đặt một dấu gạch chéo ngược ngay trước chúng.
Dòng trống là chi tiết quan trọng nhất mà người mới hay bỏ qua
Phần lớn lỗi trình bày Markdown không phải do gõ sai ký tự mà do thiếu dòng trống. Trong Markdown, một dòng trống là dấu hiệu kết thúc khối. Nếu bạn viết một câu văn rồi xuống dòng gõ ngay dấu trừ để mở danh sách mà không chừa dòng trống, nhiều bộ render sẽ hiểu cả cụm đó vẫn thuộc đoạn văn cũ và danh sách không thành hình. Tương tự với tiêu đề, khối mã và bảng: nên luôn có một dòng trống trước và sau. Một điểm nữa hay gây bực mình là xuống dòng đơn thuần trong cùng một đoạn thường bị bỏ qua, hai dòng liền nhau sẽ được nối thành một dòng khi hiển thị. Muốn ngắt dòng mà vẫn nằm trong cùng đoạn, bạn gõ hai dấu cách ở cuối dòng trước rồi mới xuống dòng. Riêng bản xem trước ở đây xử lý khác một chút: nó đổi mọi ký tự xuống dòng thành thẻ ngắt dòng, nên bản render trông sát với những gì bạn gõ hơn so với GitHub.
Bản xem trước này làm được gì và chưa làm được gì
Bộ chuyển đổi ở đây viết bằng một chuỗi biểu thức chính quy, đủ dùng cho phần lớn nội dung thường ngày nhưng không phải một bộ phân tích Markdown đầy đủ. Cụ thể, công cụ nhận tiêu đề từ cấp một đến cấp ba, còn cấp bốn tới cấp sáu chưa được xử lý. Chữ đậm và chữ nghiêng chỉ nhận dấu sao, không nhận dấu gạch dưới. Danh sách gạch đầu dòng chỉ nhận dấu trừ, viết bằng dấu sao sẽ bị hiểu nhầm thành chữ nghiêng. Các phần mở rộng của GitHub như bảng, danh sách việc cần làm dạng ô tích, chữ gạch ngang bằng hai dấu ngã và biểu tượng cảm xúc theo tên đều chưa có. Khối mã được bọc trong thẻ mã nhưng không tô màu theo ngôn ngữ, tên ngôn ngữ bạn ghi sau ba dấu huyền chỉ bị bỏ qua chứ không gây lỗi. Cuối cùng, cú pháp chèn ảnh hiện bị quy tắc xử lý liên kết bắt trước, nên một dòng ảnh sẽ hiện ra thành một liên kết có dấu chấm than đứng trước thay vì thành ảnh thật. Hãy coi đây là bản xem nhanh về bố cục, không phải bản mô phỏng chính xác của GitHub.
Vì sao cùng một file Markdown lại hiển thị khác nhau ở mỗi nơi
Markdown do John Gruber công bố năm 2004 chỉ là một đặc tả ngắn kèm một script, và nó để hở khá nhiều tình huống. Hệ quả là mỗi nền tảng tự bổ sung theo cách riêng, sinh ra các nhánh khác nhau. CommonMark là nỗ lực chuẩn hóa lại phần lõi cho rõ ràng, quy định chặt chẽ cách xử lý các trường hợp mập mờ. GitHub Flavored Markdown dựng trên CommonMark rồi thêm bảng, danh sách việc cần làm, chữ gạch ngang, tự động nhận diện đường dẫn và tham chiếu tới issue. Các nền tảng khác lại đi hướng riêng: Discord bỏ qua ảnh và tiêu đề trong nhiều ngữ cảnh, Slack dùng một cú pháp gần giống nhưng chữ đậm chỉ cần một dấu sao, Notion hiểu Markdown khi dán vào nhưng lưu nội dung ở dạng khối riêng của nó. Vì vậy đừng ngạc nhiên khi cùng một đoạn hiển thị khác nhau ở ba nơi. Nguyên tắc thực dụng là bám vào phần lõi mà mọi nhánh đều hiểu, và chỉ dùng phần mở rộng khi biết chắc nơi đăng có hỗ trợ.
Lưu ý an toàn khi dán Markdown từ nguồn lạ
Markdown cho phép nhúng thẳng HTML vào giữa nội dung, và khung xem trước này đưa kết quả vào trang bằng cách gán trực tiếp chuỗi HTML nên không lọc bỏ thẻ lạ. Với nội dung bạn tự viết thì không có vấn đề gì, nhưng nếu bạn dán một đoạn Markdown lấy từ nguồn không rõ ràng, các thẻ HTML trong đó sẽ được trình duyệt xử lý như HTML thật. Thói quen an toàn là chỉ xem trước nội dung của chính mình hoặc nội dung từ nguồn bạn tin cậy, và đọc lướt phần văn bản gốc trước khi dán. Ở chiều ngược lại, phần lớn nền tảng đích lại lọc HTML rất chặt: GitHub loại bỏ thẻ script, thuộc tính style và hầu hết thuộc tính sự kiện, nên đoạn HTML hiển thị tốt trong khung xem trước này chưa chắc còn nguyên khi bạn đưa lên repository. Nếu tài liệu cần trình bày phức tạp hơn những gì Markdown làm được, cách bền hơn là tách phần đó ra thành ảnh hoặc chuyển sang một định dạng khác thay vì cố nhồi HTML vào file Markdown.
Câu hỏi thường gặp (FAQ)
Markdown khác HTML ở điểm nào?
Markdown là lớp cú pháp rút gọn, cuối cùng vẫn được chuyển thành HTML để trình duyệt hiển thị. Khác biệt nằm ở chỗ file Markdown vẫn đọc được bằng mắt khi chưa render, còn HTML thô thì dày đặc thẻ. Đổi lại, Markdown chỉ bao được các kiểu trình bày thông dụng, muốn bố cục phức tạp bạn vẫn phải quay về HTML.
Vì sao xuống dòng trong Markdown không có tác dụng?
Ở đa số bộ render, hai dòng liền nhau trong cùng một đoạn sẽ bị nối lại thành một dòng. Muốn ngắt dòng mà vẫn ở trong đoạn, bạn gõ hai dấu cách ở cuối dòng trước rồi mới xuống dòng, hoặc chừa hẳn một dòng trống để tách thành hai đoạn riêng.
Công cụ có hiển thị được bảng không?
Chưa. Bảng là phần mở rộng của GitHub Flavored Markdown, không nằm trong Markdown lõi, và bộ chuyển đổi ở đây chưa xử lý nó. Nếu tài liệu của bạn có bảng, phần đó sẽ hiện ra dưới dạng các dòng có dấu gạch đứng. Hãy kiểm tra bảng bằng chính khung xem trước của GitHub hoặc GitLab.
Khối mã có được tô màu theo ngôn ngữ không?
Không. Công cụ bọc khối mã trong thẻ định dạng mã với nền xám và giữ nguyên khoảng trắng, nhưng không tô màu từ khóa. Tên ngôn ngữ bạn ghi sau ba dấu huyền vẫn nên giữ lại vì GitHub và các trình soạn thảo khác dùng nó để tô màu khi bạn đăng nội dung lên.
Vì sao cú pháp chèn ảnh của tôi hiện ra thành liên kết?
Do thứ tự xử lý trong bộ chuyển đổi, quy tắc nhận liên kết chạy trước quy tắc nhận ảnh nên phần trong ngoặc bị bắt mất và dấu chấm than bị bỏ lại phía trước. Đây là giới hạn hiện tại của bản xem trước, không phải lỗi trong file của bạn. Bản Markdown khi dán sang GitHub vẫn hiện ảnh bình thường.
Có xem được tiêu đề cấp bốn trở lên không?
Bản xem trước hiện chỉ nhận tiêu đề cấp một, hai và ba. Tiêu đề cấp bốn trở lên sẽ hiện nguyên các dấu thăng. Thực tế điều này ít gây trở ngại vì tài liệu README hiếm khi cần sâu quá ba cấp, và cấu trúc quá nhiều tầng thường là dấu hiệu nên tách thành file riêng.
Danh sách của tôi viết bằng dấu sao sao không thành danh sách?
Công cụ chỉ nhận dấu trừ làm ký hiệu gạch đầu dòng. Dòng bắt đầu bằng dấu sao sẽ rơi vào quy tắc xử lý chữ nghiêng và cho ra kết quả không như ý. Bạn đổi sang dấu trừ là được, và đây cũng là ký hiệu được khuyến nghị vì nó thống nhất, ít va chạm với cú pháp nhấn mạnh.
Nội dung tôi dán vào có bị gửi lên máy chủ không?
Không. Cả việc chuyển đổi lẫn việc hiển thị đều chạy bằng JavaScript trong trình duyệt của bạn, không có bước gọi máy chủ nào. Khi bạn tải lại trang, nội dung mất đi và khung soạn thảo quay về đoạn mẫu ban đầu, nên nhớ sao chép trước nếu cần giữ lại.
Làm sao xuất bản xem trước ra PDF?
Cách nhanh nhất là dùng chức năng in của trình duyệt và chọn lưu thành PDF. Nếu cần bản PDF có mục lục, đánh số trang và kiểu chữ riêng, bạn nên dùng công cụ chuyên dụng như Pandoc, vốn nhận file Markdown làm đầu vào và cho phép áp mẫu định dạng.
Tạo mục lục cho file README thế nào?
Markdown không có cú pháp mục lục sẵn. Trên GitHub, mỗi tiêu đề tự sinh một mỏ neo bằng cách chuyển tiêu đề về chữ thường và thay dấu cách bằng dấu gạch ngang, nên bạn tự viết danh sách liên kết trỏ tới các mỏ neo đó. GitHub cũng có nút mục lục tự động ngay trên khung hiển thị file.
Dán HTML vào Markdown có an toàn không?
Với nội dung bạn tự viết thì không sao, nhưng khung xem trước này không lọc thẻ HTML nên đừng dán Markdown lấy từ nguồn lạ vào. Ở chiều ngược lại, GitHub và hầu hết nền tảng đều lọc rất chặt, loại bỏ thẻ script cùng phần lớn thuộc tính, nên HTML chạy được ở đây chưa chắc còn nguyên khi đăng lên.
Vì sao bản xem trước ở đây khác với trên GitHub?
Vì mỗi nơi dùng một bộ render khác nhau. GitHub theo GitHub Flavored Markdown dựng trên CommonMark cùng nhiều phần mở rộng, còn công cụ này dùng một bộ quy tắc gọn nhẹ chạy trong trình duyệt. Hãy dùng nó để kiểm tra nhanh bố cục, rồi xem lại lần cuối bằng chính khung xem trước của nền tảng bạn định đăng.
Từ khóa liên quan
- markdown preview
- xem trước markdown online
- công cụ markdown online
- markdown editor online
- markdown to html online
- cú pháp markdown
- hướng dẫn viết markdown
- markdown là gì
- viết readme github
- readme md là file gì
- github flavored markdown
- commonmark là gì
- markdown xuống dòng
- markdown chèn ảnh
- markdown code block
- markdown bảng
- markdown live preview
- chuyển markdown sang html
- markdown viewer miễn phí
- soạn tài liệu bằng markdown
