Tài liệu & Hướng dẫn chuyên sâu: Trình soạn thảo Markdown trực tiếp (GitHub Flavored Markdown)
1. Tổng quan & Nguyên lý hoạt động
Markdown là ngôn ngữ đánh dấu siêu văn bản siêu nhẹ được tạo ra bởi John Gruber, nhằm giúp lập trình viên viết tài liệu kỹ thuật nhanh chóng bằng văn bản thô dễ đọc nhưng có thể xuất ra mã HTML chuẩn xác. Tiện ích Markdown Editor của Verdbench hỗ trợ đầy đủ đặc tả GitHub Flavored Markdown (GFM - RFC 7763), bao gồm bảng dữ liệu (Tables), danh sách tác vụ (Task Lists), khối mã nguồn tô màu cú pháp (Syntax Highlighted Code Fences) và trích dẫn nâng cao. Hệ thống hiển thị hai khung soạn thảo và xem trước trực tiếp (Live Preview) mượt mà với thống kê từ và ký tự theo thời gian thực.
2. Ưu thế kiến trúc & Tính năng nổi bật
Hỗ trợ đầy đủ các tiện ích mở rộng của GitHub: gạch ngang chữ (~~strike~~), bảng kẻ cột, hộp kiểm công việc (- [x]), và liên kết tự động nhận diện URL.
Tích hợp highlight.js tự động nhận diện ngôn ngữ trong các khối code (```typescript, ```csharp, ```python...) giúp xem trước README.md chân thực như trên repo GitHub.
Cuộn đồng bộ mượt mà giữa ô nhập Markdown và bản xem trước HTML, phím tắt định dạng văn bản nhanh chóng, tối ưu hóa cho màn hình rộng.
3. Bảng tra cứu cú pháp GitHub Flavored Markdown (GFM) thông dụng
Cẩm nang cú pháp Markdown chuẩn giúp bạn viết README.md, tài liệu API và ghi chú dự án chuyên nghiệp:
| Yếu tố định dạng | Cú pháp Markdown | Kết quả hiển thị | Lưu ý sử dụng |
|---|---|---|---|
| Tiêu đề (Headings) | # H1 ## H2 ### H3 | Tiêu đề cấp độ 1, 2, 3 | Luôn cách 1 dấu cách sau ký tự #. |
| Khối mã nguồn (Code Block) | ```typescript const x: number = 42; ``` | Khối code có tô màu cú pháp | Ghi tên ngôn ngữ (ts, js, cs, py, sh) ngay sau 3 dấu backticks. |
| Bảng dữ liệu (Tables) | | Cột 1 | Cột 2 | | :--- | ---: | | Trái | Phải | | Bảng căn lề trái / phải | Dùng dấu hai chấm (:) ở hàng phân cách để căn lề (:--- trái, ---: phải, :---: giữa). |
| Danh sách công việc (Task List) | - [x] Đã xong - [ ] Chưa xong | Checkbox tương tác | Chữ x viết hoa hoặc thường bên trong ngoặc vuông biểu thị hoàn thành. |
| Trích dẫn cảnh báo (Alerts) | > [!NOTE] > Thông tin lưu ý quan trọng | Hộp thông báo nổi bật màu xanh/vàng | Cú pháp GitHub Alerts mới: [!NOTE], [!TIP], [!IMPORTANT], [!WARNING], [!CAUTION]. |
4. Câu hỏi thường gặp (FAQ)
Giải đáp các thắc mắc phổ biến của lập trình viên khi sử dụng tiện ích Trình soạn thảo Markdown trực tiếp (GitHub Flavored Markdown).
5. Công cụ liên quan
- So sánh văn bảnSo sánh hai đoạn văn bản và làm nổi bật phần thêm, xóa và thay đổi.
- Kiểm tra RegexThử nghiệm biểu thức chính quy trên văn bản mẫu với highlight kết quả trực tiếp.
- Trình xem trước Open Graph & SEONhập metadata, xem ngay link hiển thị trên Google, Facebook, Twitter và lấy sẵn code Next.js Metadata.