คราวก่อนเขียนเรื่องการใช้ Markdown Filter ไปแล้วครั้งนึง แต่เป็นแบบคร่าว ๆ ไม่ละเอียดมากนัก เพราะจำต้องเอาไปอธิบายกับเพื่อนเป็นการด่วน และตั้งใจว่าจะเขียนรายละเอียดเพิ่มเติม แต่สุดท้ายก็ทิ้งร้างมานานข้ามปี

วันนี้ได้ฤกษ์ (มั้ง) ก็เลยเอามาเขียนใหม่ และลงรายละเอียดเพิ่มเติม แล้วก็แยกจาก node เดิมออกมา เพื่อที่ว่า ถ้าใครต้องการอ่านแค่พื้นฐานจะได้ไม่งง จนเกินไป ส่วนใครที่ต้องการรายละเอียดเกี่ยวกับคำสั่งทั้งหมดจะได้มาอ่านใน node นี้แทน

แต่จะไม่ลงรายละเอียดลึกมากนัก ถ้าต้องการรายละเอียดเชิงลึกจริง ๆ ให้อ่านจากแหล่งอ้างอิงแล้วกันนะครับ เขียนเพื่อเอาไปใช้ทั่ว ๆ ไปเป็นหลักครับ

---

ขึ้นบรรทัดใหม่

ให้ วรรค 2 ครั้งข้างหลังข้อความแล้ว Enter ครั้งนึง

ตัวอย่าง
ข้อความบรรทัดแรก
ข้อความบรรทัดที่สอง

---

ย่อหน้าใหม่

ทำได้โดย กด Enter 2 ครั้ง

ตัวอย่าง
ข้อความบรรทัดแรก

ข้อความบรรทัดที่สอง

---

จัดหัวข้อ

หากจะให้มีตัวเลขนำก็ พิมพ์ตัวเลข ตามด้วย . แล้ว วรรค 1 ครั้ง
หากไม่ต้องการตัวเลข ให้ใช้ * หรือ - หรือ + อย่างใดอย่างหนึ่ง แล้ว วรรค 1 ครั้ง

ตัวอย่าง

1. หัวข้อแรก
2. หัวข้อที่สอง

- หัวข้อแรก
- หัวข้อที่สอง

จะแสดงเป็น

1. หัวข้อแรก
2. หัวข้อที่สอง

• หัวข้อแรก
• หัวข้อที่สอง

หากต้องการขึ้นย่อหน้าใหม่ แต่ยังคงเป็นส่วนหนึ่งของหัวข้อเดิม

ให้ วรรค 4 ครั้งในย่อหน้าใหม่

• หัวข้อที่สร้างโดยใช้ - และต้องการเพิ่มย่อหน้าให้กับหัวข้อนี้ด้วย
  ย่อหน้าใหม่ที่ถูกสร้างขึ้น โดยการเคาะวรรคนำ 4 ครั้ง
• หัวข้ออีกหัวข้อ

---

สร้างหัวข้อหลัก (header)

ใช้ # คร่อมข้อความที่เป็นหัวข้อหลัก เพิ่มจำนวน # เท่ากับลดระดับของหัวข้อหลัก

หรือ ใช้ === หรือ --- ใต้หัวข้อหลักนั้น

ตัวอย่าง
## หัวข้อหลักระดับ 2 ##

หัวข้อหลัก
======

จะแสดงเป็น

หัวข้อหลักที่ใช้ # 1 ตัว

หัวข้อหลักที่ใช้ =

หัวข้อหลักที่ใช้ -

หัวข้อหลักที่ใช้ # 6 ตัว (มากที่สุด)

Note: หัวข้อหลักสามารถใส่ id เพื่อใช้ลิงก์ภายในหน้าเว็บได้ด้วย โดยใช้ {#id} ต่อท้าย และลิงก์ไปหาด้วย [ข้อความ][#id]

---

ทำตัวหนา <strong>

ใช้ ** หรือ __ (underscore 2 ตัว) คร่อมข้อความที่ต้องการ

ตัวอย่าง
**ตัวหนา**

จะแสดงเป็น
ตัวหนา

---

ทำตัวเอียง <em>

ใช้ * หรือ _ (underscore) คร่อมข้อความที่ต้องการ

ตัวอย่าง
*ตัวเอง*

จะแสดงเป็น
ตัวเอียง

---

ต้องการแสดงคำพูดของใครสักคน

ใช้ > หน้าบรรทัดข้อความนั้น

ตัวอย่าง
> Markdown is intended to be as easy-to-read and easy-to-write as is feasible.

จะแสดงเป็น

Markdown is intended to be as easy-to-read and easy-to-write as is feasible.

Note: สามารถใช้ > ซ้อนกันมากกว่า 1 ตัวได้

---

สร้างลิงก์

ใช้ [คำที่ใช้ลิงก์](URL "หัวข้อเวลาเอาเมาส์ชี้")

ตัวอย่าง
[รายละเอียดของ Markdown](http://daringfireball.net/projects/markdown/syntax "Markdown WebSite")

จะแสดงเป็น
รายละเอียดของ Markdown

สร้างลิงก์แบบอ้างอิง

ใช้ [คำที่ใช้ลิงก์][คำอ้างอิง] หรือมีแค่ [คำที่ใช้ลิงก์][] แทนได้ถ้าในส่วนของอ้างอิงใช้คำเดียวกัน
และตรงคำอ้างอิงจะเป็น [คำอ้างอิง]: URL "คำอธิบายลิงก์ จะใช้เครื่องหมายคำพูดหรือวงเล็บคร่อมไว้ หรือไม่ใส่คำอธิบายก็ได้"

ตัวอย่าง
[Google][] is a most popular in this time, user of this [Search Engine][SEinWiki] are more than [Bing][] plus [Yahoo!][].

ตรงไหนสักแห่ง
[Google]: http://www.google.com "Google"
[SEinWiki]: http://en.wikipedia.org/wiki/Search_engine (Search Engine on Wikipedia)
[Bing]: http://www.bing.com "Bing"
[Yahoo!]: http://www.yahoo.com

จะแสดงเป็น (ส่วนของส่วนอ้างอิงจะไม่นำมาแสดง)
Google is a most popular in this time, user of this Search Engine are more than Bing plus Yahoo!.

การสร้างลิงก์โดยอัตโนมัติ

ใช้ <URL> หรือ <email@address>

ตัวอย่าง
<http://fingersports.net>
<example@example.com>

จะแสดงเป็น
http://fingersports.net
example@example.com

Note: "หัวข้อเวลาเอาเมาส์ชี้" ไม่จำเป็นต้องใส่ก็ได้
Note: URL สามารถเป็น relative path ได้

---

แทรกรูปภาพ

ใช้ 

ตัวอย่าง

จะแสดงเป็น

แทกรูปภาพโดยใช้การอ้างอิง

ใช้ ![ข้อความแทนภาพ][คำอ้างอิง]
โดยคำอ้างอิงจะเป็น [คำอ้างอิง]: /path/to/image "ข้อความเมื่อเอาเมาส์ชี้"

ตัวอย่าง
![WASD Logo][WASD]

ตรงไหนสักแห่ง
[WASD]: http://fingersports.net/images/WASDlogo.gif "FingerSports"

จะแสดงเป็น (ส่วนของอ้างอิงจะไม่นำมาแสดง)

สร้างลิงก์ให้กับรูปภาพ

ใช้ คำสั่งสร้างรูปภาพ เป็น คำที่ใช้แทนลิงก์ ในคำสั่งสร้างลิงก์

ตัวอย่าง
[![WASD Logo][WADS]](http://fingersports.net)

จะแสดงเป็น

Note: "ข้อความเมื่อเอาเมาส์ชี้" ไม่จำเป็นต้องใส่ก็ได้

---

แสดงเครื่องหมายขีดคั่น (horizontal rule)

ใช้ --- หรือ *** หรือ * * * หรือ - - - ในทำนองนี้ จะมากกว่า 3 ก็ได้เช่นกัน

ตัวอย่าง
---

จะแสดงเป็น

---

Note: โปรดระวังการใช้ --- โดยการขึ้นบรรทัดใหม่ (Enter ครั้งเดียว) เพราะจะทำให้บรรทัดด้านบนเป็นหัวข้อหลัก

---

แทรก code

ให้ วรรค 4 ครั้ง หรือใช้ 1 tab นำหน้าบรรทัดนั้น ๆ หรือใช้ ~ 3 ตัวขึ้นวางไว้บรรทัดบน และล่าง ของส่วนที่เป็น code

ตัวอย่าง

~~~~~~

function disableThis(obj,state)
{
    obj.disabled = state;
}

~~~~~~

จะแสดงเป็น

function disableThis(obj,state)
{
    obj.disabled = state;
}

แทรก code โดยเป็นส่วนหนึ่งของบรรทัด

ใช้ ` หรือ `` คร่อม code ส่วนนั้น

ตัวอย่าง
เพิ่ม ``onClick="disableThis(this,true);`` เข้าไป

จะแสดงเป็น
เพิ่ม onClick="disableThis(this,true); เข้าไป

---

การแทรกตาราง

ใช้การสร้างตารางอย่างง่ายโดยใช้ | และ - ร่วมกันดังตัวอย่าง (อธิบายไม่ถูก) (จะใช้ | ล้อมตารางหรือไม่ก็ได้) และสามารถใช้ : เพื่อบอกว่าให้ชิดซ้าย โดยการวางเครื่องหมาย : ไว้หน้า - ; ชิดขวา โดยวาง : ไว้ที่ตัวสุดท้ายหลัง - ; หรือจัดกึ่งกลางโดยวาง : ไว้ทั้งสองด้าน

ตัวอย่าง

| ID | Name |  Sex |
|---:|:-----|:----:|
|   1|Totem |Male  |
|   2|Lily  |Female|

จะแสดงเป็น

ID	Name	Sex
1	Totem	Male
2	Lily	Female

---

แสดงข้อความในรูปแบบอภิธานศัพท์อย่างในพจนานุกรม

ให้ พิมพ์คำศัพท์นั้น แล้ว Enter ต่อด้วยเครื่องหมาย : เว้นวรรค แล้วก็คำอธิบาย

ตัวอย่าง
Apple
: ผลไม้ชนิดหนึ่งผลสีแดง รสหวานกรอบ : บริษัทคอมพิวเตอร์บริษัทหนึ่ง

Banana
: ผลไม้เขตร้อนชนิดหนึ่ง รสชาติหวานหอม

จะแสดงเป็น

Apple

ผลไม้ชนิดหนึ่งผลสีแดง รสหวานกรอบ

บริษัทคอมพิวเตอร์บริษัทหนึ่ง

Banana

ผลไม้เขตร้อนชนิดหนึ่ง รสชาติหวานหอม

Note: แท็ก html ที่ใช้ตรงนี้จะเป็น <dt> และ <dd> แต่ผมไม่ได้เขียน CSS เป็นพิเศษกับ 2 ตัวนี้เลยมองไม่ค่อยเห็นความแตกต่าง

---

การอธิบายคำย่อ

ใช้ [ตัวย่อ]: ตัวเต็ม (หรือคำอธิบาย)

ตัวอย่าง
I use CC-BY as license.

ตรงไหนสักแห่ง
*[CC-BY]: Creative Commons Attribution

จะแสดงเป็น
I use CC-BY as license.

Note: CC-BY ทุกตัวในบทความจะได้รับผลนี้ทั้งหมด

---

การใช้เชิงอรรถ

ใช้ [^หมายเลขเชิงอรรถ] ด้านหลังข้อความที่จะอธิบายตรงเชิงอรรถ
ใช้ [^หมายเลขเชิงอรรถ]: คำอธิบายเชิงอรรถ ตรงที่จะเป็นเชิงอรรถ

ตัวอย่าง
John Gruber[^1] is a programmer.

จะวางไว้ที่ใดก็ได้ แต่มันจะถูกนำไปไว้ที่บริเวณด้านล่างสุดโดยอัตโนมัติ
[^1]: Owner of Markdown Project.

จะแสดงเป็น (เชิงอรรถจะอยู่ด้านล่างของบทความ)
John Gruber¹ is a programmer.

---

เพิกเฉยต้องเครื่องหมายของ Markdown

ใช้วาง \ หน้าเครื่องหมายคำสั่งนั้น ๆ ใช้ได้เฉพาะ \, `, *, _, {}, [], (), #, +, -, ., !, |, :, > ถ้านอกจากนี้จะต้องใช้ HTML Entity แทน

ตัวอย่าง
การสร้างลิงก์ทำได้โดย \[ข้อความลิงก์\]\(url\)

จะแสดงเป็น
การสร้างลิงก์ทำได้โดย [ข้อความลิงก์](url)

---

Note: รายละเอียดเพิ่มเติม สามารถดูได้ที่ Daring Fireball และ Markdown Extra นะครับ