บทความทั้งหมดในเว็บไซต์ถูกเขียนขึ้นด้วย Markdown และมีแนวโน้มว่าหลังจากนี้จะได้ใช้ Markdown บ่อยขึ้น จึงถือโอกาสใช้หน้านี้บันทึก Syntax ของ Markdown เอาไว้
หากใครผ่านมาแล้วได้ประโยชน์ ก็ขอแสดงความยินดีด้วย 🎉
Markdown คืออะไร?
Markdown คือ ภาษา Markup รูปแบบหนึ่งที่ใช้สำหรับการจัดรูปแบบข้อความ และแปลงเป็น HTML ได้โดยไม่ต้องใช้ภาษา HTML ที่มีความซับซ้อน
การใช้ Markdown จะช่วยให้เราสามารถตกแต่งข้อความได้โดยใช้ Syntax ที่เรียบง่าย อย่างเช่นการทำตัวหนาด้วยการใช้เครื่องหมายดอกจันกำกับหน้าหลัง
**ข้อความที่อยากตัวหนา**
แทนที่เราจะใช้ภาษา HTML ที่เขียนได้ช้ากว่าอย่าง
<strong>ข้อความที่อยากตัวหนา</strong>
ด้วยความสะดวกนี้ Markdown จึงได้รับความนิยมในการเขียนบทความของเหล่า Developer (และผู้ที่จำ Syntax ได้) เนื่องจากความรวดเร็วจากการที่สามารถพิมพ์รวดเดียวโดยที่ไม่จำเป็นต้องเสียเวลาจับเมาส์เพื่อใช้เครื่องมือจัดหน้า และโดยพื้นฐานการเขียน Markdown มีการแบ่งแต่ละย่อหน้าออกจากกันเป็นก้อนที่ชัดเจนในแต่ละส่วน (คล้ายกับ Gutenberg สำหรับใครที่เคยใช้ WordPress มาก่อน) จึงทำให้ไฟล์ Markdown ค่อนข้างสะอาดและเป็นมิตรต่อการกลับมาแก้ไข
โดยการใช้งาน Markdown สามารถใช้งานได้มากมายหลายโอกาส ตั้งแต่ไฟล์ Document ที่ใช้กันทั่วไป, การเขียนอีเมล, แอปจดโน๊ต, ไฟล์ README.md บน GitHub, การตกแต่งข้อความใน Discord, และการเขียนบทความของเว็บไซต์ที่สร้างด้วย Framework ต่าง ๆ โดยไม่ใช้ CMS (อย่างเช่นบทความนี้)
Headings
หัวข้อจะใช้เครื่องหมาย # หน้าข้อความที่ต้องการเป็น Heading โดยเพิ่มจำนวน # ตามลำดับ Heading
# H1
## H2
### H3
#### H4
##### H5
###### H6
หรือใช้เครื่องหมาย === ใต้ข้อความที่ต้องการเป็น Heading 1 (H1)
และเครื่องหมาย --- ใต้ข้อความที่ต้องการเป็น Heading 2 (H2)
อยากเป็น H1 จังเลย
===
อยากเป็น H2 จังเลย
---
Paragraph
สำหรับการเขียนย่อหน้า เพียงแค่เว้น 1 บรรทัดด้านบนและด้านล่างข้อความที่ต้องการกำหนดให้เป็นย่อหน้า
ถ้าต้องการเว้นบรรทัดโดยมีช่องว่างระหว่างบรรทัด ให้เว้นบรรทัดตามปกติ (เหมือนเคาะ Enter 1 ครั้งตามปกติ)
แต่ถ้าหากต้องการขึ้นบรรทัดใหม่โดยที่ย่อหน้าติดกัน
ให้เคาะ Spacebar 2 ครั้งท้ายข้อความก่อนขึ้น
บรรทัดใหม่
ตกแต่งข้อความ
Syntax สำหรับการตกแต่งข้อความ
ตัวหนา (Bold)
**ข้อความที่หนา**
หรือ
__ข้อความที่หนา__
ตัวเอียง (Italic)
*ข้อความที่เอียง*
หรือ
_ข้อความที่เอียง_
ขีดฆ่า (Strikethrough)
~~ข้อความที่ขีดฆ่า~~
ขีดเส้นใต้ (Underline)
<ins>ข้อความที่ขีดเส้นใต้</ins>
ตัวห้อย (Subscript)
This is a subscript text
<sub>subscript</sub>
ยกกำลัง (Superscript)
22 มีค่าเท่ากับ 4
2<sup>2</sup> มีค่าเท่ากับ 4
แทรกรูปภาพ
สำหรับ Astro วางรูปภาพไว้ใน folder เดียวกันกับไฟล์ Markdown

ผลลัพธ์
Quoting Code
ไฮไลต์ข้อความ ที่นิยมใช้กับการไฮไลต์โค๊ด เช่น npm run dev
`ข้อความ`
Blockquote
Syntax
> **สวัสดี** นี่คือตัวอย่างโควทสุดเท่ สุดอันตราย
ผลลัพธ์ที่ได้
สวัสดี นี่คือตัวอย่างโควทสุดเท่ สุดอันตราย
ตาราง
Syntax
| Italics | Bold | Code |
| --------- | -------- | ------ |
| _italics_ | **bold** | `code` |
ผลลัพธ์
Italics | Bold | Code |
---|---|---|
italics | bold | code |
Code Blocks
ใช้ 3 Backticks ``` ที่จุดเริ่มต้นและจุดสิ้นสุดของโค๊ดที่ต้องการแสดง
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>
```
ผลลัพธ์
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>
Links
[ข้อความ Anchor text ของลิงก์](https://ลิงก์.com)
อ่านบทความดี ๆ ได้ที่ Piases
List Types
Ordered List
Syntax
1. First item
2. Second item
3. Third item
Output
- First item
- Second item
- Third item
Unordered List
Syntax
- List item
- Another item
- And another item
Output
- List item
- Another item
- And another item
Nested list
Syntax
- Fruit
- Apple
- Orange
- Banana
- Dairy
- Milk
- Cheese
Output
- Fruit
- Apple
- Orange
- Banana
- Dairy
- Milk
- Cheese
Other Elements
Syntax
<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.
Press <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd></kbd> to end the session.
Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.
Output
GIF is a bitmap image format.
Press CTRL+ALT+Delete to end the session.
Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures.