Cú pháp Markdown cơ bản — Phan Nhật Chánh

Bài viết này cung cấp một mẫu các cú pháp Markdown cơ bản bạn có thể được sử dụng để tạo ra các tệp nội dung khi sử dụng Gatsby, Hugo, Jekyll, Next,...

Headings

Các thẻ tiêu đề từ h1 đến h6 được xây dựng theo cú pháp với một dấu # phía trước cho mỗi cấp độ:

# H1
## H2
### H3
#### H4
##### H5
###### H6 

Sử dụng 3 dấu === hoặc 3 dấu ---

H1
===

H2
---

Comments

Sử dụng comment trong markdown. Khi chạy nó sẻ bỏ qua những dòng comment đó.

<!--
This is a comment
-->

Bold & Italic & Strikethrough

Để nhấn mạnh một đoạn văn bản ta thường sử dụng kiểu chữ đậm. Ví dụ: Đoạn văn bản sau được hiển thị dưới dạng văn bản in đậm. Trong Markdown bạn có thể sử dụng như sau:
```
**rendered as bold text**
__rendered as bold text__
```
Để nhấn mạnh một đoạn văn bản ta thường sử dụng kiểu chữ in nghiêng. Ví dụ: Đoạn văn bản sau được hiển thị dưới dạng văn bản in nghiêng. Trong Markdown bạn có thể sử dụng như sau:
```
*rendered as italicized text*
_rendered as italicized text_
```
Bạn có thể ~~gạch ngang đoạn văn bản~~ bằng cách.
```
~~Strike through this text.~~
```
Bạn có thể sử dụng kết hợp chữ in đậm, in nghiêng và ~~gạch ngang~~ như sau:
```
***bold and italics***
~~**strikethrough and bold**~~
~~*strikethrough and italics*~~
~~***bold, italics and strikethrough***~~
```
in đậm và nghiêng
~~gạch ngang và in đậm~~
~~gạch ngang và in nghiêng~~
~~in đậm, in nghiêng và gạch ngang~~

List

Unordered

Bạn có thể sử dụng bất kỳ ký hiệu nào sau đây *, -, + để biểu thị dấu đầu dòng cho từng item trong list.

* valid bullet
- valid bullet
+ valid bullet

Ordered

Một list với các items có thứ tự rõ ràng

1. Ordered item.
2. Ordered item.
3. Ordered item.

- Unordered item.
- Unordered item.
  1. Nested ordered item.
  2. Nested ordered item.

Thông thường cú pháp này được sử dụng cho các danh sách dưới dạng liệt kê các công việc hay nhiệm vụ đã thực hiện hoặc chưa thự hiện. Để tạo list nhiệm vụ, hãy thêm dấu gạch ngang - và dấu ngoặc vuông với dấu cách [ ] trước các list nhiệm vụ. Để chọn một checkbox hãy thêm dấu x vào giữa các dấu ngoặc [x].

- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media

Links

Sử dụng một số cú pháp markdown dưới đây cho các liên kết: địa chỉ, email,...

<https://phannhatchanh.com>
<hello@phannhatchanh.com>
[Phan Nhật Chánh](https://phannhatchanh.com)
[My Site](https://phannhatchanh.com "Phan Nhật Chánh")

Images

Hình ảnh có cú pháp tương tự như liên kết nhưng nó có dấu chấm than ở trước.

![Alt text](/link/to/images)
![Alt text](/link/to/images 'image title')
![Alt text][id]

Codes

Inline code

Sử dụng dấu ` cho code trên dòng văn bản.

In this example, `<section></section>` should be wrapped as **code**.

Ví dụ: In this example, <section></section> should be wrapped as code.

Indented Code

Hoặc thụt lề một số dòng code tương đương phím Tab

// Some comments
line 1 of code
line 2 of code
line 3 of code

Block Fenced Code

Sử dụng ``` để chặn nhiều dòng code với thuộc tính ngôn ngữ.

```markdown
Sample text here...
```

Syntax Highlighting

Để kích hoạt nó, chỉ cần thêm phần mở rộng tệp của ngôn ngữ bạn muốn sử dụng ngay sau ``` khi đó cú pháp sẽ tự động được áp dụng trong HTML. Ví dụ: để áp dụng syntax highlighting cho code Python:

```python
print ('Hello, world')
```

Tables

Table được tạo bằng cách sử dụng các ký tự | : - để làm dải phân cách giữa cột và hàng. Lưu ý rằng các đường phân cách giữa cột và hàng không cần phải được căn chỉnh theo chiều dọc. Ta có thể sử dụng trang web này để tạo một Table nhanh chóng trong markdown.

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

Tables	Are	Cool
col 3 is	right-aligned	$1600
col 2 is	centered	$12
zebra stripes	are neat	$1

Blockquotes

Để trích dẫn các khối nội dung từ một nguồn khác trong tài liệu của bạn. Thêm ký tự > vào trước bất kỳ văn bản nào bạn muốn trích dẫn:

> Content of the blockquote.
> In the same paragraph of above blockquote.

Content of the blockquote. In the same paragraph of above blockquote. Các khối trích dẫn cũng có thể được lồng vào nhau:

> Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue. Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.
>> Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.

Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue. Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.

Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.

Horizontal Rules

Thẻ <hr /> thường sử dụng để "ngắt theo chủ đề". Trong Markdown, bạn có thể tạo <hr /> bằng bất kỳ cú pháp nào sau đây:
- ___ ba dấu gạch dưới liên tiếp
- --- ba dấu gạch ngang liên tiếp
- *** ba dấu hoa thị liên tiếp

Inline HTML

Bạn có thể hoàn toàn dùng được HTML và sử dụng class cũng như id trong markdown, xem ví dụ dưới đây

Paragraph in Markdown.

<div class="class">
    This is <b>HTML</b>
</div>

Paragraph in Markdown.

Insert Footnotes

Footnotes (thêm chú thích cuối trang) Giống như Wikipedia, đây là phần chú thích cho phép bạn thêm ghi chú và tài liệu tham khảo mà không làm lộn xộn phần nội dung của tài liệu. Khi bạn tạo chú thích cuối trang, một chỉ số trên có liên kết sẽ xuất hiện nơi bạn đã thêm tham chiếu đến chú thích cuối trang. Bạn đọc có thể bấm vào đường link để chuyển đến nội dung phần chú thích cuối trang.

Để tạo tham chiếu chú thích cuối trang, hãy thêm dấu mũ và số nhận dạng như [^1]. Số nhận dạng có thể là số hoặc từ, nhưng chúng không được chứa dấu cách hoặc tab.

This is a digital footnote[^1].
This is a footnote with "label"[^label]

Thêm chú thích cuối trang bằng cách sử dụng dấu mũ và số khác bên trong dấu ngoặc vuông với dấu hai chấm và văn bản [^1]: My footnote. Bạn không cần phải đặt chú thích ở cuối tài liệu. Bạn có thể đặt chúng ở bất kỳ đâu ngoại trừ bên trong các phần tử khác như list, dấu ngoặc kép và table thì nó sẽ tự động hiển thị ở cuối trang.

[^1]: This is a digital footnote
[^label]: This is a footnote with "label"

First Footnote¹
Second Footnote²
Third Footnote³
Random strings as the identifier ^@#$%⁴
Footnotes with some URL in it⁵

Footnotes

First Footnote ↩
Second Footnote ↩
Third Footnote // This doesn't get rendered. ↩
A footnote on the label: "@#$%". ↩
Cover Photo by Yancy Min on Unsplash ↩