Hướng dẫn sử dụng Markdown trên Kipalog
Markdown
5
Tutorial
17
White

Vu Nhat Minh viết ngày 18/04/2016

Markdown Guide
Hình ảnh lấy từ http://blog.ghost.org/markdown/

Nếu bạn đang đọc bài này khi đã là một người dùng của Kipalog, 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 Kipalog 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 ảnh v.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~~

Link

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 Kipalog 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 :smile:

Atom

Đị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 Kipalog :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ạn như 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

Link tài liệu tham khảo

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"

Link nhanh

Bạn thậm chí có thể viết link trực tiếp như là WYSIWYG: http://kipalog.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:

Phím tắt trên Kipalog

Kipalog cung cấp một số phím tắt giúp cho viết Markdown nhanh và thuận tiện hơn. Các bạn hãy tham khảo bảng trợ giúp Ngữ pháp Markdown nhé!

help

Hãy bắt đầu bằng những bước đơn giản: Ctrl/⌘ + B cho in đậm, Ctrl/⌘ + I cho in nghiêng và Ctrl/⌘ + K cho link nhé!

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

Happy writing with Kipalog

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Vu Nhat Minh

54 bài viết.
724 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
116 29
Nếu bạn thường vào trang mua sắm của amazon, chắc sẽ chẳng lạ gì với menu Shop by Department. Tốc độ hiển thị nội dung của menu là tức thì so với d...
Vu Nhat Minh viết hơn 2 năm trước
116 29
White
87 4
Lời người dịch Người dịch là một developer , sau khi tìm đọc được bài viết này bằng bản gốc tiếng Anh đã cảm thấy như được "khai sáng" về khả năng...
Vu Nhat Minh viết hơn 2 năm trước
87 4
White
56 5
Đây là phần cuối của một series chuyên về thiết kế UI. Bạn nên đọc (Link) trước khi bắt đầu đọc phần này. Luật số 7: "Ăn trộm" như là một nghệ sỹ...
Vu Nhat Minh viết hơn 2 năm trước
56 5
Bài viết liên quan
Male avatar
7 4
Yandex được mệnh danh là google của Nga , có rất nhiều dịch vụ tương tự với google như : mail , maps , tranlaste , ... .Sau Khi google và microsoft...
Frey viết 2 năm trước
7 4
White
11 4
(Link) (Link) (Link) Ở 2 phần tut trước, mình đã hướng dẫn khá chi tiết cách viết một ứng dụng camera có tích hợp chức năng nhận diện khuôn mặ...
HoangPH viết gần 3 năm trước
11 4
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
54 bài viết.
724 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!