Định Dạng Markdown

Định Dạng Markdown - Format và Xem Trước Markdown

Công cụ định dạng và xem trước Markdown toàn diện. Dọn dẹp Markdown lộn xộn, sửa lỗi khoảng cách, chuẩn hóa kiểu tiêu đề, xem trước kết quả render và chuyển đổi sang HTML. Hoàn hảo cho người viết tài liệu, lập trình viên, blogger và technical writer làm việc với file Markdown.

Markdown là gì?

Markdown là ngôn ngữ đánh dấu nhẹ sử dụng cú pháp định dạng văn bản thuần túy để chuyển đổi thành HTML hợp lệ. Được tạo bởi John Gruber năm 2004, nó được thiết kế để dễ đọc và dễ viết.

**Nguyên Tắc Chính:**
• Dễ đọc - Markdown có thể đọc được dưới dạng văn bản thuần
• Đơn giản - Dễ học và sử dụng
• Tính di động - Hoạt động mọi nơi, chỉ là văn bản thuần
• Chuyển đổi - Dễ dàng chuyển sang HTML, PDF, v.v.

**Cú Pháp Cơ Bản:**

**Tiêu Đề:**
# Tiêu đề H1
## Tiêu đề H2
### Tiêu đề H3

**Nhấn Mạnh:**
*in nghiêng* hoặc _in nghiêng_
**in đậm** hoặc __in đậm__
***in đậm nghiêng***

**Danh Sách:**
Không thứ tự:
- Mục 1
- Mục 2
- Mục con

Có thứ tự:
1. Mục đầu tiên
2. Mục thứ hai
3. Mục thứ ba

**Liên Kết:**
[Văn Bản Link](https://example.com)
[Link có Title](https://example.com "Tiêu đề")

**Hình Ảnh:**

**Code:**
Inline code: `code ở đây`

Khối code:
```python
def hello():
print("Xin chào!")
```

**Trích Dẫn:**
> Đây là trích dẫn
> Nhiều dòng

**Đường Kẻ Ngang:**
---
***
___

**Trường Hợp Sử Dụng Phổ Biến:**
• File README (GitHub, GitLab)
• Tài liệu (MkDocs, Docusaurus)
• Nền tảng blog (Jekyll, Hugo)
• Ghi chú (Obsidian, Notion)
• Bài đăng diễn đàn (Reddit, Stack Overflow)
• Tin nhắn chat (Slack, Discord)
• Viết kỹ thuật
• Hệ thống quản lý nội dung

Cách sử dụng Công cụ Định Dạng Markdown?

**Định Dạng Markdown:**
1. Dán hoặc gõ Markdown vào vùng input
2. Cấu hình tùy chọn format:
- Kiểu tiêu đề: ATX (# Heading) hoặc Setext (gạch dưới)
- Ký hiệu danh sách: - (gạch), * (sao), hoặc + (cộng)
- Sửa khoảng cách: Xóa dòng trống thừa
- Chuẩn hóa tiêu đề: Chuyển sang kiểu đã chọn
- Dọn liên kết: Sửa khoảng cách trong cú pháp link
- Format code: Đảm bảo khoảng cách code block đúng
3. Nhấp nút 'Định Dạng'
4. Markdown đã format xuất hiện ở output
5. Sao chép hoặc tải xuống kết quả

**Xem Trước Markdown:**
1. Nhập văn bản Markdown
2. Nhấp nút 'Xem Trước'
3. Xem kết quả HTML được render
4. Kiểm tra nó sẽ trông như thế nào khi xuất bản

**Chuyển Sang HTML:**
1. Nhập Markdown của bạn
2. Nhấp nút 'Sang HTML'
3. Nhận code HTML output
4. Sử dụng trong trang web hoặc ứng dụng

**Giải Thích Tùy Chọn Format:**

**Kiểu Tiêu Đề:**

*Kiểu ATX (khuyên dùng):*
# Tiêu đề 1
## Tiêu đề 2
### Tiêu đề 3

*Kiểu Setext:*
Tiêu đề 1
=========

Tiêu đề 2
---------

**Ký Hiệu Danh Sách:**
Tất cả đều hoạt động giống nhau, chọn theo sở thích:
- Gạch ngang (phổ biến nhất)
* Dấu sao
+ Dấu cộng

**Sửa Khoảng Cách:**
• Xóa khoảng trắng cuối dòng
• Đảm bảo một dòng trống giữa các phần
• Thêm khoảng cách sau ký hiệu danh sách
• Xóa nhiều dòng trống liên tiếp

**Mẹo:**
• Dùng Format trước để dọn Markdown
• Sau đó dùng Preview để kiểm tra giao diện
• Export sang HTML cho tích hợp web
• Thống kê hiển thị số ký tự, từ và dòng

Các phiên bản và tiêu chuẩn Markdown là gì?

**Markdown Gốc:**

Được tạo bởi John Gruber năm 2004. Đặc tả gốc:
• Chỉ cú pháp cơ bản
• Không có bảng, danh sách nhiệm vụ hoặc gạch ngang
• Một số mơ hồ trong đặc tả
• Các parser khác nhau giải thích khác nhau

**CommonMark:**

Đặc tả được chuẩn hóa, rõ ràng:
• Ra mắt năm 2014
• Quy tắc phân tích cú pháp được định nghĩa chính xác
• Loại bỏ sự khác biệt triển khai
• Có implementation tham chiếu
• Được chấp nhận rộng rãi làm tiêu chuẩn cơ sở

**Website:** https://commonmark.org/

**GitHub Flavored Markdown (GFM):**

Đặc tả Markdown mở rộng của GitHub:
• Dựa trên CommonMark
• Thêm bảng
• Danh sách nhiệm vụ (checkbox)
• Gạch ngang
• Autolink
• Phím tắt emoji
• Mentions (@username)
• Tham chiếu issue (#123)

**Ví Dụ Tính Năng GFM:**

*Bảng:*
| Cột 1 | Cột 2 |
|-------|-------|
| Ô 1 | Ô 2 |
| Ô 3 | Ô 4 |

*Danh Sách Nhiệm Vụ:*
- [x] Nhiệm vụ hoàn thành
- [ ] Nhiệm vụ chưa xong
- [ ] Nhiệm vụ khác

*Gạch Ngang:*
~~văn bản đã xóa~~

*Autolink:*
www.example.com (tự động chuyển)
[email protected] (tự động chuyển)

**Markdown Extra:**

PHP Markdown Extra thêm:
• Footnote
• Bảng
• Danh sách định nghĩa
• Khối code có hàng rào
• Viết tắt
• Thuộc tính đặc biệt

**Pandoc Markdown:**

Phiên bản mạnh mẽ cho chuyển đổi tài liệu:
• Chỉ số trên và dưới
• LaTeX math
• YAML metadata block
• Pipe table
• Grid table
• Inline formatting trong header
• Nhiều định dạng output

**So Sánh:**

**Hỗ Trợ Tính Năng:**

Markdown Gốc:
• Header, nhấn mạnh, link, ảnh
• Danh sách, trích dẫn, code
• Đường kẻ ngang

CommonMark:
• Tất cả Markdown Gốc
• Phân tích chuẩn hóa

GitHub (GFM):
• Tất cả CommonMark
• Bảng, danh sách nhiệm vụ
• Gạch ngang, autolink
• Emoji :emoji:

Pandoc:
• Hầu hết tính năng từ mọi phiên bản
• Math, trích dẫn
• Metadata tài liệu

Thực hành tốt nhất khi viết Markdown

**1. Định Dạng Nhất Quán:**

**Tiêu Đề:**
• Dùng kiểu ATX (# Heading) cho nhất quán
• Chỉ một H1 mỗi tài liệu
• Không bỏ qua cấp tiêu đề (H1 → H3)
• Thêm dòng trống trước và sau tiêu đề

Tốt:
# Tiêu Đề Chính

## Phần 1

Nội dung ở đây.

## Phần 2

Xấu:
# Tiêu Đề Chính
## Phần 1
Nội dung ở đây.
### Bỏ qua H2

**Danh Sách:**
• Dùng ký hiệu nhất quán (-, *, hoặc +)
• Thụt lề danh sách lồng với 2-4 khoảng trắng
• Thêm dòng trống trước/sau danh sách
• Căn chỉnh các mục nhiều dòng

Tốt:
- Mục đầu
- Mục hai
- Mục con
- Mục con khác
- Mục ba

**2. Code Formatting:**

**Inline Code:**
Dùng `code` cho:
• Tên biến: `variable`
• Tên hàm: `function()`
• Tên file: `config.json`
• Lệnh: `npm install`

**Khối Code:**
Luôn chỉ định ngôn ngữ cho syntax highlighting:

```javascript
function hello() {
console.log('Xin chào');
}
```

```python
def hello():
print('Xin chào')
```

**3. Ảnh:**

**Alt Text:**
Luôn bao gồm alt text mô tả:

**Cho Accessibility:**
• Mô tả nội dung ảnh
• Đừng chỉ nói "ảnh"
• Cụ thể và ngắn gọn

Tốt:

Xấu:

**4. Bảng:**

**Bảng Dễ Đọc:**
Căn chỉnh cột cho dễ đọc:

| Cột 1 | Cột 2 | Cột 3 |
|-------------|-------------|-------------|
| Ngắn | Văn bản | Ở đây |
| Văn dài hơn | Nhiều text | Thêm nữa |

**Căn Chỉnh:**
| Trái | Giữa | Phải |
|:-----|:----:|-----:|
| T | G | P |

**5. Cấu Trúc Tài Liệu:**

**Template:**
# Tiêu Đề Tài Liệu

Giới thiệu ngắn.

## Mục Lục

- [Phần 1](#phan-1)
- [Phần 2](#phan-2)

## Phần 1

Nội dung ở đây.

### Phần con 1.1

Nội dung thêm.

## Phần 2

Nội dung ở đây.

## Kết Luận

Tổng kết.

**6. Khoảng Trắng:**

**Quy Tắc:**
• Một dòng trống giữa các phần
• Không có khoảng trắng cuối dòng
• Hai khoảng trắng cuối dòng cho ngắt dòng
• Một dòng mới ở cuối file

**7. Kiểm Tra:**

**Luôn Xem Trước:**
• Dùng formatter/previewer trước khi xuất bản
• Test trên nền tảng mục tiêu (GitHub, blog, v.v.)
• Kiểm tra link hoạt động
• Xác minh ảnh tải được
• Test trên mobile nếu cần

Lỗi Markdown phổ biến và cách sửa

**1. Lỗi Khoảng Cách Tiêu Đề:**

**Lỗi:**
#Tiêu đề không có khoảng cách

**Sửa:**
# Tiêu đề có khoảng cách

**Quy tắc:** Luôn thêm khoảng cách sau # trong tiêu đề

**2. Format Danh Sách:**

**Lỗi:**
-Không có khoảng cách sau gạch
- Khoảng cách không nhất quán
-Lồng không có khoảng cách

**Sửa:**
- Khoảng cách sau gạch
- Khoảng cách nhất quán
- Lồng có khoảng cách

**Quy tắc:**
• Khoảng cách sau ký hiệu danh sách
• Thụt lề nhất quán (2 hoặc 4 khoảng trắng)
• Dòng trống trước/sau danh sách

**3. Cú Pháp Link:**

**Lỗi:**
[Link] (khoảng-cách-trước-url)
[Link]( khoảng-cách-trong )

**Sửa:**
[Link](https://example.com)
[Link](https://example.com "Tiêu đề")

**Quy tắc:** Không có khoảng cách giữa ](

**4. Format Khối Code:**

**Lỗi:**
Code không có dòng trống
```
code ở đây
```
Văn bản ngay sau

**Sửa:**

Code có khoảng cách đúng

```
code ở đây
```

Văn bản có khoảng cách

**Quy tắc:** Dòng trống trước/sau khối code

**5. Nhiều Dòng Trống:**

**Lỗi:**
Đoạn 1.

Đoạn 2.

**Sửa:**
Đoạn 1.

Đoạn 2.

**Quy tắc:** Dùng một dòng trống giữa các phần

**6. Thụt Lề Danh Sách Lồng:**

**Lỗi:**
- Mục 1
- Thụt lề sai (1 khoảng trắng)
- Mục 2

**Sửa:**
- Mục 1
- Thụt lề đúng (2 khoảng trắng)
- Mục 2

**Quy tắc:** Dùng thụt lề nhất quán (2 hoặc 4 khoảng trắng)

**7. Xung Đột Bold/Italic:**

**Lỗi:**
** in đậm có khoảng cách **
* *nhầm lẫn in nghiêng* *

**Sửa:**
**in đậm không có khoảng cách**
*in nghiêng đúng*
***in đậm và nghiêng***

**Quy tắc:** Không có khoảng cách trong dấu nhấn mạnh

**8. Alt Text Ảnh:**

**Lỗi:**
 - Không có alt text
 - Alt text chung chung

**Sửa:**

**Quy tắc:** Luôn bao gồm alt text mô tả

**Mẹo Validation:**

1. **Dùng Linter:**
• markdownlint (VS Code extension)
• mdl (công cụ Ruby)
• remark-lint (JavaScript)

2. **Xem Trước Trước Khi Xuất Bản:**
• Dùng công cụ formatter này
• Kiểm tra preview nền tảng mục tiêu
• Test tất cả link

3. **Kiểm Tra Tự Động:**
• CI/CD pipeline check
• Trình validate link
• Kiểm tra chính tả

Tính Năng Chính

• Format và beautify Markdown
• Sửa khoảng cách và thụt lề
• Chuẩn hóa kiểu tiêu đề (ATX/Setext)
• Chuẩn hóa ký hiệu danh sách
• Dọn dẹp cú pháp link
• Format khối code đúng cách
• Xem trước render trực tiếp
• Chuyển Markdown sang HTML
• Output có syntax highlighting
• Hỗ trợ GitHub-flavored Markdown
• Tùy chọn format linh hoạt
• Thống kê (ký tự, từ, dòng, kích thước)
• Sao chép output đã format
• Tải xuống dưới dạng file .md hoặc .html
• Xử lý 100% phía client
• Không gửi dữ liệu đến server
• Hoạt động offline
• Giao diện thân thiện mobile
• Hỗ trợ dark mode
• Miễn phí và không giới hạn