Cú pháp Markdown căn bản

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ỉ?

• Markdown là gì và tại sao nên học nó ngay hôm nay?

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ụ: ### Quản Trị Mạng).

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.

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).

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).

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ừ.

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.

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.

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ị:

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.

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 `.

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>

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ụ: [Quản Trị Mạng]) và kèm theo URL trong ngoặc đơn (ví dụ: (https://quantrimang.com)).

Website yêu thích của tôi là  [Quản Trị Mạng](https://quantrimang.com).

Kết quả:

Website yêu thích của tôi là Quản Trị Mạng.

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à [Quản Trị Mạng](https://quantrimang.com "Website
Công nghệ hàng đầu").

Website yêu thích của tôi là Quản Trị Mạng.

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à **[Quản Trị Mạng](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à Quản Trị Mạng.
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 ().

![The best thing to hold onto in life is each other.!](/photos/image/
2019/05/wedding-1.jpg "Wedding - Save the date")

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.

[![The best thing to hold onto in life is each other.!](/photos/image/
2019/05/wedding-1.jpg "Wedding - Save the date")](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!