Markdown và những cú pháp cơ bản

Markdown là ngôn ngữ đánh dấu tối giản (lightweight markup languague) được phát triển bởi John Gruber và có sự đóng góp lớn từ Aaron Swartz

Có thể bạn sẽ thắc mắc là tại sao lại có markdown khi mà người làm blog đã có những trình soạn thảo blog hay MS Word theo kiểu WYSIWYG (viết tắt của What You See Is What You Get trong tiếng Anh)? Hay là tại sao không viết bằng HTML luôn?

Thực ra markdown không mang trong mình sứ mạnh của “kẻ hủy diệt HTML” hay gì, mà mục đích của nó chính là làm đơn giản hóa việc đánh dấu, nhấn mạnh từ ngữ trong văn bản và tăng tốc độ viết bài mà không quan tâm đến các thẻ (tags) như HTML.

Những trình chỉnh sửa WYSIWYG thì người dùng phải dùng chuột thao tác ấn vào những kiểu dịnh dạng mong muốn như in đậm, in nghiêng và cũng bị giới hạn tính năng mà trình soạn thảo đó cung cấp. Và bạn cũng không thể đọc, chỉnh sửa mọi nơi mọi lúc bởi vì mở, chỉnh sửa văn bản đó cần phải truy cập vào trình soạn thảo đó.

Markdown lại có những điểm mạnh riêng của nó nhất là đối với nhiều người phải viết nhiều ví dụ như:

• Markdown cung cấp khả năng định dạng nhanh chóng, dễ nhớ, dễ áp dụng
• Có thể dọc Markdown dễ dàng vì ký tự dùng dịnh dạng đơn giản hơn nhiều so với cách định dạng kiểu thẻ (tag) như trên HTML
• Tăng tốc độ đánh máy vì không bị cản trở phải dùng chuột định dạng
• Không phụ thuộc vào nền tảng hay là bị cố định vào trình soạn thảo văn bản nào hết

Theo như John Gruber, tác giả tạo ra Markdown, đã viết như sau:

The overriding design goal for Markdown’s formatting syntax is to make it as readable as possible. The idea is that a Markdown-formatted document should be publishable as-is, as plain text, without looking like it’s been marked up with tags or formatting instructions. While Markdown’s syntax has been influenced by several existing text-to-HTML filters, the single biggest source of inspiration for Markdown’s syntax is the format of plain text email.

– John Gruber

Xin phép được dịch sang tiếng việt là:

Mục tiêu thiết kế quan trọng đối với cú pháp định dạng của Markdown là làm cho nó dễ đọc nhất có thể. Ý tưởng là khi dùng Markdown định dạng văn bản xong rồi thì nó trông càng giống với văn bản chỉ có chữ thuần túy nhất có thể mà không có vẻ như đã được định dạng. Mặc dù cú pháp định dạng của Markdown có bị ảnh hưởng bởi một vài bộ lọc chuyển văn bản sang dạng HTML hiện có, nhưng nguồn cảm hứng lớn duy nhất cho cú pháp định dạng của Markdown là định dạng của email thuần túy

– John Gruber

Còn bây giờ thì chúng ta vào chủ đề chính với cú pháp cơ bản của markdown

1 Tiêu đề (Heading)

Tiêu đề có nhiều cấp được chia ra từ h2 tới h6 được tạo thành bằng cách thêm # cho mỗi cấp:

1
2
3
4
5

## h2 Tiêu đề
### h3 Tiêu đề
#### h4 Tiêu đề
##### h5 Tiêu đề
###### h6 Tiêu đề

Khi hiển thị văn bản sẽ như sau:

h2 Tiêu đề

h3 Tiêu đề

h4 Tiêu đề

h5 Tiêu đề

h6 Tiêu đề

Tương đương với HTML như sau:

1
2
3
4
5

<h2>h2 Tiêu đề</h2>
<h3>h3 Tiêu đề</h3>
<h4>h4 Tiêu đề</h4>
<h5>h5 Tiêu đề</h5>
<h6>h6 Tiêu đề</h6>

1

### Đây là tiêu đề H3 {#custom-id}

1

<h3 id="custom-id">Đây là tiêu đề H3</h3>

2 Giải thích (comment)

Giải thích, chú thích sẽ không hiện ra trên giao diện văn bản. Trong markdown giống như HTML.

1
2
3

<!--
Đây là dòng giải thích và không hiện ra trên giao diện
-->

Dòng bên dưới giải thích này sẽ KHÔNG được hiển thị:

3 Dòng kẻ gạch ngang (Horizontal Rules)

Trong HTML thì thẻ <hr> dùng tạo ra dòng kẻ gạch ngang ngắt các đoạn văn bản. Trong Markdown thì ta có thể tạo ra dòng kẻ ngang với cú pháp như sa:

• ___: Ba ký tự gạch dưới liên tiếp
• ---: Ba ký tự gạch giữa liên tiếp
• ***: Ba ký tự hoa thị liên tiếp

Khi đó văn bản sẽ được hiển thị như sau:

4 Sao chép văn bản (Body Copy)

Sao chép văn bản như bình thường, văn bản thuần túy sẽ được bọc trong cặp thẻ <p></p> trong hiển thị HTML

Vì vậy khi sao chép văn bản này

1
2
3

Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri,
animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex,
soluta officiis concludaturque ei qui, vide sensibus vim ad.

Khi hiển thị giao diện HTML sẽ như sau:

1

<p>Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.</p>

Ngắt xuống dòng các đoạn văn bản được thực hiện với môt dòng trống

5 Chèn code HTML cùng dòng (Inline HTML)

Nếu bạn muốn thêm thẻ HTML (cùng với class) thì chỉ việc đơn giản là dùng HTML

1
2
3

<div class="class">
    Đây là <b>HTML</b>
</div>

6 Nhấn mạnh (Emphasis)

In đậm (Bold)

Dùng để nhấn mạnh một đoạn văn bản với font chữ đậm hơn bình thường

Đoạn văn bản sau được hiển thị in đậm

1
2

**Hiển thị in đậm**
__Cũng hiển thị in đậm__

Tương đương HTML như sau:

1

<strong>Hiển thị in đậm</strong>

In nghiêng (Italics)

Dùng để nhấn mạnh một đoạn văn bản in nghiêng

Đoạn văn bản này được hiển thị in nghiêng.

1
2

*Hiển thị in nghiêng*
_Cũng hiển thị in nghiêng_

Tương đương khi viết trên HTML như sau:

1

<em>Đoạn văn bản hiển thị in nghiêng</em>

Gạch ngang giữa chữ (Strikethrough)

Trong GFMGitHub flavored Markdown bạn có thể gạch ngang giữa chữ.

1

~~Cú pháp để gạch ngang~~

Khi đó kết quả hiển thị ra giao diện như:

Đoạn này bị gạch ngang giữa chữ

Tương đương nếu viết bằng HTML như sau:

1

<del>Đoạn này bị gạch ngang giữa chữ</del>

Kết hợp định dạng (Combination)

In đậm, in nghiêng và gạch ngang giữa chữ có thể được dùng kết hợp với nhau.

1
2
3
4

***Cú pháp in đậm và in nghiêng***
~~**Cú pháp gạch ngang giữa chữ được in đậm**~~
~~*Cú pháp gạch ngang giữa chữ và in nghiêng*~~
~~***Cú pháp gạch ngang giữa chữ, in đậm và in nghiêng***~~

Khi hiển thị trên giao diện sẽ như sau:

Cú pháp in đậm và in nghiêng

Cú pháp gạch ngang giữa chữ được in đậm

Cú pháp gạch ngang giữa chữ và in nghiêng

Cú pháp gạch ngang giữa chữ, in đậm và in nghiêng

Tương đương khi viết bằng HTML như sau:

1
2
3
4

<em><strong>Cú pháp in đậm và in nghiêng</strong></em>
<del><strong>Cú pháp gạch ngang giữa chữ được in đậm</strong></del>
<del><em>Cú pháp gạch ngang giữa chữ và in nghiêng</em></del>
<del><em><strong>Cú pháp gạch ngang giữa chữ, in đậm và in nghiêng</strong></em></del>

7 Đoạn trích dẫn (Blockquotes)

Bạn có thể chèn trích dẫn một đoạn văn bản với cú pháp thêm ký tự > trước bất kỳ đoạn văn bản nào mà bạn thể hiện là trích dẫn.

1

> **Đời Dev** là blog chuyên chém gió về web development & đời dev.

Khi hiển thị giao diện HTML như sau:

Đời Dev là blog chuyên chém gió về web development & đời dev.

Tương đương khi viết bằng HTML như sau:

1
2
3
4
5

<blockquote>
  <p>
    <strong>Đời Dev</strong> là blog chuyên chém gió về web development & đời dev.
  </p>
</blockquote>

Đoạn trích dẫn cũng có thể được lồng vào nhau như sau:

1
2

> **Đời Dev** là blog chuyên chém gió về web development & đời dev.
>> Chủ đề chính là chém về frontend và bí kíp coding

Khi hiển thị ra văn bản như sau:

Đời Dev là blog chuyên chém gió về web development & đời dev.

Chủ đề chính là chém về frontend và bí kíp coding

8 Danh sách (Lists)

Không có thứ tự (Unordered)

Tạo danh sách không có thứ tự với cú pháp dùng các ký tự hoa thị (*), gạch ngang giữa(-), dấu cộng (+):

1
2
3

* Dấu hoa thị sẽ tạo ra chấm tròn đầu dòng
- Dấu trừ cũng tạo ra chấm tròn
+ Dấu cộng cũng tạo ra chấm tròn

Ví dụ:

1
2
3
4
5
6
7
8

Chủ đề blog Đời Dev
* Nhật ký
- Bí kíp coding
+ Học tiếng anh
- Chém gió
  + Chém gió Web Dev
  * Chém gió đời Dev
- Sách

Khi hiển thị ra văn bản như sau:

Chủ đề blog Đời Dev

• Nhật ký

• Bí kíp coding

• Học tiếng anh

• Chém gió
  • Chém gió Web Dev
  • Chém gió đời Dev
• Sách

Tương đương khi viết HTML:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<ul>
  <li>Nhật ký</li>
  <li>Bí kíp coding</li>
  <li>Học tiếng anh</li>
  <li>Chém gió
    <ul>
      <li>Chém gió Web Dev</li>
      <li>Chém gió đời Dev</li>
    </ul>
  </li>
  <li>Sách</li>
</ul>

Có thứ tự (Ordered)

Danh sách có thứ tự thì có cú pháp như sau:

1
2
3
4
5

Ví dụ mong ước đời dev
1. Một vợ
2. Hai con
3. Ba Lầu
4. Bốn bánh

Khi hiển thị ra văn bản như sau:

Ví dụ mong ước đời dev

1. Một vợ
2. Hai con
3. Ba Lầu
4. Bốn bánh

Tương đương HTML như sau:

1
2
3
4
5
6

<ol>
  <li>Một vợ</li>
  <li>Hai con</li>
  <li>Ba Lầu</li>
  <li>Bốn bánh</li>
</ol>

1
2
3
4
5

Ví dụ như trên nhưng ta sẽ viết như sau:
1. Một vợ
1. Hai con
1. Ba Lầu
1. Bốn bánh

Danh sách việc cần làm (Task Lists)

Bạn có thể tạo danh sách việc cần làm với ô đánh dấu đầu dòng. Cú pháp là bắt đầu dòng với ký tự gạch giữa - theo sau là khoảng trắng và cặp ngoặc vuông []. Để đánh dấu thì gõ ký tự x vào giữa cặp ngoặc vuông [x]

1
2
3

- [x] Tạo blog Đời Dev
- [ ] Chém gió về Web Dev
- [ ] Đọc sách

Khi đó văn bản sẽ được hiển thị như sau:

• Tạo blog Đời Dev
• Chém gió về Web Dev
• Đọc sách

9 Viết Mã (Code)

Mã cùng dòng (Inline Code)

Nhập đoạn mã trong cặp thẻ `.

1

Trong ví dụ này thì , `<section></section>` sẽ được hiển thị là **Mã**.

Hiển thị văn bản như sau:

Trong ví dụ này thì , <section></section> sẽ được hiển thị là Mã.

Nếu viết bằng HTML thì trình bày như sau:

1
2
3

<p>
  Trong ví dụ này thì , <code>&lt;section&gt;&lt;/section&gt;</code> sẽ được hiển thị là <strong>Mã</strong>.
</p>

Thụt lùi đầu dòng (Indented Code)

Muốn thụt lùi đầu dòng thì ta dùng phím tab hoặc khoảng trắng:

1
2
3
4

    // Vài ghi chú
    Dòng 1 của mã
    Dòng 2 của mã
    Dòng 3 của mã

Khi đó văn bản hiển thị như sau:

// Vài ghi chú
Dòng 1 của mã
Dòng 2 của mã
Dòng 3 của mã

Trình bày bằng HTML sẽ như dưới:

1
2
3
4
5
6
7
8

<pre>
  <code>
    // Vài ghi chú
    Dòng 1 của mã
    Dòng 2 của mã
    Dòng 3 của mã
  </code>
</pre>

Đoạn trích mã (Block Fenced Code)

Dùng kiểu “hàng rào” bằng 3 dấu lùi liên tiếp cạnh nhau ``` để tạo khối mã

1
2
3

```markdown
Bên trong là đoạn mã ...
```

Trình bày bằng HTML:

1
2
3

<pre language-html>
  <code>Bên trong là đoạn mã ...</code>
</pre>

Hiển thị màu cho cú pháp (Syntax Highlighting)

Markdown cũng hỗ trợ đánh dấu cú pháp.Để làm vậy thì chỉ cần thêm phần mở rộng của ngôn ngữ mà bạn dùng ngay sau mã ký tự “hàng rào” ```js và những cú pháp sẽ được tự động thêm màu vào khi hiển thị HTML

Ví dụ hiển thị đoạn mã sau viết bằng ngôn ngữ javascript

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

```js
grunt.initConfig({
  assemble: {
    options: {
      assets: 'docs/assets',
      data: 'src/data/*.{json,yml}',
      helpers: 'src/custom-helpers.js',
      partials: ['src/partials/**/*.{hbs,md}']
    },
    pages: {
      options: {
        layout: 'default.hbs'
      },
      files: {
        './': ['src/templates/pages/index.hbs']
      }
    }
  }
};

Hiển thị trên văn bản như sau:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

grunt.initConfig({
  assemble: {
    options: {
      assets: 'docs/assets',
      data: 'src/data/*.{json,yml}',
      helpers: 'src/custom-helpers.js',
      partials: ['src/partials/**/*.{hbs,md}']
    },
    pages: {
      options: {
        layout: 'default.hbs'
      },
      files: {
        './': ['src/templates/pages/index.hbs']
      }
    }
  }
};

10 Bảng (Tables)

Bảng được tạo ra bằng cách sắp xếp các ký tự gạch đứng | chia ô và phân cách giữa tiêu đề bảng và nội dung bảng bằng dòng các ký tự gạch giữa - liên tiếp. Lưu ý rằng các gạch đứng không nhất thiết phải thẳng theo hàng dọc mà có thể lệch nhau nhưng khi hiển thị ra giao diện thì vẫn là bảng đều các cạnh

Tables are created by adding pipes as dividers between each cell, and by adding a line of dashes (also separated by bars) beneath the header. Note that the pipes do not need to be vertically aligned.

1
2
3
4
5
6
7

```markdown
| Tiêu đề | Mô tả chi tiết |
| ------ | ----------- |
| Cú pháp Markdown cơ bản | Trình bày cơ bản cách trang trí văn bảng bằng Markdown. |
| Phía sau website | Câu chuyện về mọi thứ phía sau website để cho nó hoạt động. |
| Lập trình mọi thứ    | Chém gió về tương lai lập trình mọi thứ. |
```

Khi hiển thị ra giao diện sẽ trông như thế này:

Để tạo bảng này thì viết HTML như sau:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

<table>
  <thead>
    <tr>
      <th>Tiêu đề</th>
      <th>Mô tả chi tiết</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cú pháp Markdown cơ bản</td>
      <td>Trình bày cơ bản cách trang trí văn bảng bằng Markdown.</td>
    </tr>
    <tr>
      <td>Phía sau website</td>
      <td>âu chuyện về mọi thứ phía sau website để cho nó hoạt động.</td>
    </tr>
    <tr>
      <td>Lập trình mọi thứ</td>
      <td>Chém gió về tương lai lập trình mọi thứ.</td>
    </tr>
  </tbody>
</table>

1
2
3
4
5

| Tiêu đề (canh giữa) | Mô tả chi tiết (canh phải)|
| :-------: | --------------: |
| Cú pháp Markdown cơ bản | Trình bày cơ bản cách trang trí văn bảng bằng Markdown. |
| Phía sau website | Câu chuyện về mọi thứ phía sau website để cho nó hoạt động. |
| Lập trình mọi thứ    | Chém gió về tương lai lập trình mọi thứ. |

11 Liên kết (Links)

Liên kết cơ bản (Basic Link)

1
2
3

<https://doidev.com>
<contact@doidev.com>
[Đời Dev](https://doidev.com)

Khi hiển thị ra văn bản thì giống như bên dưới. Khi rê chuột vào link thì không có gợi ý hiển thị ra

https://doidev.com

[email protected]

Đời Dev

Khi trình bày bằng HTML thì sẽ như thế này:

1
2
3

<a href="https://doidev.com">https://doidev.com</a>
<a href="mailto:[email protected]">[email protected]</a>
<a href="https://doidev.com">Đời Dev</a>

Thêm tiêu đề (Add a Title)

1

[Đời Dev](https://doidev.com "Chuyên chém gió về Web Dev & đời Dev...")

Hiển thị ra văn bản như bên dưới, khi rê chuột vào sẽ có gợi ý hiện ra:

Đời Dev

Trình bày bằng HTML thì sẽ như sau:

1

<a href="https://doidev.com" title="Chuyên chém gió về Web Dev & đời Dev">Đời Dev</a>

Neo Liên kết (Named Anchors)

Liên kết neo giúp bạn đi nhanh tới một điểm neo trong cùng một trang. Ví dụ như mỗi chương như sau:

1
2
3
4

## Table of Contents
  * [Chương 1 - Chém gió cấp 1](#chapter-1)
  * [Chương 1 - Chém gió cấp 2](#chapter-2)
  * [Chương 1 - Chém gió cấp 3](#chapter-3)

sẽ chuyển nhanh tới điểm sau:

1
2
3
4
5
6
7
8

## Chương 1 - Chém gió cấp 1 <a id="chapter-1"></a>
Chương này mô tả kỹ năng chém gió của lính mới gà mờ.

## Chương 2 - Chém gió cấp 2 <a id="chapter-2"></a>
Kỹ năng chém gió đã lên một cấp bậc mới nhưng vẫn bị chê là nổ.

## Chương 3 - Chém gió cấp 3 <a id="chapter-3"></a>
Kỹ năng chém gió đã có thể tạo bão và gây rúng động thị trường.

12 Chú thích (Footnotes)

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 văn bản. Khi tạo chú thích thì sẽ có số nằm cao hơn chữ và có liên kết với nơi mà bạn đặt chú thích tham khảo. Khi mà người đọc bấm vào liên kết sẽ được đưa tới nội dung của chú thích tại cuối văn bản

Để tạo nơi cần chú thích tham khảo thì thêm ký tự mũ (caret) và dấu hiệu liên kết bên trong cặp ngoặc vuông [^1].Dấu hiệu liên kết có thể là số, chữ nhưng không có khoảng trắng. Dấu hiệu liên kết chỉ nhảy tới liên kết chú thích cuối văn bản. Nếu ngoài văn bản thì dấu hiệu liên kết không có hiệu lực

Để tạo nội dung chú thích thì sử dụng cú pháp dùng mũ và dấu liên kết trong ngoặc vuông và theo sau là dấu hai chấm, sau dấu hai chấm là nội dung chú thích giải thích cho nơi tác giả tạo dấu hiệu [^1]: Giải thích . Nội dung chú thích có thể đặt ở đâu cũng được, nhưng thường thì đặt cuối văn bản.

1
2
3
4
5

Web doidev.com nói về cái gì[^1].
Danh mục chính mà web nói tới là gì[^danh_muc]

[^1]: Chuyên chém gió về Web Dev & đòi Dev
[^danh_muc]: Chém gió Web Dev, Chém gió đời Dev, nhật ký, Bí kíp coding... 

Web doidev.com nói về cái gì¹. Danh mục chính mà web nói tới là gì²

13 Hình ảnh (Images)

Cú pháp chèn hình cũng tương tự như liên kết nhưng mà có thêm một dấu chấm than phía trước cặp ngoặc vuông

1

![Minion](https://octodex.github.com/images/minion.png)

hoặc khi có thêm alt:

1

![Alt text](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")

Giống như liên kết hình ảnh cũng có thể có cú pháp kiểu chú thích

1

![Alt text][id]

Với một tham chiếu tới địa chỉ của hình ảnh

1

[id]: https://octodex.github.com/images/dojocat.jpg  "The Dojocat"

Hi vọng là sau khi đọc xong bài chém gió cấp độ vỡ lòng này thì các bạn có chút hình dung về Markdown.

Những cú pháp ở đây cũng chỉ là cơ bản nhưng nó hầu hết đã đáp ứng nhu cầu trang trí văn bản thông thường. Chúc các bạn viết tốt bằng Markdown nha

Các bạn đừng quên Bookmark trang này vào có gì mở ra tham khảo cú pháp khi bí nhé