Markdown for newbie
Bài đăng này đã không được cập nhật trong 2 năm
Markdown for newbie
Markdown là gì ?
Markdown là một ngôn ngữ đánh dấu với cú pháp văn bản thô (plant-text), được thiết kế để có thể dễ dàng chuyển thành HTML và nhiều định dạng khác sử dụng một công cụ cùng tên. Nó thường được dùng để tạo các tập tin readme, viết tin nhắn trên các diễn đàn, và tạo văn bản có định dạng bằng một trình biên tập văn bản thô (như notepad chẳng hạn).
Cách sử dụng markdown
Paragraphs
Với markdown, văn bản sẽ được tự động chuyển sang thành các đoạn văn bản (paragraphs) được phân cách bởi một dòng. Và không cần phải thêm thẻ xuống dòng như <br>, Các đoạn văn bản được chuyển sang như sử dụng các thẻ <p> thực sự.
Ví dụ như sau:
** Markdown **
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Đơn giản sẽ trở thành :
**HTML **
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.</p>
<p> Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</p>
Có một vấn đề nhỏ đối với Markdown đó là chỉ xử lý duy nhất một ngắt dòng. Triết lý của Markdown đó là trình duyệt (browser) phải tự xử lý các ngắt dòng chứ không phải ai khác.
Ví dụ như sau :
Markdown
Lorem ipsum dolor sit amet, consectetur. Adipisicing elit, sed do eiusmod tempor incididunt.
Sẽ trở thành :
HTML
<p>Lorem ipsum dolor sit amet, consectetur. Adipisicing elit, sed do eiusmod tempor incididunt.</p>
Nếu bạn muốn thêm các ngắt dòng thì bạn đơn giản chỉ là thêm 2 khoảng trắng (space) ở cuối mỗi dòng phía trước. Như ví dụ sau :
Lorem ipsum dolor sit amet, consectetur.<space><space>
Adipisicing elit, sed do eiusmod tempor incididunt.
Headings
Bắt đầu một đoạn văn bản bắt đầu với #, và đoạn văn bản đó sẽ trở thành một tiêu đề (header). Tương ứng với mỗi ký tự # sẽ là cấp độ của tiêu đề đó (<h1>,<h2>,<h3>,<h4>,<h5>,<h6>).
Ví dụ như sau :
Markdown
# Heading One This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
## Heading Two This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
### Heading Three #### Heading Four ##### Heading Five ###### Heading Six
Sẽ trở thành:
HTML
<h1>Heading One</h1>
<p>This is a paragraph. Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam.</p>
<h2>Heading Two</h2>
<p>This is a paragraph. Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam.</p>
<h3>Heading Three</h3>
<h4>Heading Four</h4>
<h5>Heading Five</h5>
<h6>Heading Six</h6>
Ngoài ra còn có cú pháp thay thế viết <h1> và <h2> như sau:
Heading One
This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Heading Two ------------------- This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Blockquotes
Markdown sử dụng ký tự > thường thấy trong email-plant-text để blockquoting. Nếu như bạn đã quen thuộc với các email hiển thị dưới dạng text, thì bạn sẽ hoàn toàn biết cách để sử dụng blockquoting trong Markdown
Ví dụ:
Markdown
This is a normal paragraph.
This is a blockquote paragraph.
And the blockquote continues here, too.
...Được chuyển sang thành:
HTML
<p>This is a normal paragraph.</p>
<blockquote>
<p>This is a blockquote paragraph.</p>
<p>And the blockquote continues here, too.</p>
</blockquote>
Code
Bạn hoàn toàn có thể tạo một đoạn code nhỏ, bằng cách sử dụng ký tự ` bao quanh đoạn code
Một khối code lớn cũng có thể được định nghĩa bằng cách đơn giản đó là thêm 1 tab hoặc 4 khoảng trắng vào trước khối code cần viết. Markdown sẽ tự động bỏ qua các ký tự đặc biệt trong khối code, điều đó có nghĩa là đoạn code đó bạn hoàn toàn có thể sao chép mà không cần phải lo lắng với các ký tự < và >, v..v
Ví dụ như sau:
Markdown `
This is a paragraph with a bit of <strong>CODE</strong> in it.
Another paragraph, but with a code block above it.
HTML
<p>This is a paragraph with a bit of <strong>CODE</strong> in it.</p>
<pre><code> <?php
$name = $_GET['name'] ?: 'World';
echo "Hello $name & everyone else!";
?>
</code></pre>
<p>Another paragraph, but with a code block above it.</p>
Lists
Một ví dụ nữa trong việc sử dụng Markdown đó là cách bạn viết một danh sách đặc biệt Viết một danh sách trong Markdown chỉ đơn giản là bắt đầu bằng 1 ký tự * (hoặc +,-) để tạo một danh sách không có sắp xếp. Hoặc sử dụng 1., 2., v..v để tạo một danh sách có số đếm.
Ví dụ như sau: Markdown
I will need:
`*` Snakes
`*` Scorpions
`*` Hamsters
Then, I can begin my plan to rule the world:
`1.` Aquire hamsters
`2.` Train snakes to ride hamsters
`3.` Rule the world
HTML
<p>I will need:</p>
<ul>
<li>Snakes</li>
<li>Scorpions</li>
<li>Hamsters</li>
</ul>
<p>Then, I can begin my plan to rule the world:</p>
<ol>
<li> Aquire hamsters</li>
<li> Train snakes to ride hamsters</li>
<li> Rule the world </li>
</ol>
Inline Text Elements
Chúng ta có thể chuyển các đoạn thành chữ nghiêng hay chữ in đậm với ký tự (* and **), đương nhiên bạn cũng thể thay thế các ký tự đó bằng cách dùng các dâu _
Ví dụ :
Here's some *italic* text, and more _italic_ text. Some **bold stuff** here; plus a __little__ bit more.
Các đường dẫn cũng rất dễ dàng để viết trong Markdown
Ví dụ:
Markdown
[Viblo](https://viblo.asia)
HTML
<a href="https://viblo.asia">Viblo</a>
Để hiển thị hình ảnh, hãy bắt đầu đường dẫn với 1 ký tự !:
Markdown
``
HTML
`<img src="https://viblo.asia/img/logo-v2.png" alt="Viblo logo">`
Hướng dẫn sử dụng Markdown
Github
Về cơ bản thì dùng Markdown trong github không khác mấy so với sử dụng Markdown thông thường. Tuy nhiên, viết Markdown trên github vẫn có 1 vài điểm khác biệt được tùy chỉnh để phù hợp hơn.
- Nhiều dấu
_ở giữa các từ
Thông thường Markdown sẽ tự động chuyển các từ nằm giữa _ thành in ngiêng. Tuy nhiên, github sẽ tự động bỏ qua các dấu _ ở giữa các từ. Như sau:
wow_great_stuff do_this_and_do_that_and_another_thing.
Khi chúng ta muốn in nghiêng giữa các từ t có thể sử dụng * để thay thế cho _ mà vẫn giữ nguyên tác dụng
- Tự động link URL
Trong github các link được nhập vào sẽ được tự động chuyển thành các link có thể nhấn được để chuyển trang mà không cần phải viết theo đúng chuẩn của Markdown.
- Thêm gạch ngang chữ
Github đã thêm cú pháp cho gạch ngang chữ (không có trong Markdown thường). Để sử dụng ta dùng như sau:
~~gạch ngang chữ~~
- Khối code
Thay vì định nghĩa khối code bằng việc thêm 4 khoảng trắng hay một dấu tab phía trước. Github cho phép định nghĩa một khối code bằng cách thêm được bao bởi ```. Bằng cách này bạn không cần phải thêm 4 khoảng trắng phía trước để định nghĩa khối code.
Ví dụ như này: `
``` function test() { console.log("notice the blank line before this function?"); } ```
- Đánh dấu các từ khóa của ngôn ngữ
Các từ khóa của các ngôn ngữ trong một khối code được đánh dấu bằng cách viết tên ngôn ngữ mình xử dụng ở ngay sau ``` đầu tiên. Ví dụ: `
```ruby require 'redcarpet' markdown = Redcarpet.new("Hello World!") puts markdown.to_html ```
- Tạo bảng
Bạn có thể tạo bảng với cách sử dụng như sau:
Phần phân cách tiêu đề đầu tiên sẽ được chia bởi các dấu -------------- và phân chia giữa các cột bởi dấu |.
Ví dụ :
First Header | Second Header
------------- | -------------
Content Cell | Content Cell
Content Cell | Content Cell
Bạn hoàn toàn có thể thêm các dấu | vào phía sau và phía trước cho dễ nhìn mà không làm ảnh hưởng gì đến bảng được tạo.
| First Header | Second Header |
| ------------- | ------------- |
| Content Cell | Content Cell |
| Content Cell | Content Cell |
Bạn không cần phải căn chỉnh đúng khoảng cách để tạo ra được bảng.
| Name | Description |
| ------------- | ----------- |
| Help | Display the help window.|
| Close | Closes a window |
Bạn có thể thêm in nghiêng, gạch chữ, tô đậm vào bảng.
| Name | Description |
| ------------- | ----------- |
| Help | ~~Display the~~ help window.|
| Close | _Closes_ a window |
Cuối cùng, bạn có thể căn lề trái, lề phải và căn giữa bằng cách thêm dấu :
| Left-Aligned | Center Aligned | Right Aligned |
| :------------ |:---------------:| -----:|
| col 3 is | some wordy text | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |
Slack
Markdown trong slack tuy không bị chỉnh sửa nhiều như trên github, nhưng vẫn có những khác biệt rất rõ ràng buộc ta phải xem qua để có thể sử dụng chính xác.
- Tô đậm và nghiêng chữ
Thay vì sử dụng cú pháp thông thường, trong Slack lại sử dụng dấu * bao quanh để tô đậm chữ và dùng _ để in chữ nghiêng
- Gạch ngang chữ
Slack sử dụng dấu ~ để thể hiện cho gạch ngang chữ.
- Blockquote
Sử dụng một dấu > để Blockquote trên một dòng và 3 dấu >>> để Blockquote trên nhiều dòng.
- Khối code
Trong Slack, các khối code được định nghĩa sử dụng cú pháp tương tự như trên github. Đó là khối code được bao quanh bởi ```
Redmine
`
Trên redmine, Markdown được chỉnh sửa khá nhiều để phục công việc nhanh chóng và hiệu quả hơn. Sau đây mình sẽ liệt kê cho các bạn một số cú pháp sử dụng Markdown trên Redmine
-
Định dạng chữ hoặc đoạn văn bản
-
Tô đậm :
*Tô đậm* -
In nghiêng:
_In nghiêng_ -
Gạch chân:
+Gạch chân+ -
Gạch ngang chữ:
-Gạch ngang chữ- -
Quote:
??Quote?? -
inline code:@inline code@Multiline code `<pre>` Multiline code `</pre>`
-
-
Danh sách
- Danh sách không đếm:
- 1 :
*1 - 2 :
*2 - 3 :
*3
- 1 :
- Danh sách có đếm:
- :
#1 - :
#2
- :
- Danh sách không đếm:
-
Các header
1: h1.
2: h2.
3: h3.
4: h4.
5: h5.
6: h6.
- Tạo bảng
Về tạo bảng trong redmine các bạn có thể tham khảo cách tạo bảng trong github.
Ứng dụng của Markdown
- Trên github.com thì Markdown được dùng làm ngôn ngữ chuẩn để viết các tập tin README, viết wiki cho các dự án nguồn mở đặt trên Github. Họ cũng dùng Markdown trong các ô comment, gần như bất kỳ chỗ nào viết được một đoạn văn trên Github thì cũng có thể viết bằng Markdown. Trang web stackoverflow.com (nơi chuyên để trao đổi các vấn đề về lập trình và máy tính) cũng dùng Markdown cho mục đích tương tự. Github cũng có một dịch vụ gọi là Gist dùng để giúp mọi người chia sẻ dễ dàng các đoạn code/text ngắn. Điều tuyệt vời là Gist cũng hỗ trợ render trực tiếp Markdown ra văn bản HTML đẹp mắt nên bạn có thể sử dụng gist để nhanh chóng ghi lại những ý tưởng mới bùng nổ trong đầu hoặc một bài báo cáo, một bài hướng dẫn ngắn,... giống như tính năng Notes trên Facebook vậy.
- Markdown có thể dùng để viết sách, phần lớn sách, truyện đều có kết cấu (về mặt format) đơn giản: phân thành các chương, phần đề mục chương, trong chương thì có các đoạn văn, có các list gạch đầu dòng, có một vài tấm ảnh, chữ đậm, chữ nghiêng,... Markdown hoàn toàn có thể xử lý những thứ này. Thực tế là có nhiều dịch vụ tự xuất bản sách đã hỗ trợ in sách viết bằng Markdown, thậm chí một số dịch vụ như leanpub.com còn chỉ chấp nhận sách viết bằng Markdown.
- Markdown có thể dùng để viết blog, tin tức. Thực ra đây chính là mục đích ban đầu của Markdown. HTML nói chung để viết content thì cũng được nhưng sẽ phức tạp, viết một bài báo 20 đoạn văn thì bạn sẽ biết nó khổ đến thế nào. Lại còn những distraction từ syntax của ngôn ngữ nữa. Vì vậy nhiều trang tin tức và blog đã chuyển sang phương án code khung sườn trang web bằng HTML (hoặc HAML) và viết nội dung hoàn toàn bằng Markdown. Sau đó convert file Markdown sang HTML và đăng bài như thường.
- Ngoài ra cũng có một số người tài giỏi đã kết hợp Markdown và impress.js (một thư viện web nguồn mở để tạo slide presentation 3D như prezi.com - seriously, press that impress.js link xD) thành một công cụ presentation vô cùng độc đáo là Hekyll. Một nhóm khác cũng viết một công cụ đơn giản hơn là Markdown Presenter.
*** Vì file Markdown render ra file HTML nên chúng ta có thể dùng nó như một file HTML bình thường. Bạn có thể mở nó bằng LibreOffice Writer hoặc MS Word và edit như một file .doc, save ra thành file PDF để gửi cho bạn bè, người thân,... Giới hạn chỉ là sự sáng tạo của bạn. ***
Tham khảo tại: http://code.tutsplus.com/tutorials/markdown-the-ins-and-outs--net-25482 https://en.wikipedia.org/wiki/Markdown
All rights reserved
