Hướng dẫn viết bài bằng Định dạng Markdown

Nếu bạn đang đọc bài này khi đã là một người dùng của Exam24h, chắc hẳn bạn sẽ không còn lạ lẫm gì với Markdown - chuẩn viết tài liệu kỹ thuật của giới phát triển phần mềm.

Nếu bạn đang đọc bài này khi đã là một người dùng của Exam24h, chắc hẳn bạn sẽ không còn lạ lẫm gì với Markdown - chuẩn viết tài liệu kỹ thuật của giới phát triển phần mềm. Dùng Markdown bạn sẽ viết được những nội dung phong phú với công sức bỏ ra là ít nhất, tiếng Nhật gọi là サクサク (saku-saku) - viết ra cứ rào rào như kiểu "thái mấy nhát rau" hay "cắn vài nhát thịt" :smile:

Vậy Markdown viết dễ như thế nào? Sử dụng Exam24h ra sao để viết Markdown cho hiệu quả? Bài viết này sẽ đưa cho bạn câu trả lời đầy đủ nhất.

Lịch sử của Markdown

Năm 2004, John_Gruber - một designer, blogger chuyên về các sản phẩm của Apple phát điên sau khi phải viết một tài liệu HTML dài dằng dặc. Anh nảy ra ý tưởng tạo ra một ngôn ngữ cho các tài liệu trên web mà phải dễ viết, dễ đọc ở định dạng tự nhiên và có thể chuyển thành HTML. Với sự giúp đỡ của Aaron Swartz. John_Gruber thực sự đã phát minh ra Markdown mà chúng ta biết ngày nay.

Bạn hãy thử nhìn một ví dụ đơn giản nhé.

**Markdown** quá *tuyệt* phải không nào. Cảm ơn [John_Gruber](https://en.wikipedia.org/wiki/John_Gruber).

Và chúng ta sẽ có :

Markdown quá tuyệt phải không nào. Cảm ơn John_Gruber.

Ban đầu mình chẳng hiểu và cũng chẳng thích Markdown lắm đâu. Lý do ư? Mình có thể viết Word (Google Docs nếu viết online), dùng Evernote hay vô số các trình soạn thảo online/offline khác. Tuy vậy sau một vài phút mình bắt đầu phải đi tìm nút bôi đậm, in nghiêng, định dạng thành danh sách hay chèn link, chèn ảnhv.v... Đi tìm nút là đơn giản khi mới làm quen, nhưng vô cùng bất tiện khi viết một văn bản dài.

Chuyện gì xảy ra tiếp theo? Ngao ngán, ngáp, bản chất "lười và tỏ ra ngu ngốc" trỗi dậy và bắt đầu tìm đến Markdown :smile: Flow viết trở nên nhịp nhàng hơn, tay không rời bàn phím và không phải đụng đến chuột để đi click nút nữa.

Ngữ pháp cơ bản của Markdown

Tất cả cú pháp của Markdown đều rất rõ ràng và trong sáng. Nếu bạn có thể nhớ 1 lần, bạn sẽ nhớ được mãi mãi. Hãy coi bài viết này như một tài liệu tra cứu mỗi khi không nhớ ra các cú pháp của Markdown nhé!

Tiêu đề

Các lớp tiêu đề h1,h2,h3 cho đến h6 có thể viết được bằng cách thêm số lượng ký tự # tương ứng vào đầu dòng. Một ký tự # tương đương với h1, 2 ký tự # tương đương với h2 ... Tuy vậy để viết một bài viết dễ đọc thì hiếm khi cần dùng đến quá 3 ký tự này.

# Header h1
## Header h2
### Header h3

Bôi đậm và in nghiêng

Kẹp một từ ở đầu và cuối bằng 1 ký tự * để in nghiêng, 2 ký tự ** để bôi đậm, và 3 ký tự *** để vừa in nghiêng vừa bôi đậm. Nếu muốn bạn có thể dùng gạch dưới _ thay cho dấu sao *.

**Bold** and *italic* and ***both***.
__Bold__ and _talic_ and ___both___

Ngoài ra chữ có thể gạch ngang bằng 2 dấu ~~.

~~strike me~~

Viết link trong markdown bằng cách cho alt text vào trong ngoặc vuông[] và link thật vào trong ngoặc đơn (). Ví dụ ở đây giống hệt ví dụ đầu tiên về John_Gruber ở đoạn trên.

[John_Gruber](https://en.wikipedia.org/wiki/John_Gruber)

Ngoài ra bạn có thể thêm tiêu đề cho link bằng cách thêm "title" trong mô tả bên trong ngoặc đơn ().

[John_Gruber](https://en.wikipedia.org/wiki/John_Gruber "Markdown Creator")

Hình ảnh

Chèn hình ảnh trong markdown chỉ khác với chèn link đôi chút. Bạn thêm ký tự ! vào đầu tiên, sau đó ghi alt text và link ảnh vào trong ngoặc vuông [] và ngoặc đơn ().

![Atom](https://atom.io/assets/packages-d16d6cc46fd0cf01842409577e782b74.gif)

Trên Exam24h thì đơn giản hơn, bạn có thể kéo, thả hoặc là copy và paste ảnh trực tiếp vào editor để bắt đầu upload

Định dạng danh sách

Để định đạng một đoạn văn bản thành các gạch đầu dòng trong markdown, bạn dùng ký tự * và một dấu cách ở mỗi ý và dùng thêm 2 dấu cách ở đằng trước nếu muốn lùi vào một level.

* Ruby
* PHP
* Laravel
* Symfony
* Phalcon
* Python
* Flask
* Jinja2
* WSGI1.0
* Django

sẽ trở thành:

  • Ruby

  • PHP

    • Laravel

    • Symfony

    • Phalcon

  • Python

    • Flask

      • Jinja2

      • WSGI1.0

    • Django

Nếu bạn muốn dùng số để đánh dấu thì viết số và một dấu chấm .

1. number one
2. number two
3. number three

sẽ trở thành:

  1. number one

  2. number two

  3. number three

Trích dẫn

Cách viết một trích dẫn giống hệt khi bạn vẫn trả lời bình luận hay dẫn chứng trong các diễn đàn: sử dụng ký tự >.

> Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning.

Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning.

Ngữ pháp nâng cao của Markdown

Kể từ đây sẽ là các cú pháp thuộc phần nâng cao. Một số trong số này không được hỗ trợ trực tiếp bởi Markdown, nhưng được hỗ trợ bởi Exam24h :smile:

Mã code

Có 2 loại code có thể viết trong markdown: inline code (code trong dòng) và code block (đoạn code riêng). Inline code dùng ký tự phẩy ngược

The `let` keyword.

... còn code block dùng 3 ký tự phẩy ngược kẹp ở đầu và đuôi của 1 đoạn. Khi bạn muốn cú pháp hiển thị chính xác với ngôn ngữ của đoạn code thì có thể thêm định danh ngôn ngữ ở 3 ký tự phẩy ngược mở đoạnnhư dưới đây.

```python
import os
os.system('clear')
```

Ngoài ra nếu cách đầu dòng 4 dấu cách cho 1 đoạn thì đoạn đó cũng sẽ được tự động nhận là một code block.

import os
os.system('clear')

Bảng

Vẽ bảng trong Markdown sẽ hơi khó nếu bạn chưa quen. Các cột được tách nhau bằng dấu ngăn thẳng đứng | và header được tách với content bằng dấu gạch ngang -.

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

Ở dòng ngăn cách giữa header và content bạn sẽ thấy ký hiệu căn lề trái phải (cột 2 và cột 3) bằng dấu :. Bảng trên sẽ được render thành cấu trúc HTML như dưới đây.

Tables

Are

Cool

col 3 is

right-aligned

$1600

col 2 is

centered

$12

zebra stripes

are neat

$1

Markdown được thiết kế để dễ nhìn ngay ở định dạng tự nhiên. Vì vậy bạn có thể đánh dấu mỗi link thành từng số và viết tất cả link thực tương ứng với các số ở cuối cùng.

Let's check out [Wikipedia][1] and [Google][2].
...
...
[1]: https://en.wikipedia.org "Wikipedia"
[2]: https://www.google.com "Google"

Bạn thậm chí có thể viết link trực tiếp như là WYSIWYG: https://exam24h.com .

Chú thích

Chú thích hay footnote sẽ dùng ký tự ^ bên trong ngoặc vuông [] để đánh dấu và viết lại giải thích ở cuối, cách viết tương tự như link tài liệu tham khảo bên trên.

John Gruber[^1].
...
...
[^1]: writer, blog publisher, UI designer, the inventor of the Markdown publishing format.

Escape

Sẽ có những lúc bạn cần dùng đến đúng những ký tự mà Markdown đang sử dụng, ví dụ đơn giản như khi muốn viết *bold* mà không bị in đậm. Khi đó hãy sử dụng ký tự escape \

\*bold\*

Emoji :smile:

Emoji là các biểu tượng thể hiện cảm xúc bắt nguồn từ bộ gõ của Mac/Iphone/Ipad. Kipalog cho phép bạn viết đủ bộ emoji theo cheatsheet của Github :smile:

:smile:

Kết luận

Markdown quả thật rất tuyệt đối với giới lập trình và phát triển phần mềm. Hi vọng bài viết này có thể trở thành một bản ghi nhớ hữu ích cho bạn, và hi vọng bạn sẽ không bao giờ phải bỏ tay ra khỏi bàn phím để sờ đến chuột khi viết bài nữa

Happy writing with Exam24h