---
title: Code drawers
slug: th/user-guides/code-drawers
description: เอกสารนี้นำเสนอสามตัวอย่างการใช้งาน code drawers แบบใช้งานได้จริง ซึ่งช่วยให้สามารถแสดงตัวอย่างโค้ดในรูปแบบเลย์เอาต์สามคอลัมน์ที่ดูสวยงาม โดยรวมถึงโค้ดที่เขียนด้วย JavaScript และ Python ตัวอย่างเหล่านี้มอบการสาธิตที่ครอบคลุมข
createdAt: 2022-07-04T12:42:31.000Z
---

ลิ้นชักโค้ดเป็นวิธีที่ยอดเยี่ยมในการแสดงตัวอย่างโค้ดในเลย์เอาต์แบบสามคอลัมน์

นี่คือตัวอย่างหนึ่ง:‘‘‘

::::CodeDrawer{title="A code drawer" isResponseExpanded="true" autoGeneratedAnchorSlug="a-code-drawer" legacyHash="S9e7LDxVHJ50RmqAIvHnf"}
:::CodeblockTabsExamples
```javascript
let x, y, z;  // Statement 1
x = 5;        // Statement 2
y = 6;        // Statement 3
z = x + y;    // Statement 4

document.getElementById("demo").innerHTML =
"The value of z is " + z + ".";  
```

```python
# Program to find the sum of all numbers stored in a list

# List of numbers
numbers = [6, 5, 3, 8, 4, 2, 5, 4, 11]

# variable to store the sum
sum = 0

# iterate over the list
for val in numbers:
    sum = sum+val

print("The sum is", sum)
```
:::

:::CodeblockTabsResponses
```javascript
```
:::
::::

นี่คือตัวอย่างอีกอันหนึ่ง

::::CodeDrawer{title="Another code drawer" isResponseExpanded="true" autoGeneratedAnchorSlug="another-code-drawer" legacyHash="UwiH3lFnllMs_SW-1EITy"}
:::CodeblockTabsExamples
```javascript
let x, y, z;  // Statement 1
x = 5;        // Statement 2
y = 6;        // Statement 3
z = x + y;    // Statement 4

document.getElementById("demo").innerHTML =
"The value of z is " + z + ".";  
```

```python
# Program to find the sum of all numbers stored in a list

# List of numbers
numbers = [6, 5, 3, 8, 4, 2, 5, 4, 11]

# variable to store the sum
sum = 0

# iterate over the list
for val in numbers:
    sum = sum+val

print("The sum is", sum)
```
:::

:::CodeblockTabsResponses
```javascript
```
:::
::::

และนี่คือภาพหน้าจอขณะกำลังแก้ไข:

![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/kbx_YaJkagc8DztKeSYkR_code-drawer-light.png "ลิ้นชักโค้ด")

## มาร์กดาวน์

ใช้มาร์กดาวน์ต่อไปนี้เพื่อสร้างบล็อก code drawer:

````markdown
### Test codedrawer

::::codedrawer{title="a code drawer"}
:::codeblocktabs-examples
```php
// Some wordpress plugi
 // Add our plugin's option page to the WP admin menu.
  public function add_plugin_options_page() {
    add_options_page(
      'Example Plugin Settings',
      'Example Plugin Settings',
      'manage_options',
      'ex',
      [$this, 'render_admin_page']
    );
  }
```
```go
// Next should be used only inside middleware.
// It executes the pending handlers in the chain inside the calling handler.
// See example in GitHub.
func (c *Context) Next() {
    c.index++
    for c.index < int8(len(c.handlers)) {
        c.handlers[c.index](c)
        c.index++
    }
}
```
```javascript
// demo js
```
:::
:::codeblocktabs-responses
```json
// 404 -  not found
{
  requireFingerprintScope: true,
  maxMachines: 1,
  concurrent: false,
  floating: false,
  protected: true,
  strict: true
}
```
:::
::::
````

***

::::LinkArray
:::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-C1IcmVcG0rx4ZLHX6X7V7-20250911-192557.png"}
:FontAwesome[]{icon="fa-solid fa-cubes"} &#x20;**&#x20;ค้นหาบล็อกอื่น ๆ**

ค้นพบวิธีใหม่ ๆ และบล็อกต่าง ๆ เพื่อสร้างหน้าเอกสารที่สวยงามและใช้งานได้ดี

[ดูบล็อกทั้งหมด](docId\:fvbccw7nLvGJbcHvBvBG9)&#x20;
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-YRyGGWKsNS1ZZJa5XJy0z-20250911-192608.png"}
:FontAwesome[]{icon="fa-solid fa-headset"}**&#x20; ต้องการความช่วยเหลือ?  ⬇️**

ใช้ **สีน้ำเงิน** **ไอคอนแชท** ที่มุมล่างขวา

หรือใช้ **AI Chat** (จากช่องค้นหา) เพื่อรับคำตอบอย่างรวดเร็ว
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-MS_ubDHlXgoktt4svD2rL-20250911-192619.png"}
:FontAwesome[]{icon="fa-solid fa-hand-holding-heart"}**&#x20;  ความคิดเห็นของคุณสำคัญ**

ใช้แบบฟอร์มข้อเสนอแนะด้านล่างได้โดยไม่เปิดเผยตัวตน

หรือถามคำถามใน **ส่วน Q\&A** และทีมงานหรือ AI ของเราจะให้คำตอบแก่คุณ
:::
::::