สวัสดีค่า~ ทุกคนรู้ไหมว่า มีอยู่ภาษานึงที่ต่อให้คุณไม่ใช่โปรแกรมเมอร์ คุณก็เจอมันได้ และเจอได้บ่อยด้วย ยกตัวอย่างใกล้ ๆ ตัวหน่อยก็ ถ้าใครใช้ Discord ต้องเคยได้หยิบได้ใช้ภาษานี้บ้างแหละ แต่อาจจะไม่รู้ตัว… คำตอบก็คือภาษา Markdown นั่นเอง !

ใช่แล้ววว วันนี้ BorntoDev จะพาทุกคนไปทำความรู้จักกับ Markdown ว่ามันคืออะไร? ใช้งานยังไง? ฉบับครบจบในบทความนี้ ถ้าพร้อมแล้วไปเริ่มกันเลยยย 🔥

Markdown คืออะไร?

Markdown เป็น Lightweight Markup Language ที่ใช้สำหรับจัด Format ของ Plain Text บน Document และแปลงเป็น HTML บนเว็บต่าง ๆ ได้ สร้างขึ้นโดย John Gruber ในปี 2004 มีจุดเด่นที่ Syntax ง่ายต่อการอ่านและการเขียนสุด ๆ เพราะมีหน้าตาคล้ายกับภาษาที่เราใช้กันเลย โดย Markdown มีนามสกุลไฟล์เป็น .md

ทำไมต้อง Markdown?

จริง ๆ แล้วเดี๋ยวนี้เราแทบจะเจอ Markdown ได้ทุกที่เลยล่ะ ไม่ว่าจะบนเว็บไซต์, Documents, Notes, Emails รวมถึง Technical Documentations เพราะไฟล์ .md ของ Markdown เปิดได้แทบทุกที่ ทุก Operating System ทุก IDE ซึ่งหลายเว็บไซต์ก็รองรับ Markdown นะ เช่น Reddit หรือ GitHub เองก็ด้วย ที่น่าจะเห็นกันบ่อย ๆ ก็ไฟล์ README.md บน Repository นั่นแหละ (หรือใน Discord เองก็ใช้ Markdown ได้บาง Syntax เหมือนกัน)

Markdown เขียนยังไง?

เอาล่ะ เพื่อไม่ให้เสียเวลา เรามาเข้าไฮไลต์ของวันนี้กันดีกว่า มาเขียน Markdown กันเถอะ!

(ตัวอย่างการใช้งาน Markdown ของบทความนี้ จะอ้างอิงการใช้งานบน GitHub เป็นหลักนะคะ เพราะน่าจะเป็นเว็บที่ชาว Dev อย่างเรา ๆ เจอ Markdown เยอะที่สุดค่ะ ✨)

1. Headings

เราจะใช้ # สำหรับทำ Headings ทั้ง 6 แบบ โดยเพิ่มจำนวน # ตามเลเวล Heading ที่เราต้องการได้เล้ย !

📍 ตัวอย่างที่ 1.1

# BorntoDev Heading 1 
## BorntoDev Heading 2 
### BorntoDev Heading 3 
#### BorntoDev Heading 4 
##### BorntoDev Heading 5 
###### BorntoDev Heading 6

👉 ผลลัพธ์ที่ได้

📍 ตัวอย่างที่ 1.2

นอกจากแบบตัวอย่างที่ 1.1 เรายังใช้ === และ — เพื่อแบ่งเลเวล Heading ได้เหมือนกัน

BorntoDev Heading 1 
=== 
BorntoDev Heading 2 
---

👉 ผลลัพธ์ที่ได้

จะเห็นเลยว่า ผลลัพธ์เหมือนกับการใช้ # เลย

# BorntoDev Heading 1
## BorntoDev Heading 2

2. Paragraphs (New Line)

อยากขึ้นบรรทัดใหม่ ทำยังไงดีน้า?

📍 ตัวอย่างที่ 2.1

คุณเห็นด้วยไหม?
สิ่งที่สำคัญกว่าการเขียนโค้ดคือ "การอ่านโค้ด"

👉 ผลลัพธ์ที่ได้

📍 ตัวอย่างที่ 2.2 (Hard Break)

จากตัวอย่างที่ 2.1 จะเห็นได้ว่า ตอนแสดงผล ข้อความดันกลายเป็นบรรทัดเดียวกัน ซึ่งถ้าเราต้องการเว้นบรรทัดให้ข้อความ เราจะต้องเคาะเว้นลงมาเป็นบรรทัดเปล่า 1 บรรทัดซะก่อน เรียกว่า Hard Break (เปรียบเหมือนการใช้  “Enter” นั่นเอง)

คุณเห็นด้วยไหม?

สิ่งที่สำคัญกว่าการเขียนโค้ดคือ "การอ่านโค้ด"

👉 ผลลัพธ์ที่ได้

📍 ตัวอย่างที่ 2.3 (Soft Break)

อีกวิธีที่ใช้ขึ้นบรรทัดใหม่ได้ ก็คือเคาะเว้นวรรค 2 ครั้ง หลังบรรทัดที่ต้องการให้ขึ้นบรรทัดใหม่ ซึ่งแบบนี้เรียกว่า Soft Break (เปรียบเหมือนการใช้ “Shift+Enter” นั่นเอง) เช่น

คุณเห็นด้วยไหม?  
สิ่งที่สำคัญกว่าการเขียนโค้ดคือ "การอ่านโค้ด"

(ในตัวอย่างอาจจะไม่เห็น แต่เราเคาะ Space 2 ครั้ง หลังคำว่า “คุณเห็นด้วยไหม?” จริง ๆ นะ)

👉 ผลลัพธ์ที่ได้

3. Horizontal Lines

นอกจาก — จะใช้แบ่งเลเวล Heading ได้แล้ว ยังใช้สร้างเส้นคั่นแนวนอนได้อีกด้วย

📍 ตัวอย่างที่ 3.1

---

👉 ผลลัพธ์ที่ได้

📍 ตัวอย่างที่ 3.2

ถ้าเหนือเส้นคั่นมีข้อความล่ะก็ เราต้องเว้นบรรทัดลงมาก่อนนะ เส้นคั่นถึงจะแสดง ไม่อย่างนั้น — จะมองว่าข้อความข้างบนเป็น Heading แทน

อยากได้เส้นคั่นอะ
ก็บอกว่าอยากได้เส้นคั่นไง!
---

👉 ผลลัพธ์ที่ได้

📍 ตัวอย่างที่ 3.3

เราจะแก้ปัญหาจากตัวอย่างที่ 3.2 ด้วยการเว้นบรรทัดกัน!

อยากได้เส้นคั่นอะ
ก็บอกว่าอยากได้เส้นคั่นไง!

---

👉 ผลลัพธ์ที่ได้

4. Text Styles

มาดูวิธีจัดการกับข้อความดีกว่า เราจะทำตัวเอียงและตัวหนา โดยใช้ _ หรือ * ครอบข้อความที่เราต้องการให้เอียง และใช้ __ หรือ ** ครอบข้อความที่เราต้องการให้หนา

Italics and Bold

📍 ตัวอย่างที่ 4.1

นี่คือ _ตัวเอียง_

นี่คือ __ตัวหนา__

นี่ก็*ตัวเอียง*เหมือนกัน

นี่ก็**ตัวหนา**เหมือนกัน

👉 ผลลัพธ์ที่ได้

📍 ตัวอย่างที่ 4.2

มี**ตัวหนา**กับ*ตัวเอียง*บรรทัดเดียวกัน

มี**ตัวหนา**กับ _ตัวเอียง_ บรรทัดเดียวกัน

_มี **ตัวหนา** ในบรรทัดที่ทุกตัวอักษรเอียง_

**มี _ตัวเอียง_ ในบรรทัดที่ทุกตัวอักษรหนา**

👉 ผลลัพธ์ที่ได้

💡 จุดสังเกต

ถ้าเราใช้ _ หรือ __ เราจะต้องเว้นวรรคข้างหน้าและข้างหลังของเครื่องหมาย _ เพื่อให้ข้อความเป็นตัวเอียง ไม่อย่างนั้น _ จะถูกมองว่าเป็นส่วนหนึ่งของข้อความ

แล้วเราอยากได้ทั้งตัวหนาและตัวเอียงพร้อมกันล่ะ?

📍 ตัวอย่างที่ 4.3

เป็นทั้ง ***ตัวหนาและตัวเอียง*** ในคำเดียวกัน 1

เป็นทั้ง ___ตัวหนาและตัวเอียง___ ในคำเดียวกัน 2

เป็นทั้ง **_ตัวหนาและตัวเอียง_** ในคำเดียวกัน 3

👉 ผลลัพธ์ที่ได้

Strikethrough

เราสามารถขีดค่าข้อความที่เราต้องการด้วยการใช้ ~~ ครอบข้อความที่ต้องการ

📍 ตัวอย่างที่ 4.4

อยากขีดค่า~~ข้อความ~~นี้

👉 ผลลัพธ์ที่ได้

5. Links

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

📍 ตัวอย่างที่ 5.1

ติดตาม BorntoDev ได้ที่ [Facebook](https://www.facebook.com/borntodev)

👉 ผลลัพธ์ที่ได้

📍 ตัวอย่างที่ 5.2

บางครั้ง ถ้าข้อความในเอกสารเราเยอะมาก การแนบลิงก์แบบตัวอย่างที่ 5.1 อาจจะทำให้เกิดความสับสน ดังนั้น จึงขอเสนอการลิงก์แบบตัวอย่างข้างนี้เล้ย!

ติดตาม BorntoDev ได้ที่ [Facebook] | [YouTube] | [Instagram]

[Facebook]: https://www.facebook.com/borntodev
[YouTube]: https://www.youtube.com/c/BorntodevTH
[Instagram]: https://www.instagram.com/borntodev

👉 ผลลัพธ์ที่ได้

6. Images

การแทรกรูปภาพของ Markdown จะใช้ Syntax คล้ายกับ Links เลย แต่เพิ่มเครื่องหมายตกใจ ไปข้างหน้าแบบนี้ ![ ]( )โดยเราใช้วิธีการแทรกรูปได้ดังนี้

📍 ตัวอย่างที่ 6.1

![Logo](https://www.borntodev.com/wp-content/uploads/2018/09/Black_Yellow_white-1.png)

👉 ผลลัพธ์ที่ได้

📍 ตัวอย่างที่ 6.2

อันนี้จะคล้าย ๆ กับตอนแนบลิงก์ของตัวอย่างที่ 5.2 เหมาะกับการใช้ตอนที่มี Content เยอะมาก ๆ จนสับสนไปหมด

![Logo]

[Logo]: (https://www.borntodev.com/wp-content/uploads/2018/09/Black_Yellow_white-1.png)

👉 ผลลัพธ์ที่ได้

7. Blockquotes

ไปต่อกันเลย ด้วยการทำ Quote เก๋ ๆ เพียงแค่ใส่ > หน้าข้อความเราที่ต้องการให้เป็น Quote เท่านั้น

📍 ตัวอย่างที่ 7.1

รู้หรือไม่?

> ไก่กับไข่อะไรเกิดก่อนกัน

👉 ผลลัพธ์ที่ได้

📍 ตัวอย่างที่ 7.2

รู้หรือไม่?

> ไก่กับไข่อะไรเกิดก่อนกัน
>
> ก็ต้องไก่สิ!

> ไม่ใช่ไข่เหรอ?

> แต่งานวิจัยเขาบอกว่าไก่นะ

👉 ผลลัพธ์ที่ได้

📍 ตัวอย่างที่ 7.3

รู้หรือไม่?

> ไก่กับไข่อะไรเกิดก่อนกัน
> > ก็ต้องไก่สิ!
> > > ไม่ใช่ไข่เหรอ?
> > > > แต่งานวิจัยเขาบอกว่าไก่นะ

👉 ผลลัพธ์ที่ได้

(จบเรื่องนี้เถอะ)

8. Lists

Unordered Lists

การทำ Unordered List ทำได้หลายแบบมาก ๆ

📍 ตัวอย่างที่ 8.1 ( * )

* มะเขือเทศ
* สับปะรด

👉 ผลลัพธ์ที่ได้

📍 ตัวอย่างที่ 8.2 ( – )

- มะเขือเทศ
- สับปะรด

👉 ผลลัพธ์ที่ได้

📍 ตัวอย่างที่ 8.3 ( + )

+ มะเขือเทศ
+ สับปะรด

👉 ผลลัพธ์ที่ได้

Ordered Lists

สำหรับ Ordered List เราจะใช้ตัวเลข 1. 2. 3. รันรายการไปเรื่อย ๆ

📍 ตัวอย่างที่ 8.4

1. มะเขือเทศ
2. ผักกาด
3. องุ่น
4. สับปะรด

👉 ผลลัพธ์ที่ได้

Nested Lists

ถ้าเราอยากสร้าง List ที่ซ้อนกัน ให้เราเคาะ Space เข้าไปแบบตัวอย่างข้างล่างนี้เลย

📍 ตัวอย่างที่ 8.5

* มะเขือเทศ
  * เนื้อสีแดง
  * มีคุณค่าทางอาหาร
    * วิตามินเอ
    * วิตามินซี
* สับปะรด
  * เนื้อสีเหลือง
  * มีผิวขรุขระ

👉 ผลลัพธ์ที่ได้

9. Code & Code Blocks

Code

เราจะใช้เครื่องหมาย ` ครอบข้อความหรือโค้ดที่เราต้องการ เพื่อให้แสดงผลในรูปแบบของ Code

📍 ตัวอย่างที่ 9.1

แสดงข้อความบนภาษาไพธอน `print("Hello World")`

👉 ผลลัพธ์ที่ได้

Code Blocks

ถ้าต้องการให้ข้อความหรือโค้ดอยู่ในลักษณะ Code Block เราจะใช้เครื่องหมาย ``` ครอบข้อความที่ต้องการให้เป็น Code Block

📍 ตัวอย่างที่ 9.2

```
print("Hello World") 
```

👉 ผลลัพธ์ที่ได้

📍 ตัวอย่างที่ 9.3

หรือเพิ่มความเท่ขึ้นไปอีกด้วยการระบุภาษาของโค้ด แบบตัวอย่างข้างล่างนี้เลย

```python
print("Hello World") 
```

```java
public static void main(String args[]) {
System.out.println("Hello, World!");
}
```

👉 ผลลัพธ์ที่ได้

10. Task Lists

การทำ Task List เราจะใช้ – [x] สำหรับ Checked ที่ Task นั้น ๆ และใช้ – [ ] สำหรับ Task ที่ไม่ได้ถูก Checked

(Task List รองรับแค่บางเว็บไซต์/แอปพลิเคชันเท่านั้น เช่น GitHub)

📍 ตัวอย่างที่ 10

- [x] Feature A
- [ ] Feature B
- [ ] Feature C

👉 ผลลัพธ์ที่ได้

11. Tables

การทำตารางใน Markdown อาจจะต้องใช้จินตนาการนิดหน่อย โดยใช้เราคิดว่า | คือเส้นตารางแนวตั้ง และ — คือเส้นคั่นแนวนอนของหัวตาราง ไปดูตัวอย่างกันดีกว่า

(Tables รองรับแค่บางเว็บไซต์/แอปพลิเคชันเท่านั้น เช่น GitHub)

📍 ตัวอย่างที่ 11.1

#### ช่องทางติดตาม BorntoDev

| ลำดับที่ | ช่องทางติดตาม | ลิงก์ของแต่ละช่องทาง |
| ---- | ---- | ---- |
| 1 | Facebook | https://www.facebook.com/borntodev |
| 10 | YouTube | https://www.youtube.com/c/BorntodevTH |
| 100 | Instagram | https://www.instagram.com/borntodev |

👉 ผลลัพธ์ที่ได้

📍 ตัวอย่างที่ 11.2

นอกจากนี้ เรายังสามารถจัดชิดซ้าย ชิดขวา กึ่งกลางให้กับ Content ในตารางได้ โดยในส่วนของเส้นคั่นหัวตาราง เราจะใช้ :– จัดชิดซ้าย ใช้ :–: จัดกึ่งกลาง และใช้ –: จัดชิดขวา

#### ช่องทางติดตาม BorntoDev

| ลำดับที่ | ช่องทางติดตาม | ลิงก์ของแต่ละช่องทาง |
| :---- | :----: | ----: |
| 1 | Facebook | https://www.facebook.com/borntodev |
| 10 | YouTube | https://www.youtube.com/c/BorntodevTH |
| 100 | Instagram | https://www.instagram.com/borntodev |

👉 ผลลัพธ์ที่ได้

12. Emojis

📍 ตัวอย่างที่ 12

BorntoDev :t-rex: | Sunflower :sunflower: | Tomato :tomato:

👉 ผลลัพธ์ที่ได้

สำหรับ Emoji ต่าง ๆ ส่องเพิ่มเติมได้ที่ https://www.webfx.com/tools/emoji-cheat-sheet/ หรือ https://emojipedia.org/ (การแสดงผลของอิโมจิขึ้นอยู่กับเว็บไซต์/แอปพลิเคชัน/แพลตฟอร์มที่เราใช้งานด้วยนะ ✨)

ใครที่อยากรู้ Syntax ของ Markdown บน Github สามารถอ่านเพิ่มเติมได้ที่ GitHub Docs

เป็นยังไงกันบ้างคะทุกคน หวังว่า Blog ของเราในวันนี้จะมีประโยชน์กับเพื่อน ๆ ไม่มากก็น้อย ถ้าทุกคนมีความคิดเห็นยังไง หรืออยากให้ BorntoDev เอาเรื่องไหนมาเล่าบน Blog อีกก็บอกกันได้บน Facebook Page: BorntoDev เลยยย~ ส่วนวันนี้ต้องขอลาไปก่อน แล้วเจอกัน Blog หน้า สวัสดีค่า