Markdown là ngôn ngữ đánh dấu được John Gruber tạo ra vào năm 2004. Markdown sử dụng cú pháp khá đơn giản và dễ hiểu để đánh dấu văn bản, tạo thuận tiện cho việc chuyển đổi từ văn bản thuần sang HTML. Thay vì dựa vào HTML hoặc các trình soạn thảo WYSIWYG, Markdown cho phép bạn định dạng văn bản mà không cần rời tay ra khỏi bàn phím, điều đó trực quan hơn nhiều so với HTML.
Thêm nữa, Markdown ngắn gọn và dễ hiểu hơn nhiều, bạn không cần phải biết về HTML cũng có thể sử dụng được Markdown đơn giản. Vậy còn chần chừ gì mà không theo dõi bảng tổng hợp các cú pháp cơ bản để có thể thông thạo việc sử dụng Markdown ngay bây giờ nhỉ?
1. Tiêu đề - Heading
Để tạo tiêu đề - heading h1, h2, h3 cho đến h6, thêm số lượng ký tự # tương ứng vào đầu dòng. Số lượng # bạn sử dụng tương ứng với cấp độ tiêu đề, một ký tự # tương đương với h1, 2 ký tự # tương đương với h2... Ví dụ: để tạo tiêu đề cấp ba (<h3>), sử dụng ba ký hiệu # (ví dụ: ### bạn).
| Markdown | HTML | Output |
|---|---|---|
| # Heading level 1 | <h1>Heading level 1<h1> | Heading level 1 |
| ## Heading level 2 | <h2>Heading level 2</h2> | Heading level 2 |
| ### Heading level 3 | <h3>Heading level 3</h3> | Heading level 3 |
| #### Heading level 4 | <h4>Heading level 4</h4> | Heading level 4 |
| ##### Heading level 5 | <h5>Heading level 5</h5> | Heading level 5 |
| ###### Heading level 6 | <h6>Heading level 6</h6> | Heading level 6 |
2. Đoạn văn - Paragraph
Để tạo các đoạn văn, sử dụng một dòng trống để tách các dòng văn bản. Bạn không nên thụt lề các đoạn bằng dấu cách hoặc tab.
| Markdown | HTML | Output |
|---|---|---|
| Website Quantrimang.com. Học cú pháp Markdown căn bản | <p>Website Quantrimang.com</p>. <p>Học cú pháp Markdown căn bản</p> | Website Quantrimang.com. Học cú pháp Markdown căn bản |
3. In đậm chữ - Bold
Để in đậm văn bản, thêm hai dấu hoa thị hoặc dấu gạch dưới trước và sau một từ hoặc cụm từ. Để in đậm chữ cái nằm giữa một từ để nhấn mạnh, thêm hai dấu sao trước và sau các chữ cái (không sử dụng space).
| Markdown | HTML | Output |
| Website **QTM**. | Website <strong>QTM</strong>. | Website QTM |
| Website __QTM__. | Website <strong>QTM</strong>. | Website QTM |
| **quantrimang**.com | <strong>quantrimang</strong>.com | quantrimang.com |
4. In nghiêng - Italic
Để in nghiêng văn bản, thêm một dấu hoa thị hoặc gạch dưới trước và sau một từ hoặc cụm từ. Để in nghiêng chữ cái nằm giữa một từ để nhấn mạnh, thêm một dấu sao trước và sau các chữ cái (không sử dụng space).
| Markdown | HTML | Output |
| Hàm *int()* trong Python trả về một đối tượng số nguyên từ bất kỳ số hoặc chuỗi nào. | Hàm <em>int()</em> trong Python trả về một đối tượng số nguyên từ bất kỳ số hoặc chuỗi nào. | Hàm int() trong Python trả về một đối tượng số nguyên từ bất kỳ số hoặc chuỗi nào. |
| Hàm _int()_ trong Python trả về một đối tượng số nguyên từ bất kỳ số hoặc chuỗi nào. | Hàm <em>int()</em> trong Python trả về một đối tượng số nguyên từ bất kỳ số hoặc chuỗi nào. | Hàm int() trong Python trả về một đối tượng số nguyên từ bất kỳ số hoặc chuỗi nào.. |
| Quan*tri*mang | Quan<em>tri</em>mang | Quantrimang |
5. In đậm và in nghiêng
Để nhấn mạnh văn bản bằng chữ in đậm và in nghiêng cùng một lúc, thêm ba dấu hoa thị hoặc ba dấu gạch dưới trước và sau một từ hoặc cụm từ.
| Markdown | HTML | Output |
| ***Thuộc tính Shadow*** trong CSS được sử dụng để thiết lập bóng cho các phần tử thành phần trong website. | <strong><em>Thuộc tính Shadow</em></strong> trong CSS được sử dụng để thiết lập bóng cho các phần tử thành phần trong website. | Thuộc tính Shadow trong CSS được sử dụng để thiết lập bóng cho các phần tử thành phần trong website. |
| ___Thuộc tính Shadow___ trong CSS được sử dụng để thiết lập bóng cho các phần tử thành phần trong website. | <strong><em>Thuộc tính Shadow</em></strong> trong CSS được sử dụng để thiết lập bóng cho các phần tử thành phần trong website. | Thuộc tính Shadow trong CSS được sử dụng để thiết lập bóng cho các phần tử thành phần trong website. |
| __*Thuộc tính Shadow*__ trong CSS được sử dụng để thiết lập bóng cho các phần tử thành phần trong website. | <strong><em>Thuộc tính Shadow</em></strong> trong CSS được sử dụng để thiết lập bóng cho các phần tử thành phần trong website. | Thuộc tính Shadow trong CSS được sử dụng để thiết lập bóng cho các phần tử thành phần trong website. |
| **_Thuộc tính Shadow_** trong CSS được sử dụng để thiết lập bóng cho các phần tử thành phần trong website. | <strong><em>Thuộc tính Shadow</em></strong>trong CSS được sử dụng để thiết lập bóng cho các phần tử thành phần trong website. | Thuộc tính Shadow trong CSS được sử dụng để thiết lập bóng cho các phần tử thành phần trong website. |
6. Trích dẫn - Blockquote
Để tạo một blockquote, hãy thêm dấu > vào trước đoạn văn.
> Quantrimang.com là mạng xã hội về khoa học công nghệ, với nội dung mở
rộng trên nhiều lĩnh vực như điện thoại, thiết bị thông minh, điện tử,
bảo mật máy tính...
Output hiển thị như này:
Quantrimang.com là mạng xã hội về khoa học công nghệ, với nội dung mở rộng trên nhiều lĩnh vực như điện thoại, thiết bị thông minh, điện tử, bảo mật máy tính...
6.1 Blockquote có nhiều đoạn
Blockquote có thể chứa nhiều đoạn. Thêm > vào các dòng trống giữa các đoạn.
> Quantrimang.com là mạng xã hội về khoa học công nghệ, với nội dung mở
rộng trên nhiều lĩnh vực như điện thoại, thiết bị thông minh, điện tử,
bảo mật máy tính...
>
> Để trở thành một phần của Quantrimang.com, bạn hãy gửi bài viết, trải
nghiệm công nghệ của mình về cho đội ngũ quản lý.
Output hiển thị như này:
Quantrimang.com là mạng xã hội về khoa học công nghệ, với nội dung mở rộng trên nhiều lĩnh vực như điện thoại, thiết bị thông minh, điện tử, bảo mật máy tính...
Để trở thành một phần của Quantrimang.com, bạn hãy gửi bài viết, trải nghiệm công nghệ của mình về cho đội ngũ quản lý.
6.2 Blockquote lồng nhau
Blockquote có thể được lồng trong một Blockquote khác. Thêm dấu >> ở phía trước đoạn bạn muốn lồng.
> Quantrimang.com là mạng xã hội dành cho những tín đồ công nghệ.
>
>> Bạn có thể chia sẻ bài viết của mình trên trang nếu có tài khoản, bạn
có thể xem bài viết đã đăng, xem bài viết của các thành viên khác và
tìm kiếm bài viết mình quan tâm trên trang.
Output hiển thị như này:
Quantrimang.com là mạng xã hội dành cho những tín đồ công nghệ.
Bạn có thể chia sẻ bài viết của mình trên trang nếu có tài khoản, bạn có thể xem bài viết đã đăng, xem bài viết của các thành viên khác và tìm kiếm bài viết mình quan tâm trên trang.
6.3 Blockquote bao gồm các yếu tố khác
Blockquote có thể chứa các yếu tố định dạng Markdown khác. Tuy nhiên, không phải tất cả các yếu tố đều có thể sử dụng được, vậy nên bạn cần thử nghiệm để xem định dạng nào sẽ hoạt động.
> #### Tìm kiếm bài viết trên Quantrimang.com
>
> - Nhập **từ khóa** hoặc **tên bài viết** vào ô tìm kiếm trên
*Quantrimang.com* như bình thường rồi nhấn ***Enter***.
> - Để tìm kiếm chính xác từ khóa cụ thể nào đó, bạn có thể cho nó
vào dấu "", ví dụ "tạo usb boot", "cài đặt Windows 7".
> - Nếu muốn tìm trên Google, bạn có thể tìm bằng cách: từ khóa +
site:Quantrimang.com. Ví dụ: *cách bấm dây mạng site:quantrimang.com*
>
> Chúc bạn có những giây phút vui vẻ, bổ ích trên **Quantrimang.com**!
Output hiển thị như này:
Tìm kiếm bài viết trên Quantrimang.com
- Nhập từ khóa hoặc tên bài viết vào ô tìm kiếm trên Quantrimang.com như bình thường rồi nhấn Enter.
- Để tìm kiếm chính xác từ khóa cụ thể nào đó, bạn có thể cho nó vào dấu "", ví dụ "tạo usb boot", "cài đặt Windows 7".
- Nếu muốn tìm trên Google, bạn có thể tìm bằng cách: từ khóa + site:Quantrimang.com. Ví dụ: cách bấm dây mạng site:quantrimang.com
Chúc bạn có những giây phút vui vẻ, bổ ích trên Quantrimang.com!
7. Danh sách
Bạn có thể sử dụng Markdown để định dạng sắp xếp các mục vào danh sách theo thứ tự hoặc không theo thứ tự.
7.1 Danh sách có thứ tự
Để tạo danh sách có thứ tự, bạn chỉ cần thêm các các số theo sau là dấu chấm trước nội dung muốn tạo. Các số không nhất thiết phải theo thứ tự 1 2 3 4 lần lượt, nhưng bạn nên bắt đầu bằng số một.
| Markdown | HTML | Output |
| 1. Mục thứ nhất 2. Mục thứ hai 3. Mục thứ ba 4. Mục thứ tư | <ol> <li>Mục thứ nhất</li> <li>Mục thứ hai</li> <li>Mục thứ ba</li> <li>Mục thứ tư</li> </ol> |
|
| 1. Mục thứ nhất 1. Mục thứ hai 1. Mục thứ ba 1. Mục thứ tư | <ol> <li>Mục thứ nhất</li> <li>Mục thứ hai</li> <li>Mục thứ ba</li> <li>Mục thứ tư</li> </ol> |
|
| 1. Mục thứ nhất 8. Mục thứ hai 3. Mục thứ ba 5. Mục thứ tư | <ol> <li>Mục thứ nhất</li> <li>Mục thứ hai</li> <li>Mục thứ ba</li> <li>Mục thứ tư</li> </ol> |
|
| 1. Mục thứ nhất 2. Mục thứ hai 3. Mục thứ ba 1. Mục phụ 2. Mục phụ 4. Mục thứ tư | <ol> <li>Mục thứ nhất</li> <li>Mục thứ hai</li> <li>Mục thứ ba <ol> <li>Mục phụ</li> <li>Mục phụ</li> </ol> </li> <li>Mục thứ tư</li> </ol> |
|
7.2 Danh sách không có thứ tự
Để định đạng danh sách có các gạch đầu dòng trong Markdown, bạn dùng kí tự dấu gạch ngang -, dấu hoa thị * hoặc dấu cộng + và một dấu cách trước nội dung muốn tạo, dùng thêm 2 dấu cách ở đằng trước nếu muốn lùi vào một level.
| Markdown | HTML | Output |
| - Mục thứ nhất - Mục thứ hai - Mục thứ ba - Mục thứ tư | <ul> <li>Mục thứ nhất</li> <li>Mục thứ hai</li> <li>Mục thứ ba</li> <li>Mục thứ tư</li> </ul> |
|
| * Mục thứ nhất * Mục thứ hai * Mục thứ ba * Mục thứ tư | <li>Mục thứ nhất</li> <li>Mục thứ hai</li> <li>Mục thứ ba</li> <li>Mục thứ tư</li> </ul> |
|
| + Mục thứ nhất * Mục thứ hai - Mục thứ ba + Mục thứ tư | <ul> <li>Mục thứ nhất</li> <li>Mục thứ hai</li> <li>Mục thứ ba</li> <li>Mục thứ tư</li> </ul> |
|
| - Mục thứ nhất - Mục thứ hai - Mục thứ ba - Mục phụ - Mục phụ - Mục thứ tư | <ul> <li>Mục thứ nhất</li> <li>Mục thứ hai</li> <li>Mục thứ ba <ul> <li>Mục phụ</li> <li>Mục phụ</li> </ul> </li> <li>Mục thứ tư</li> </ul> |
|
7. 3 Danh sách bao gồm các yếu tố khác
Để thêm một yếu tố khác vào trong mà vẫn duy trì tính liên tục của danh sách, ta lùi phần tử vào trong bằng bốn khoảng trắng hoặc một tab, ví dụ như sau.
Thêm đoạn văn
* Công nghệ
* Lập trình
Chia sẻ kinh nghiệm lập trình, hướng dẫn lập trình một số ngôn ngữ.
* Làng Công nghệ
Output hiển thị như này:
- Công nghệ
- Lập trình
Chia sẻ kinh nghiệm lập trình, hướng dẫn lập trình một số ngôn ngữ. - Làng Công nghệ
Thêm Blockquote
* Công nghệ
* Lập trình
> Chia sẻ kinh nghiệm lập trình, hướng dẫn lập trình một số ngôn ngữ.
* Làng Công nghệ
Output hiển thị:
- Công nghệ
- Lập trình
Chia sẻ kinh nghiệm lập trình, hướng dẫn lập trình một số ngôn ngữ.
- Làng Công nghệ
Thêm một đoạn code
1. Mở tệp.
2. Tìm đoạn code sau trên dòng 21:
<html>
<head>
<title>Test</title>
</head>
3. Cập nhật tiêu đề phù hợp với tên của trang web của bạn.
Output hiển thị:
- Mở tệp.
- Tìm đoạn code sau trên dòng 21:
<html><head><title>Test</title></head> - Cập nhật tiêu đề phù hợp với tên của trang web của bạn.
8. Code
Để biểu thị một từ hoặc cụm từ dưới dạng code, hãy đặt nó trong dấu `.
| Markdown | HTML | Output |
| Trong Python, ngoại trừ `True`, `False` và `None` được viết hoa ra thì các keyword khác đều được viết dưới dạng chữ thường. | Trong Python, ngoại trừ <code>True</code>, <code>False</code> và <code>None</code> được viết hoa ra thì các keyword khác đều được viết dưới dạng chữ thường. | Trong Python, ngoại trừ True, False và None được viết hoa ra thì các keyword khác đều được viết dưới dạng chữ thường. |
Khối code
Các đoạn code được trình bày bằng cách thêm bốn khoảng trắng tại đầu mỗi dòng:
<html>
<head>
</head>
</html>
Output hiển thị:
<html><head></head></html>
9. Đường kẻ ngang - Horizontal rule
Để tạo đường kẻ ngang, hãy sử dụng ba dấu sao ***, dấu gạch ngang --- hoặc dấu gạch dưới ___ trên cùng một dòng.
***
* * *
---
- - -
___
_ _ _
Kết quả:
10. Liên kết - Link
Một liên kết được tạo tự động với cặp móc nhọn <,> đơn giản bao quanh liên kết như thế này:
<http://google.com>
Hoặc cầu kỳ hơn bằng cách đặt văn bản liên kết trong ngoặc (ví dụ: [bạn]) và kèm theo URL trong ngoặc đơn (ví dụ: (https://quantrimang.com)).
Website yêu thích của tôi là [bạn](https://quantrimang.com).
Kết quả:
Website yêu thích của tôi là bạn.
10.1 Thêm tiêu đề cho link
Ngoài ra, bạn có thể thêm một tiêu đề cho liên kết xuất hiện dưới dạng một tooltip khi người dùng di chuột qua liên kết. Để thêm tiêu đề, hãy đặt nó trong ngoặc đơn sau URL.
Website yêu thích của tôi là [bạn](https://quantrimang.com "Website
Công nghệ hàng đầu").
Website yêu thích của tôi là bạn.
10.2 URL và địa chỉ email
Để nhanh chóng biến URL hoặc địa chỉ email thành một liên kết, hãy đặt nó trong dấu ngoặc nhọn.
<https://quantrimang.com>
<info@meta.vn>
Kết quả:
https://quantrimang.com
info@meta.vn
10.3 Định dạng các liên kết
Để nhấn mạnh các liên kết, thêm dấu sao trước và sau cả cụm định dạng liên kết.
Website yêu thích của tôi là **[bạn](https://quantrimang.com "Website
Công nghệ hàng đầu").**
Chuyên mục thường theo dõi là *[Làng Công nghệ](https://quantrimang.com/lang-cong-nghe
"Chuyên mục Làng Công nghệ").*
Kết quả:
Website yêu thích của tôi là bạn.
Chuyên mục thường theo dõi là Làng Công nghệ.
11. Hình ảnh
Để thêm hình ảnh trong markdown, bạn thêm ký tự ! vào đầu tiên, sau đó ghi alt text trong ngoặc vuông [] và URL ảnh trong ngoặc đơn ().
Kết quả:
Chèn liên kết vào hình ảnh
Để thêm một liên kết vào hình ảnh trong Markdown, bạn đặt toàn bộ khai báo hình ảnh như bước trên trong ngoặc vuông [] và thêm liên kết mình cần vào ngoặc đơn () đặt ngay tiếp sau.
[](https://quantrimang.com/)
Có rất nhiều lý do để sử dụng Markdown, nhưng lý do lớn nhất là do sự tiện lợi của việc sử dụng cú pháp được thiết kế riêng nhằm giúp bạn tiết kiệm thời gian, vì vậy nhớ được các cú pháp Markdown sẽ cực kỳ có lợi đấy.
Hi vọng bài viết này hữu ích đối với bạn!
