Dùng Markdown viết content cho blog
Markdown là một ngôn ngữ markup tối giản (lightweight markup language) được phát triển bởi John Gruber và có sự đóng góp lớn từ Aaron Swartz. Gruber là một người rất nổi tiếng, ông hiện đang sở hữu blog công nghệ Daring Fireball và Swartz là người góp phần tạo nên RSS, Reddit, Creative Common (hiện anh đã mất).
Markdown ra đời năm 2004 với tiêu chí “Dễ viết - dễ đọc - dễ học và có thể chuyển tự động sang tập thẻ HTML (XTHML)”. Nó cho phép bạn soạn bài viết và bình luận với các đường link, lists, và các kiểu khác nhau sử dụng ký tự thường và dấu chấm câu. Với markdown, bạn sẽ rất dễ dàng để tạo kiểu cho văn bản của mình và cũng không cần phải học nhiều mã HTML phức tạp.
Bạn có thể sử dụng Markdown ở rất nhiều nơi như:
- StackOverflow dùng Markdown cho phần posts và comments.
- GitHub dùng Markdown để thảo luận trong các issues và pull requests.
- Reddit dùng Markdown để định dạng các comment.
- Slack, Gitter và các IM khác dùng Markdown để định dạng các message.
- Jekyll, Octopress, Hexo và nhiều trang web làm static site khác cũng dùng Markdown.
- GitBook dùng Markdown để viết books.
- WordPress thì dùng Markdown cho phần bài viết và comment.
- Rất nhiều người dùng Markdown cho các trang blog của họ (trong đó có tôi).
- Rất nhiều tài liệu open source project đã được viết bằng Markdown.
- how-to-markdown dùng Markdown để format các bài thực hành.
Trong bài viết này tôi sẽ giới thiệu một vài quy tắc đơn giản để bạn có thể dùng nó viết blog.
I. Headings
Đối với heading thì trong HTML bạn có thể dùng thẻ <h1> -> <h6> để định dạng thì tương tự trong markdown bạn cũng có thể dùng # để định dạng
# h1 Heading
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading
Kết quả bạn nhận được sẽ là:
h1 Heading
h2 Heading
h3 Heading
h4 Heading
h5 Heading
h6 Heading
Tương đương với trong HTML bạn viết
<h1>h1 Heading</h1>
<h2>h2 Heading</h2>
<h3>h3 Heading</h3>
<h4>h4 Heading</h4>
<h5>h5 Heading</h5>
<h6>h6 Heading</h6>
II. Horizontal Rules
Trong markdown bạn cũng có thể tạo đường line ngang giống thẻ <br> trong html bằng cách
___ : dùng 3 gạch dưới liên tiếp
--- : dùng 3 gạch ngang liên tiếp
*** : dùng 3 dấu * liên tiếp
Kết quả:
III. Emphasis
1. Bold <strong>
Để bôi đậm 1 đoạn text thì ta dùng 2 dấu * cho mở và đóng đoạn text
**bold text**
bold text
2. Italics <em>
Đối với in nghiêng 1 đoạn text thì ta dùng dấu gạch dưới _ cho mở và đóng đoạn text
_italic text_
italic text
3. Strikethrough
Đối với dấu gạch ngang text thì ta dùng 2 dấu ~ cho mở và đóng đoạn text
~~strikethrough text~~
strikethrough text
Bạn có thể kết hợp chúng lại như thế này ~~_**combined**_~~ và chúng ta có kết quả combined
IV. Lists
List là một thành phần quan trọng giúp chúng ta dễ dàng cấu trúc thông tin.
Bạn có thể dùng dấu * or - or + or các số để định dạng. Để tạo list con cho nó thì ra dùng 1 dấu tab hoặc các space để ra dấu với Markdown.
- One
- One.1
- One.2
- One
- One.1
- One.2
1. One
2. Two
3. Three
- One
- Two
- Three
* One
* One.1
* One.2
- One
- One.1
- One.2
+ One
+ One.1
+ One.2
- One
- One.1
- One.2
Có một lưu ý nhỏ là khi bạn dùng list, nếu giữa nó bạn chèn 1 hoặc nhiều line text vào thì nó sẽ mất order của list. Để giữ thì bạn cần bắt đầu các line này bằng 1 space
1. list 1
whatever
2. list 2
- list 1
whatever - list 2
V. Link
Đối với link thì bạn có thể đơn giản là paste trực tiếp link vào tại liệu. Nó sẽ hiển thị y như bạn viết. https://www.google.com
Tuy nhiên, Markdown support chúng ta cách viết đẹp hơn bằng 2 cách:
1. Inline style
Chúng ta sẽ viết theo format [text](href "alt"). Nội dung ở alt có thể có hoặc không.
[Google](https://www.google.com)
Có alt (hover vào link, nội dung ở alt sẽ xuất hiện)
[Google Homepage](https://www.google.com "Google Homepage")
2. Reference style
Đôi lúc bạn sẽ có nhu cầu dùng 1 link cho nhiều chỗ khác nhau trong tài liệu của mình. Những lúc đó thì dùng reference cho tất cả những link này sẽ rất tiện.
[NodeSchool Site][ref]
[GitHub][1]
[Remark parser]
Định nghĩa các reference để sử dụng:
[ref]: http://www.nodeschool.io
[1]: https://github.com/
[Remark parser]: http://remark.js.org/
Kết quả:
NodeSchool Site
GitHub
Remark parser
Như các bạn đã thấy thì reference rất free style. Bạn có thể dùng chữ hoặc số để tạo nó.
Trong thực tế thì khi bạn viết 1 tài liệu rất dài (document cho project), việc bạn refer tới rất nhiều link là rất bình thường. Để quản ý chúng được dễ dàng, bạn có thể tạo 1 section tại cuối file và đặt tất cả các reference tại đây.
Nội dung....
Rất nhiều thông tin [hữu ích] và [quan trọng].
...
<!-- My References -->
[hữu ích]: http://useful.site
[quan trọng]: https://important.site
VI.Images
Giữa image và link chỉ khác nhau ở dấu ! đứng đầu thôi, nên cũng không có gì khó sử dụng cả.
Dưới đây là 1 ví dụ (hover để thấy title text):
Inline-style:
Reference-style:
![alt text][beach]
[beach]: ../images/beach.png "Bãi biển 2"
Inline-style:
Reference-style:
VII. Paragraphs
Trong markdown, nếu đơn giản bạn enter xuống dòng thì nó sẽ ko hiểu là các bạn muốn tách đoạn.
Các đoạn văn sẽ được tách nhau bằng 1 line rỗng và nếu bạn muốn xuống dòng thì hãy kết thúc dòng bằng 2 spaces.
VIII. Block code và Inline code
Với Inline code thì đơn giản bạn chỉ cần dùng dấu ` để mở và đóng dòng code.
Để trình bày Block code thì bạn có thể dùng 3 dấu ~ or 3 dấu ` đặt phía trên và dưới đoạn bạn muốn cho vào frame code.
Hoặc bạn cũng có thể cho 4 spaces or 1 tab 4 spaces or 2 tab 2 spaces phía trước mỗi line.
Bạn cũng có thể chỉ định ngôn ngữ lập trình được sử dụng trong block code của bạn để việc hiển thị được đẹp mắt hơn.
```javascript
var s = "JavaScript syntax highlighting";
alert(s);
```
```python
s = "Python syntax highlighting"
print s
```
```
No language indicated, so no syntax highlighting.
But let's throw in a <b>tag</b>.
```
var s = "JavaScript syntax highlighting";
alert(s);
s = "Python syntax highlighting"
print s
No language indicated, so no syntax highlighting.
But let's throw in a <b>tag</b>.
IX. Block quotes
Quote thì chắc cũng không có gì xa lạ với mọi người và mọi người thường dùng dấu > để quote nội dung. Với Markdown thì cũng thương tự như vậy, bạn có thể dùng nhiều dấu > để lồng nhau.
> Ngày 17/10 tôi có từng viết là:
>> Nếu cơ hội không gõ cửa nhà bạn, có nghĩa là nhà bạn chưa có cửa, hãy gắn 1 cái. – Moilton Berle
Kết quả:
Ngày 17/10 tôi có từng viết là:
Nếu cơ hội không gõ cửa nhà bạn, có nghĩa là nhà bạn chưa có cửa, hãy gắn 1 cái. – Moilton Berle
X. MISCELLANEOUS
1. Tables
Tất cả những gì bạn cần là dùng dấu | để phân tách giữa các column với nhau và nếu bạn cần thiết lập cho text nằm trái hay phải thì dùng dấu : theo rule như bên dưới:
some|header|labels
:---|:--:|---:
Left-justified|center-justified|right-justified
a|b|c
d|e|f
| some | header | labels |
|---|---|---|
| Left-justified | center-justified | right-justified |
| a | b | c |
| d | e | f |
2. Escaping special characters
Để hiển thị bất kỳ 1 ký tự đặc biệt nào thì bạn chỉ cần đặt trước ký tự đó dấu \
Escaped \*italics\*
Escaped *italics*
3. Youtube video
Youtube video thì không thể add trực tiếp vào nhưng bạn có thể làm theo kiểu của HTML là add link youtube cho 1 images như bên dưới:
<a href="https://www.youtube.com/watch?v=qREKP9oijWI
" target="_blank"><img src="../images/beach.png"
alt="IMAGE ALT TEXT HERE" width="100" height="100" border="10" /></a>
Trong Markdown thì bạn có thể làm tương tự được, chỉ là ko có thiết lập được giá trị size và border cho nó thôi:
[](https://www.youtube.com/watch?v=qREKP9oijWI)
4. Checklist
Bạn có thể tạo danh sách checklist bằng cách sử dụng cú pháp như bên dưới. Nếu bạn sử dụng mà không hiện ra checkbox, hãy xem các space đã được đưa vào trúng chỗ chưa.
* [ ] task 1
* [ ] task 2
* [ ] task 3
- task 1
- task 2
- task 3
5. Footnotes
Bạn có thể dùng nó để ghi chú chú thích thêm cho từ được nói đến:
Tôi hay tìm kiếm các bài viết hay trên google [^1] về CSS[^2].
[^1]: Google là một công cụ tìm kiếm
[^2]: Cascading Style Sheet
Tôi hay tìm kiếm các bài viết hay trên Google 1 về CSS2.
Bạn có thể kéo tới cuối trang để xem các ghi chú hoặc bấm vào số bên cạnh các chữ để page tự cuộn xuống.
6. Emoji
Đây là phần chắc nhiều bạn thích thú, bạn có thể tham khảo các emmoji được support tại Emoji Cheat Sheet.
✨ 🐫 💥 
7. Abbreviations
Rất hữu ích khi bạn muốn giải thích từ nào đó cho người đọc. Khi bạn giải thích thì chỉ cần viết lời chú giải 1 lần duy nhất, nó sẽ được áp dụng tự động cho tất cả những nơi mà từ xuất hiện trong page.
Markdown converts text to HTML.
*[HTML]: HyperText Markup Language
Markdown converts text to HTML.
6. Convert HTML to Markdown
Bạn có thể dùng trang web của tác giả domchristie để convert từ HTML code sang Markdown code, cực nhanh và cực kỳ tiện lợi. Put code HTML vào khung bên trái và phía bên phải sẽ tự động generate ra code Markdown cho bạn.
Leave a Comment