การใช้ Markdown ในการจัดการเนื้อหา

Feb. 27, 2025 · boychawin

1. Document (Heading)

ตัวอย่างการใช้งาน:

# หัวข้อหลัก (H1)
เนื้อหาภายใต้หัวข้อหลัก

## หัวข้อรอง (H2)
เนื้อหาภายใต้หัวข้อรอง

### หัวข้อย่อย (H3)
เนื้อหาภายใต้หัวข้อย่อย

#### หัวข้อเล็กลง (H4)
เนื้อหาภายใต้หัวข้อเล็กลง

##### หัวข้อที่เล็กลงอีก (H5)
เนื้อหาภายใต้หัวข้อที่เล็กลงอีก

###### หัวข้อที่เล็กที่สุด (H6)
เนื้อหาภายใต้หัวข้อที่เล็กที่สุด

2. FrontMatter (metadata)

เนื้อหา FrontMatter อยู่ในส่วน --- ด้านบน

ตัวอย่างการใช้งาน:

---
post_layout: post
post_title: "การใช้ Markdown"
post_author: boychawin
post_description: "ตัวอย่างการใช้ FrontMatter"
---

3. BlockQuote

นี่คือข้อความใน Block Quote
ตัวอย่างการอ้างอิงจากข้อความสำคัญหรือการคัดลอกข้อความจากแหล่งข้อมูลภายนอก

ตัวอย่างการใช้งาน:

> ### 3. BlockQuote  
> นี่คือข้อความใน Block Quote  
> ตัวอย่างการอ้างอิงจากข้อความสำคัญหรือการคัดลอกข้อความจากแหล่งข้อมูลภายนอก

4. List Item

Item 1
Item 2
- Nested Item

Ordered Item 1
Ordered Item 2

ตัวอย่างการใช้งาน:

- Item 1  
- Item 2  
  - Nested Item  

1. Ordered Item 1  
2. Ordered Item 2

5. DescriptionList

Term
: คำอธิบายของ Term

ตัวอย่างการใช้งาน:

**Term**  
: คำอธิบายของ Term

6. CodeBlock

fn main() {
    println!("Hello, Rust!");
}

ตัวอย่างการใช้งาน:

```rust
fn main() {
    println!("Hello, Rust!");
}

7. Code

นี่คือตัวอย่างโค้ด console.log("Hello, world!"); ที่แทรกอยู่ในบรรทัด

ตัวอย่างการใช้งาน:

นี่คือตัวอย่างโค้ด `console.log("Hello, world!");` ที่แทรกอยู่ในบรรทัด

8. HtmlInline

GenWebBlog
ตัวอย่างการใช้ HTML Inline Link

ตัวอย่างการใช้งาน:

<a href="https://genwebblog.com">GenWebBlog</a>

9. Raw

กดเพื่อดูเพิ่มเติม

นี่คือเนื้อหาที่ซ่อนอยู่!

ตัวอย่างการใช้งาน:

<details>
  <summary>กดเพื่อดูเพิ่มเติม</summary>
  นี่คือเนื้อหาที่ซ่อนอยู่!
</details>

10. ThematicBreak

ตัวอย่างการใช้งาน:

---

11. LineBreak และ SoftBreak

บรรทัดนี้ไม่มี br
บรรทัดนี้ใช้ br

ตัวอย่างการใช้งาน:

บรรทัดนี้ไม่มี `br`  
บรรทัดนี้ใช้ `br`  
<br>

12. Strong

ตัวหนา

ตัวอย่างการใช้ตัวหนา:

**ตัวหนา**

13. Emph

ตัวเอียง

ตัวอย่างการใช้ตัวเอียง:

*ตัวเอียง*

14. Strikethrough

~~ขีดฆ่า~~

ตัวอย่างการใช้ขีดฆ่า:

~~ขีดฆ่า~~

15. Superscript

x^2^ (ตัวยก)

ตัวอย่างการใช้ตัวยก:

- x^2^ (ตัวยก)

16. Link

ลิงก์ไปยัง GitHub

ตัวอย่างการใช้ลิงก์:

[ลิงก์ไปยัง GitHub](https://github.com)

17. Image

รูปภาพตัวอย่าง

ตัวอย่างการแทรกรูปภาพ:

![รูปภาพตัวอย่าง](https://boychawin.com/images/apple-touch-icon.png)

18. ShortCode (ตัวอย่างจาก Hugo/Zola)

{{< youtube dQw4w9WgXcQ >}}

ตัวอย่างการใช้งาน:

{{< youtube dQw4w9WgXcQ >}}

19. Table

คอลัมน์ 1	คอลัมน์ 2
ค่า 1	ค่า 2

ตัวอย่างการใช้งาน:

| คอลัมน์ 1 | คอลัมน์ 2 |
|-----------|-----------|
| ค่า 1     | ค่า 2     |

20. Footnote (Definition, Reference)

ข้อความอ้างอิง¹

ตัวอย่างการใช้ Footnote:

ข้อความอ้างอิง[^1]  

[^1]: นี่คือ Footnote

21. TaskItem

[x] งานที่ทำเสร็จ
[ ] งานที่ต้องทำ

ตัวอย่างการใช้งาน:

- [x] งานที่ทำเสร็จ  
- [ ] งานที่ต้องทำ

22. Escaped

*ไม่เป็นตัวเอียง*
# ไม่เป็น Heading

ตัวอย่างการใช้งาน:

\*ไม่เป็นตัวเอียง\*  
\# ไม่เป็น Heading

23. Math

$$
E = mc^2
$$

ตัวอย่างการใช้สมการ:

$$  
E = mc^2  
$$

24. WikiLink

[[หน้าเกี่ยวข้อง]]

ตัวอย่างการใช้งาน:

[[หน้าเกี่ยวข้อง]]

25. Underline

ข้อความขีดเส้นใต้

ตัวอย่างการใช้งาน:

<u>ข้อความขีดเส้นใต้</u>

26. Subscript

H2O (ตัวห้อย)

ตัวอย่างการใช้งาน:

H~2~O (ตัวห้อย)

27. SpoileredText

||นี่คือข้อความที่ซ่อนอยู่||

ตัวอย่างการใช้งาน:

> ||นี่คือข้อความที่ซ่อนอยู่||

28. EscapedTag

ตัวอย่างการใช้งาน:

\&lt;div class="container"&gt;

29. Alert

Warning: นี่คือตัวอย่าง Alert

ตัวอย่างการใช้งาน:

> **Warning**: นี่คือตัวอย่าง Alert

🔥 การใช้งาน

รองรับ SEO-friendly elements (เช่น Heading, Table, Footnotes, CodeBlock)
รองรับ FrontMatter สำหรับ Static Site Generator

นี่คือ Footnote ↩