รั้วโค้ด

รั้วโค้ดช่วยคร่อมบล็อกโค้ดได้อย่างสะดวก อ่านง่าย และรองรับการไฮไลต์ตามภาษาโปรแกรม

ไวยากรณ์พื้นฐาน

ใช้เครื่องหมายแบ็กทิก ``` หรือทิลด์ ~~~ สามตัวคร่อมโค้ด:

```
function hello() {
  console.log('Hello');
}
```

หรือ:

~~~
echo "Hello"
~~~

ข้อควรระวัง: จำนวนแบ็กทิกเปิดและปิดต้องเท่ากัน และอย่าผสม ``` กับ ~~~ ในบล็อกเดียวกัน

ระบุภาษาเพื่อไฮไลต์

เพิ่มชื่อภาษาหลัง ``` เพื่อเปิดไฮไลต์ไวยากรณ์:

```javascript
export function add(a, b) {
  return a + b;
}
```

ตัวอย่างภาษา: javascript typescript python java bash json html css yaml toml เป็นต้น

ออปชันขั้นสูงที่พบบ่อย (ขึ้นกับแพลตฟอร์ม)

แสดงเลขบรรทัด/ไฮไลต์บรรทัด

```js {1,3-4}
// บรรทัดที่ 1 (ไฮไลต์)
const x = 1;
const y = 2; // บรรทัดที่ 3 (ไฮไลต์)
console.log(x + y); // บรรทัดที่ 4 (ไฮไลต์)
```

แสดงชื่อไฟล์

```tsx title="App.tsx"
export const App = () => <h1>Hello</h1>;
```

เริ่มเลขบรรทัดจากค่าอื่น

```python {startLine: 41}
print('เริ่มนับจากบรรทัดที่ 41')
```

หมายเหตุ: ไวยากรณ์พารามิเตอร์ของบล็อกโค้ดแตกต่างไปตามตัวเรนเดอร์ (เช่น VitePress, Shiki, Prism)

กรณีมีแบ็กทิกในโค้ด

ถ้าโค้ดภายในมีแบ็กทิก ให้ขยายจำนวนแบ็กทิกรอบนอก:

เนื้อหาที่มีแบ็กทิกสามตัว

````

## ข้อผิดพลาดที่พบบ่อย

```markdown
❌ ปิดบล็อกไม่ครบจำนวนแบ็กทิก
```js
console.log('hello')
``

✅ ควรเป็น
```js
console.log('hello')
```
```

```markdown
❌ ระบุภาษาผิด เช่น ```jsn
✅ ใช้ ```json
```

## แนวปฏิบัติที่ดี

- โค้ดสั้นมากใช้แบบอินไลน์ `code` จะอ่านง่ายกว่า
- โค้ดยาวให้ใช้รั้วโค้ดและระบุภาษาเสมอ
- ไม่นำข้อมูลลับ (token/secret) ใส่ในตัวอย่าง
- เพิ่มคอมเมนต์สั้น ๆ เพื่อช่วยผู้อ่านเข้าใจบริบท

## ตัวอย่างการใช้งานจริง

### เอกสาร API

````markdown
```bash
curl -X POST https://api.example.com/login \
  -H "Content-Type: application/json" \
  -d '{"email":"user@example.com","password":"pwd"}'
```

```json
{ "success": true, "token": "..." }
```
````

### คู่มือการติดตั้ง

````markdown
```bash
brew install node
node --version
```
````

## ไวยากรณ์ที่เกี่ยวข้อง

- [โค้ด (พื้นฐาน)](/th/basic/code)
- [ไฮไลต์ข้อความ](/th/extended/highlight)
- [รายการงาน](/th/extended/task-lists)