ไวยากรณ์โค้ด

โค้ดคือองค์ประกอบสำคัญของเอกสารทางเทคนิค Markdown รองรับทั้งโค้ดในบรรทัดและโค้ดบล็อกหลายรูปแบบ

โค้ดในบรรทัด

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

ล้อมโค้ดด้วยแบ็กทิก `:

markdown

นี่คือตัวอย่าง `โค้ดในบรรทัด`
ใช้ฟังก์ชัน `console.log()` เพื่อพิมพ์ข้อมูล

ผลลัพธ์การเรนเดอร์:

นี่คือตัวอย่าง โค้ดในบรรทัด ใช้ฟังก์ชัน console.log() เพื่อพิมพ์ข้อมูล

โค้ดที่มีแบ็กทิกภายใน

เมื่อโค้ดมีแบ็กทิกเอง ให้ใช้สองแบ็กทิกครอบ:

markdown

``ใช้ `console.log()` ฟังก์ชัน``

ผลลัพธ์การเรนเดอร์:

ใช้ `console.log()` ฟังก์ชัน

หลายแบ็กทิก

markdown

```โค้ดที่มีแบ็กทิกหลายตัว `` ` ``` อยู่ที่นี่```

ผลลัพธ์การเรนเดอร์:

โค้ดที่มีแบ็กทิกหลายตัว `` ` อยู่ที่นี่```

โค้ดบล็อก

โค้ดบล็อกแบบย่อหน้า (Indent)

ใช้อินเดนต์ 4 ช่องว่างหรือแท็บ 1 ครั้ง:

markdown

    function hello() {
        console.log("Hello, World!");
    }

ผลลัพธ์การเรนเดอร์:

function hello() {
    console.log("Hello, World!");
}

โค้ดบล็อกแบบรั้ว (Fenced)

ครอบด้วยแบ็กทิก 3 ตัว ``` หรือ Tilde ~~~:

markdown

```
function hello() {
    console.log("Hello, World!");
}
```

ผลลัพธ์การเรนเดอร์:

function hello() {
    console.log("Hello, World!");
}

ระบุภาษาโปรแกรมเพื่อไฮไลต์

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

markdown

```javascript
function hello(name) {
    console.log(`Hello, ${name}!`);
}
```

ผลลัพธ์การเรนเดอร์:

javascript

function hello(name) {
    console.log(`Hello, ${name}!`);
}

ตัวอย่างภาษายอดนิยม

JavaScript

markdown

```javascript
// ตัวอย่างฟังก์ชันแบบอะซิงโครนัส
async function fetchData(url) {
    try {
        const response = await fetch(url);
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Error:', error);
    }
}
```

ผลลัพธ์การเรนเดอร์:

javascript

// ตัวอย่างฟังก์ชันแบบอะซิงโครนัส
async function fetchData(url) {
    try {
        const response = await fetch(url);
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Error:', error);
    }
}

Python

markdown

```python
# ตัวอย่างการประกาศคลาส
class Calculator:
    def __init__(self):
        self.result = 0
    
    def add(self, x, y):
        return x + y
    
    def multiply(self, x, y):
        return x * y

# การใช้งาน
calc = Calculator()
print(calc.add(5, 3))
```

ผลลัพธ์การเรนเดอร์:

python

# ตัวอย่างการประกาศคลาส
class Calculator:
    def __init__(self):
        self.result = 0
    
    def add(self, x, y):
        return x + y
    
    def multiply(self, x, y):
        return x * y

# การใช้งาน
calc = Calculator()
print(calc.add(5, 3))

HTML

markdown

```html
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <title>หน้าตัวอย่าง</title>
</head>
<body>
    <h1>ยินดีต้อนรับสู่ Markdown</h1>
    <p>นี่คือตัวอย่างย่อหน้า</p>
    
</body>
</html>
```

ผลลัพธ์การเรนเดอร์:

html

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <title>หน้าตัวอย่าง</title>
</head>
<body>
    <h1>ยินดีต้อนรับสู่ Markdown</h1>
    <p>นี่คือตัวอย่างย่อหน้า</p>
</body>
</html>

CSS

markdown

```css
/* ตัวอย่างเลย์เอาต์แบบตอบสนอง */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

@media (max-width: 768px) {
    .container {
        padding: 0 10px;
    }
}

.button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
}

.button:hover {
    background-color: #0056b3;
}
```

ผลลัพธ์การเรนเดอร์:

css

/* ตัวอย่างเลย์เอาต์แบบตอบสนอง */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

@media (max-width: 768px) {
    .container {
        padding: 0 10px;
    }
}

.button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
}

.button:hover {
    background-color: #0056b3;
}

Bash/Shell

markdown

```bash
#!/bin/bash

# สคริปต์ตัวอย่าง: ประมวลผลไฟล์เป็นชุด
for file in *.txt; do
    if [ -f "$file" ]; then
        echo "Processing $file"
        cp "$file" "backup_$file"
    fi
done

# ฟังก์ชันตรวจสอบ dependency
function check_dependencies() {
    command -v git >/dev/null 2>&1 || {
        echo "Git is required but not installed."
        exit 1
    }
}

check_dependencies
echo "All dependencies satisfied."
```

ผลลัพธ์การเรนเดอร์:

bash

#!/bin/bash

# สคริปต์ตัวอย่าง: ประมวลผลไฟล์เป็นชุด
for file in *.txt; do
    if [ -f "$file" ]; then
        echo "Processing $file"
        cp "$file" "backup_$file"
    fi
done

# ฟังก์ชันตรวจสอบ dependency
function check_dependencies() {
    command -v git >/dev/null 2>&1 || {
        echo "Git is required but not installed."
        exit 1
    }
}

check_dependencies
echo "All dependencies satisfied."

JSON

markdown

```json
{
  "name": "markdown-tutorial",
  "version": "1.0.0",
  "description": "Markdown Thai Tutorial",
  "main": "index.js",
  "scripts": {
    "dev": "vitepress dev docs",
    "build": "vitepress build docs",
    "preview": "vitepress preview docs"
  },
  "dependencies": {
    "vitepress": "^1.0.0"
  },
  "author": "Your Name",
  "license": "MIT"
}
```

ผลลัพธ์การเรนเดอร์:

json

{
  "name": "markdown-tutorial",
  "version": "1.0.0",
  "description": "Markdown Thai Tutorial",
  "main": "index.js",
  "scripts": {
    "dev": "vitepress dev docs",
    "build": "vitepress build docs",
    "preview": "vitepress preview docs"
  },
  "dependencies": {
    "vitepress": "^1.0.0"
  },
  "author": "Your Name",
  "license": "MIT"
}

ฟีเจอร์โค้ดบล็อกขั้นสูง

แสดงหมายเลขบรรทัด

โปรเซสเซอร์บางตัวรองรับการแสดงหมายเลขบรรทัด:

markdown

```javascript {1}
// นี่คือบรรทัดแรก
function example() {
    console.log("Hello");
}
```

ไฮไลต์บรรทัด

ไฮไลต์บรรทัดที่ต้องการ:

markdown

```javascript {2-3}
function example() {
    console.log("บรรทัดนี้ถูกไฮไลต์");  // ไฮไลต์
    return true;                        // ไฮไลต์
}
```

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

แสดงชื่อไฟล์ของโค้ด:

markdown

```javascript title="app.js"
const express = require('express');
const app = express();

app.get('/', (req, res) => {
    res.send('Hello World!');
});
```

ข้อผิดพลาดที่พบบ่อยและแนวทางแก้ไข

1. จำนวนแบ็กทิกไม่ตรงกัน

markdown

❌ ผิด:
```javascript
function hello() {
    console.log("Hello");
}
``  ← จำนวนแบ็กทิกไม่ครบ

✅ ถูกต้อง:
```javascript
function hello() {
    console.log("Hello");
}
```

2. อินเดนต์ไม่สม่ำเสมอ

markdown

❌ ผิด: โค้ดบล็อกแบบอินเดนต์
    บรรทัดแรก (4 ช่องว่าง)
  บรรทัดสอง (2 ช่องว่าง)  ← อินเดนต์ไม่สม่ำเสมอ

✅ ถูกต้อง: โค้ดบล็อกแบบอินเดนต์
    บรรทัดแรก (4 ช่องว่าง)
    บรรทัดสอง (4 ช่องว่าง)

3. ชื่อภาษาผิด

markdown

❌ ผิด:
```js  ← ควรใช้ javascript
function hello() {}
```

✅ ถูกต้อง:
```javascript
function hello() {}
```

รายการชื่อภาษาที่พบบ่อย

ตัวระบุภาษายอดนิยม:

ภาษา	ตัวระบุ	ตัวอย่าง
JavaScript	`javascript`, `js`	`function(){}`
Python	`python`, `py`	`def function():`
Java	`java`	`public class{}`
C++	`cpp`, `c++`	`#include <iostream>`
C#	`csharp`, `cs`	`public class{}`
Go	`go`	`func main(){}`
Rust	`rust`, `rs`	`fn main(){}`
TypeScript	`typescript`, `ts`	`interface{}`
PHP	`php`	`<?php`
Ruby	`ruby`, `rb`	`def method`
SQL	`sql`	`SELECT * FROM`
HTML	`html`	`<div></div>`
CSS	`css`	`.class{}`
XML	`xml`	`<root></root>`
YAML	`yaml`, `yml`	`key: value`
Markdown	`markdown`, `md`	`# Title`
Bash	`bash`, `sh`	`#!/bin/bash`
PowerShell	`powershell`, `ps1`	`Get-Process`
Dockerfile	`dockerfile`	`FROM ubuntu`

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

1. เลือกรูปแบบโค้ดที่เหมาะสม

markdown

✅ แนะนำ: โค้ดสั้นใช้แบบในบรรทัด
ใช้ `Array.map()` เพื่อประมวลผลอาเรย์

✅ แนะนำ: โค้ดยาวใช้โค้ดบล็อก
function processArray(arr) {
    return arr.map(item => item * 2);
}

2. เพิ่มคำอธิบายอย่างเหมาะสม

markdown

✅ แนะนำ: มีคอมเมนต์อธิบาย
```javascript
// คำนวณค่าเฉลี่ยของสมาชิกในอาเรย์
function calculateAverage(numbers) {
    const sum = numbers.reduce((acc, num) => acc + num, 0);
    return sum / numbers.length;
}
```

3. ใช้ตัวระบุภาษาที่ถูกต้อง

markdown

✅ แนะนำ: ระบุภาษาอย่างชัดเจน
```typescript
interface User {
    id: number;
    name: string;
}
```

❌ ไม่แนะนำ: ระบุไม่ชัดเจน
```text
interface User {
    id: number;
    name: string;
}
```

4. รักษาโค้ดให้กระชับ

markdown

✅ แนะนำ: โชว์แก่นของตรรกะ
```javascript
// การยืนยันตัวตนผู้ใช้
function authenticate(token) {
    return validateToken(token);
}
```

❌ ไม่แนะนำ: รายละเอียดมากเกินจำเป็น
```javascript
// โค้ดยาวมากที่มีรายละเอียดไม่เกี่ยวข้อง...
```

เอาต์พุต HTML

การแปลงโค้ดเป็น HTML:

markdown

`โค้ดในบรรทัด`

แปลงเป็น:

html

<code>โค้ดในบรรทัด</code>

โค้ดบล็อก:

markdown

```javascript
function hello() {}
```

แปลงเป็น:

html

<pre><code class="language-javascript">
function hello() {}
</code></pre>

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

เอกสาร API

markdown

## การเข้าสู่ระบบผู้ใช้

ส่งคำขอ POST ไปที่ `/api/login`:

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

ตัวอย่างการตอบกลับ:

```json
{
  "success": true,
  "token": "...",
  "user": { "id": 1, "email": "user@example.com", "name": "Zhang San" }
}
```

ตัวอย่างไฟล์คอนฟิก

markdown

## การตั้งค่าโปรเจ็กต์

สร้างไฟล์ `config.json`:

```json
{
  "database": { "host": "localhost", "port": 5432, "name": "myapp" },
  "server": { "port": 3000, "host": "0.0.0.0" }
}
```

อัปเดตสคริปต์ใน `package.json`:

```json
{
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js",
    "test": "jest"
  }
}
```

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

markdown

## การตั้งค่าสภาพแวดล้อม

1. ติดตั้ง Node.js:

```bash
# macOS (Homebrew)
brew install node

# Ubuntu/Debian
sudo apt update
sudo apt install nodejs npm

# Windows (Chocolatey)
choco install nodejs
```

2. ตรวจสอบการติดตั้ง:

```bash
node --version
npm --version
```

3. เริ่มต้นโปรเจ็กต์:

```bash
mkdir my-project
cd my-project
npm init -y
```

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

โค้ดแบบรั้ว - ฟีเจอร์โค้ดขั้นสูง
การเน้น - รูปแบบข้อความ
ลิงก์ - การสร้างลิงก์
อักขระหลีกเลี่ยง - จัดการอักขระพิเศษ

แบบฝึกหัด

ลองสร้างสิ่งต่อไปนี้:

ชุดตัวอย่างโค้ดหลายภาษา
บทเรียน API พร้อมคำขอและคำตอบตัวอย่าง
คู่มือติดตั้งที่ครอบคลุมหลายระบบปฏิบัติการ
แม่แบบไฟล์คอนฟิกพร้อมคำอธิบายสั้น ๆ

ไวยากรณ์โค้ด ​

โค้ดในบรรทัด ​

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

โค้ดที่มีแบ็กทิกภายใน ​

หลายแบ็กทิก ​

โค้ดบล็อก ​

โค้ดบล็อกแบบย่อหน้า (Indent) ​

โค้ดบล็อกแบบรั้ว (Fenced) ​

ระบุภาษาโปรแกรมเพื่อไฮไลต์ ​

ตัวอย่างภาษายอดนิยม ​

JavaScript ​

Python ​

HTML ​

CSS ​

Bash/Shell ​

JSON ​

ฟีเจอร์โค้ดบล็อกขั้นสูง ​

แสดงหมายเลขบรรทัด ​

ไฮไลต์บรรทัด ​

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

ข้อผิดพลาดที่พบบ่อยและแนวทางแก้ไข ​

1. จำนวนแบ็กทิกไม่ตรงกัน ​

2. อินเดนต์ไม่สม่ำเสมอ ​

3. ชื่อภาษาผิด ​

รายการชื่อภาษาที่พบบ่อย ​

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

1. เลือกรูปแบบโค้ดที่เหมาะสม ​

2. เพิ่มคำอธิบายอย่างเหมาะสม ​

3. ใช้ตัวระบุภาษาที่ถูกต้อง ​

4. รักษาโค้ดให้กระชับ ​

เอาต์พุต HTML ​

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

เอกสาร API ​

ตัวอย่างไฟล์คอนฟิก ​

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

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

แบบฝึกหัด ​

ไวยากรณ์โค้ด

โค้ดในบรรทัด

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

โค้ดที่มีแบ็กทิกภายใน

หลายแบ็กทิก

โค้ดบล็อก

โค้ดบล็อกแบบย่อหน้า (Indent)

โค้ดบล็อกแบบรั้ว (Fenced)

ระบุภาษาโปรแกรมเพื่อไฮไลต์

ตัวอย่างภาษายอดนิยม

JavaScript

Python

HTML

CSS

Bash/Shell

JSON

ฟีเจอร์โค้ดบล็อกขั้นสูง

แสดงหมายเลขบรรทัด

ไฮไลต์บรรทัด

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

ข้อผิดพลาดที่พบบ่อยและแนวทางแก้ไข

1. จำนวนแบ็กทิกไม่ตรงกัน

2. อินเดนต์ไม่สม่ำเสมอ

3. ชื่อภาษาผิด

รายการชื่อภาษาที่พบบ่อย

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

1. เลือกรูปแบบโค้ดที่เหมาะสม

2. เพิ่มคำอธิบายอย่างเหมาะสม

3. ใช้ตัวระบุภาษาที่ถูกต้อง

4. รักษาโค้ดให้กระชับ

เอาต์พุต HTML

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

เอกสาร API

ตัวอย่างไฟล์คอนฟิก

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

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

แบบฝึกหัด