GitHub Flavored Markdown (GFM)

GitHub Flavored Markdown (GFM) เป็นเวอร์ชัน Markdown ที่ปรับปรุงโดย GitHub พร้อมคุณสมบัติเพิ่มเติมที่ออกแบบมาโดยเฉพาะสำหรับการพัฒนาซอฟต์แวร์และการทำงานร่วมกัน คู่มือนี้ครอบคลุมส่วนขยายไวยากรณ์พิเศษทั้งหมดที่มีอยู่บน GitHub

GitHub Flavored Markdown (GFM) คืออะไร?

GitHub Flavored Markdown ขยายไวยากรณ์ Markdown พื้นฐานด้วยคุณสมบัติที่ทำให้มีประโยชน์มากขึ้นสำหรับ:

เอกสาร (READMEs, wikis)
การติดตามปัญหา (Issue tracking)
Pull requests
การตรวจสอบโค้ด
การจัดการโครงการ

คุณสมบัติหลักของ GFM

1. Fenced Code Blocks

GFM รองรับ fenced code blocks พร้อมการเน้นไวยากรณ์เฉพาะภาษา:

```javascript
function calculateSum(numbers) {
  return numbers.reduce((sum, num) => sum + num, 0);
}

const result = calculateSum([1, 2, 3, 4, 5]);
console.log(result); // Output: 15
```

javascript

function calculateSum(numbers) {
  return numbers.reduce((sum, num) => sum + num, 0);
}

const result = calculateSum([1, 2, 3, 4, 5]);
console.log(result); // Output: 15

2. การเน้นไวยากรณ์

GitHub รองรับการเน้นไวยากรณ์สำหรับ数百ภาษา บางภาษาที่พบบ่อย ได้แก่:

bash

# Bash script
echo "Hello GitHub!"

python

# Python script
def greet(name):
    return f"Hello, {name}!"

java

// Java code
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello GitHub!");
    }
}

3. รายการงาน

สร้างรายการงานแบบโต้ตอบด้วยช่องทำเครื่องหมาย:

markdown

- [x] ดำเนินการตรวจสอบผู้ใช้ให้เสร็จสมบูรณ์
- [x] ดำเนินการ API endpoints
- [ ] เขียน unit tests
  - [ ] Backend tests
  - [ ] Frontend tests
- [ ] Deploy ขึ้น production

[x] ดำเนินการตรวจสอบผู้ใช้ให้เสร็จสมบูรณ์
[x] ดำเนินการ API endpoints
[ ] เขียน unit tests
- [ ] Backend tests
- [ ] Frontend tests
[ ] Deploy ขึ้น production

4. ตาราง

GFM ให้ไวยากรณ์อย่างง่ายสำหรับการสร้างตาราง:

markdown

| คุณสมบัติ         | รองรับ | คำอธิบาย                       |
|-------------------|--------|--------------------------------|
| Fenced Code       | ✅     | การเน้นไวยากรณ์เฉพาะภาษา      |
| Task Lists        | ✅     | ช่องทำเครื่องหมายแบบโต้ตอบ     |
| Tables            | ✅     | การแสดงข้อมูลที่มีโครงสร้าง    |
| Mentions          | ✅     | การแจ้งเตือนผู้ใช้และทีม       |
| Emoji             | ✅     | การแสดงออกทางภาพ              |

คุณสมบัติ	รองรับ	คำอธิบาย
Fenced Code	✅	การเน้นไวยากรณ์เฉพาะภาษา
Task Lists	✅	ช่องทำเครื่องหมายแบบโต้ตอบ
Tables	✅	การแสดงข้อมูลที่มีโครงสร้าง
Mentions	✅	การแจ้งเตือนผู้ใช้และทีม
Emoji	✅	การแสดงออกทางภาพ

5. การกล่าวถึง

กล่าวถึงผู้ใช้หรือทีมเพื่อแจ้งเตือนพวกเขา:

markdown

@username - กล่าวถึงผู้ใช้เฉพาะ
@team-name - กล่าวถึงทีม

6. Emoji

เพิ่ม emoji โดยใช้ shortcodes:

markdown

:smile: - 😊
:thumbsup: - 👍
:heart: - ❤️
:rocket: - 🚀
:warning: - ⚠️

😄 - 😊 👍 - 👍 ❤️ - ❤️ 🚀 - 🚀 ⚠️ - ⚠️

7. การเชื่อมโยงอัตโนมัติ

GFM เชื่อมโยงเนื้อหาบางประเภทโดยอัตโนมัติ:

หมายเลข Issue และ Pull Request

markdown

#123 - ลิงก์ไปยัง issue 123
PR #456 - ลิงก์ไปยัง pull request 456

Hash SHA

markdown

a1b2c3d - ลิงก์ไปยัง commit ที่มี SHA นี้

การกล่าวถึงผู้ใช้ใน Issues/PRs

markdown

@username - ลิงก์ไปยังโปรไฟล์ผู้ใช้โดยอัตโนมัติ

URLs

markdown

https://github.com - กลายเป็นลิงก์โดยอัตโนมัติ

8. ขีดฆ่า

GFM รองรับข้อความขีดฆ่า:

markdown

~~ข้อความนี้ถูกขีดฆ่า~~

~~ข้อความนี้ถูกขีดฆ่า~~

9. การอ้างอิงลิงก์อัตโนมัติ

GFM สร้างลิงก์โดยอัตโนมัติสำหรับ:

HTTP/HTTPS URLs
ที่อยู่อีเมล
หมายเลข issue/PR ของ GitHub
Commit SHAs

markdown

https://github.com/markdownlang/markdownlang.com
user@example.com
#123
PR #456
a1b2c3d4e5f6

10. การเน้นบรรทัดในบล็อกโค้ด

เน้นบรรทัดเฉพาะในบล็อกโค้ด:

```javascript{2,4}
function calculateSum(numbers) {
  return numbers.reduce((sum, num) => sum + num, 0); // Highlighted
}

const result = calculateSum([1, 2, 3, 4, 5]); // Highlighted
console.log(result);
```

javascript

function calculateSum(numbers) {
  return numbers.reduce((sum, num) => sum + num, 0); // Highlighted
}

const result = calculateSum([1, 2, 3, 4, 5]); // Highlighted
console.log(result);

11. การเน้นไวยากรณ์ Diff

เน้นการเปลี่ยนแปลงในโค้ดด้วยไวยากรณ์ diff:

```diff
- const oldFunction = () => {
-   return "old value";
- };
+
+ const newFunction = () => {
+   return "new value";
+ };
```

diff

- const oldFunction = () => {
-   return "old value";
- };
+
+ const newFunction = () => {
+   return "new value";
+ };

12. เครื่องหมายเฉพาะของ GitHub

การแจ้งเตือน

ใช้ไวยากรณ์พิเศษสำหรับการแจ้งเตือนในเอกสาร GitHub:

markdown

> [!NOTE]
> นี่คือการแจ้งเตือนบันทึก

> [!TIP]
> นี่คือการแจ้งเตือนเคล็ดลับ

> [!IMPORTANT]
> นี่คือการแจ้งเตือนสำคัญ

> [!WARNING]
> นี่คือการแจ้งเตือนคำเตือน

> [!CAUTION]
> นี่คือการแจ้งเตือนระวัง

NOTE

นี่คือการแจ้งเตือนบันทึก

TIP

นี่คือการแจ้งเตือนเคล็ดลับ

IMPORTANT

นี่คือการแจ้งเตือนสำคัญ

WARNING

นี่คือการแจ้งเตือนคำเตือน

CAUTION

นี่คือการแจ้งเตือนระวัง

ลิงก์สัมพัทธ์

ใช้ลิงก์สัมพัทธ์เพื่อนำทางระหว่างไฟล์ใน repository เดียวกัน:

markdown

[README](/README.md)
[แนวทางการมีส่วนร่วม](/CONTRIBUTING.md)
[เอกสาร API](/docs/api.md)

ลิงก์รูปภาพพร้อมข้อความโฮเวอร์

markdown

![GitHub Logo](/images/github-logo.png "GitHub Logo - ข้อความโฮเวอร์")

การใช้ GFM ขั้นสูง

1. รายการซ้อนกับรายการงาน

รวมรายการซ้อนกับรายการงาน:

markdown

## แผนภาพโครงการ

### ระยะที่ 1: การวางแผน
- [x] กำหนดขอบเขตโครงการ
- [x] ระบุความต้องการ
  - [x] ความต้องการด้านฟังก์ชัน
  - [x] ความต้องการด้านที่ไม่ใช่ฟังก์ชัน
- [x] สร้างไทม์ไลน์

### ระยะที่ 2: การพัฒนา
- [x] ตั้งค่าโครงสร้างโครงการ
- [ ] ดำเนินการคุณสมบัติหลัก
  - [x] การตรวจสอบ
  - [ ] Dashboard
  - [ ] การผสานรวม API

2. ตารางพร้อม Emoji และลิงก์

ปรับปรุงตารางด้วย emoji และลิงก์:

markdown

| ส่วนประกอบ | สถานะ | ผู้ดูแล |
|------------|-------|---------|
| การตรวจสอบ | ✅ คงที่ | @johndoe |
| ฐานข้อมูล | ⚠️ ต้องอัปเดต | @janedoe |
| API | 🚧 กำลังดำเนินการ | @bobsmith |
| UI | ✅ คงที่ | @alicesmith |

ส่วนประกอบ	สถานะ	ผู้ดูแล
การตรวจสอบ	✅ คงที่	@johndoe
ฐานข้อมูล	⚠️ ต้องอัปเดต	@janedoe
API	🚧 กำลังดำเนินการ	@bobsmith
UI	✅ คงที่	@alicesmith

3. บล็อกโค้ดในรายการ

รวมบล็อกโค้ดในรายการ:

markdown

1. ติดตั้ง dependencies:

   ```bash
   npm install

รัน development server:
bash
```
npm run dev
```
Build สำหรับ production:
bash
```
npm run build
```


### 4. บล็อกคำพูดพร้อมโค้ด

รวมคำพูดกับบล็อกโค้ด:

```markdown
> **เคล็ดลับมืออาชีพ:** ใช้คำสั่งต่อไปนี้เพื่อตรวจสอบสถานะ Git ของคุณอย่างรวดเร็ว:
>
> ```bash
> git status
> ```

เคล็ดลับมืออาชีพ: ใช้คำสั่งต่อไปนี้เพื่อตรวจสอบสถานะ Git ของคุณอย่างรวดเร็ว:
bash
git status

GFM ในบริบท GitHub ที่แตกต่างกัน

ไฟล์ README

ไฟล์ README รองรับคุณสมบัติ GFM ทั้งหมดและจะถูกแสดงผลโดยอัตโนมัติบนหน้า repository

Issues และ Pull Requests

ใช้รายการงานเพื่อติดตามความคืบหน้า
กล่าวถึงสมาชิกในทีมเพื่อการทำงานร่วมกัน
รวม snippet โค้ดพร้อมการเน้นไวยากรณ์
อ้างอิง issues/PRs ที่เกี่ยวข้องโดยใช้ไวยากรณ์ #123

ความคิดเห็น

ใช้ emoji เพื่อปฏิกิริยาอย่างรวดเร็ว
อ้างอิงบรรทัดในโค้ดด้วยความคิดเห็นบรรทัด
ใช้บล็อกคำพูดเพื่อตอบสนองต่อประเด็นเฉพาะ

Wikis

จัดระเบียบเนื้อหาด้วยหน้าซ้อน
ใช้ตารางสำหรับข้อมูลที่มีโครงสร้าง
รวมตัวอย่างโค้ดพร้อมการเน้นไวยากรณ์

แนวทางปฏิบัติที่ดีที่สุด

1. สไตล์โค้ด

markdown

<!-- ✅ ดี -->
```javascript
// ใช้ชื่อฟังก์ชันที่สื่อความหมาย
function calculateTotal(items) {
  return items.reduce((sum, item) => sum + item.price, 0);
}

javascript

function f(i){return i.reduce((a,b)=>a+b.p,0)}```

2. การออกแบบตาราง

markdown

<!-- ✅ ดี -->
| คุณสมบัติ | คำอธิบาย | สถานะ |
|-----------|----------|-------|
| คุณสมบัติ 1 | คำอธิบายสั้น | ✅ |
| คุณสมบัติ 2 | คำอธิบายอื่น | 🚧 |

<!-- ❌ หลีกเลี่ยง -->
| คุณสมบัติ | คำอธิบาย | สถานะ | | | |
|-----------|----------|-------|---|---|---|
| คุณสมบัติ 1 | คำอธิบายนี้ยาวเกินไปและทำให้ตารางอ่านยากบนอุปกรณ์มือถือ | ✅ | | | |

3. การใช้รายการงาน

markdown

<!-- ✅ ดี -->
## Sprint Backlog
- [x] ทำหน้าโปรไฟล์ผู้ใช้ให้เสร็จสมบูรณ์
- [ ] ดำเนินการฟังก์ชันการค้นหา
  - [x] Backend API
  - [ ] Frontend component
- [ ] เขียนเอกสาร

<!-- ❌ หลีกเลี่ยง -->
- [ ] งาน 1
- [ ] งาน 2
- [ ] งาน 3
- [ ] งาน 4
- [ ] งาน 5
(งานมากเกินไปโดยไม่มีการจัดระเบียบ)

GFM เทียบกับ Markdown มาตรฐาน

คุณสมบัติ	Markdown มาตรฐาน	GitHub Flavored Markdown
Fenced Code Blocks	❌	✅
การเน้นไวยากรณ์	❌	✅
รายการงาน	❌	✅
ตาราง	❌	✅
ขีดฆ่า	❌	✅
Emoji	❌	✅
การกล่าวถึง	❌	✅
การเชื่อมโยงอัตโนมัติ	จำกัด	กว้างขวาง

เครื่องมือสำหรับทำงานกับ GFM

โปรแกรมแก้ไขในเครื่อง

Visual Studio Code - ดูตัวอย่าง GFM และส่วนขยาย
Typora - การแสดงผล GFM แบบเรียลไทม์
Mark Text - รองรับ GFM

เครื่องมือออนไลน์

GitHub Gist - สร้างและแชร์ snippet GFM
Dillinger - โปรแกรมแก้ไข GFM ออนไลน์
StackEdit - รองรับ GFM พร้อมซิงค์คลาวด์

เครื่องมือบรรทัดคำสั่ง

glow - โปรแกรมแสดงผล GFM Terminal
pandoc - แปลง GFM เป็นรูปแบบอื่น
marked - โปรแกรมแยกวิเคราะห์ GFM Node.js

ปัญหาทั่วไปและการแก้ไข

1. บล็อกโค้ดไม่มีการเน้น

ปัญหา: บล็อกโค้ดไม่แสดงการเน้นไวยากรณ์

การแก้ไข: ตรวจสอบให้แน่ใจว่าคุณระบุภาษาที่ถูกต้อง:

markdown

<!-- ✅ ถูกต้อง -->
```javascript
console.log("Hello");

jsx

console.log("Hello"); // ใช้ jsx แทน javascript สำหรับโค้ดที่ไม่ใช่ JSX


### 2. ช่องทำเครื่องหมายรายการงานไม่ทำงาน

**ปัญหา:** ช่องทำเครื่องหมายรายการงานไม่โต้ตอบ

**การแก้ไข:** ตรวจสอบให้แน่ใจว่าใช้ไวยากรณ์ที่ถูกต้อง (มีช่องว่างระหว่าง `-` และ `[ ]`):

```markdown
<!-- ✅ ถูกต้อง -->
- [ ] งาน

<!-- ❌ ไม่ถูกต้อง -->
-[ ] งาน (ไม่มีช่องว่าง)
-[x] งาน (ไม่มีช่องว่าง)

3. ตารางไม่แสดงผลถูกต้อง

ปัญหา: คอลัมน์ตารางไม่ตรงกัน

การแก้ไข: ตรวจสอบให้แน่ใจว่า pipe ถูกจัดเรียงอย่างถูกต้อง:

markdown

<!-- ✅ ถูกต้อง -->
| Column 1 | Column 2 |
|----------|----------|
| Data 1   | Data 2   |

<!-- ❌ ไม่ถูกต้อง -->
|Column 1|Column 2|
|--|--|
|Data 1|Data 2|

ขั้นตอนถัดไป

GitHub Flavored Markdown เป็นเครื่องมือที่มีประสิทธิภาพสำหรับการสื่อสารและการทำงานร่วมกันในการพัฒนาซอฟต์แวร์ โดยการเชี่ยวชาญคุณสมบัติเหล่านี้ คุณสามารถสร้างเอกสารที่มีประสิทธิภาพมากขึ้น ติดตามปัญหาได้ดีขึ้น และทำงานร่วมกันกับทีมของคุณได้อย่างมีประสิทธิภาพมากขึ้น

GitHub Flavored Markdown (GFM) ​