Logo Piases
เขียนบทความขึ้นมาด้วย Markdown

เขียนบทความขึ้นมาด้วย Markdown

October 5, 2024
3 min read
Table of Contents

บทความทั้งหมดในเว็บไซต์ถูกเขียนขึ้นด้วย Markdown และมีแนวโน้มว่าหลังจากนี้จะได้ใช้ Markdown บ่อยขึ้น จึงถือโอกาสใช้หน้านี้บันทึก Syntax ของ Markdown เอาไว้

หากใครผ่านมาแล้วได้ประโยชน์ ก็ขอแสดงความยินดีด้วย 🎉

Markdown คืออะไร?

Markdown คือ ภาษา Markup รูปแบบหนึ่งที่ใช้สำหรับการจัดรูปแบบข้อความ และแปลงเป็น HTML ได้โดยไม่ต้องใช้ภาษา HTML ที่มีความซับซ้อน

การใช้ Markdown จะช่วยให้เราสามารถตกแต่งข้อความได้โดยใช้ Syntax ที่เรียบง่าย อย่างเช่นการทำตัวหนาด้วยการใช้เครื่องหมายดอกจันกำกับหน้าหลัง

**ข้อความที่อยากตัวหนา**

แทนที่เราจะใช้ภาษา HTML ที่เขียนได้ช้ากว่าอย่าง

<strong>ข้อความที่อยากตัวหนา</strong>

ด้วยความสะดวกนี้ Markdown จึงได้รับความนิยมในการเขียนบทความของเหล่า Developer (และผู้ที่จำ Syntax ได้) เนื่องจากความรวดเร็วจากการที่สามารถพิมพ์รวดเดียวโดยที่ไม่จำเป็นต้องเสียเวลาจับเมาส์เพื่อใช้เครื่องมือจัดหน้า และโดยพื้นฐานการเขียน Markdown มีการแบ่งแต่ละย่อหน้าออกจากกันเป็นก้อนที่ชัดเจนในแต่ละส่วน (คล้ายกับ Gutenberg สำหรับใครที่เคยใช้ WordPress มาก่อน) จึงทำให้ไฟล์ Markdown ค่อนข้างสะอาดและเป็นมิตรต่อการกลับมาแก้ไข

โดยการใช้งาน Markdown สามารถใช้งานได้มากมายหลายโอกาส ตั้งแต่ไฟล์ Document ที่ใช้กันทั่วไป, การเขียนอีเมล, แอปจดโน๊ต, ไฟล์ README.md บน GitHub, การตกแต่งข้อความใน Discord, และการเขียนบทความของเว็บไซต์ที่สร้างด้วย Framework ต่าง ๆ โดยไม่ใช้ CMS (อย่างเช่นบทความนี้)

Headings

หัวข้อจะใช้เครื่องหมาย # หน้าข้อความที่ต้องการเป็น Heading โดยเพิ่มจำนวน # ตามลำดับ Heading

# H1
 
## H2
 
### H3
 
#### H4
 
##### H5
 
###### H6

หรือใช้เครื่องหมาย === ใต้ข้อความที่ต้องการเป็น Heading 1 (H1)

และเครื่องหมาย --- ใต้ข้อความที่ต้องการเป็น Heading 2 (H2)

อยากเป็น H1 จังเลย
===
 
อยากเป็น H2 จังเลย
---

Paragraph

สำหรับการเขียนย่อหน้า เพียงแค่เว้น 1 บรรทัดด้านบนและด้านล่างข้อความที่ต้องการกำหนดให้เป็นย่อหน้า

ถ้าต้องการเว้นบรรทัดโดยมีช่องว่างระหว่างบรรทัด ให้เว้นบรรทัดตามปกติ (เหมือนเคาะ Enter 1 ครั้งตามปกติ)

แต่ถ้าหากต้องการขึ้นบรรทัดใหม่โดยที่ย่อหน้าติดกัน
ให้เคาะ Spacebar 2 ครั้งท้ายข้อความก่อนขึ้น
บรรทัดใหม่

ตกแต่งข้อความ

Syntax สำหรับการตกแต่งข้อความ

ตัวหนา (Bold)

**ข้อความที่หนา**
 
หรือ
 
__ข้อความที่หนา__

ตัวเอียง (Italic)

*ข้อความที่เอียง*
 
หรือ
 
_ข้อความที่เอียง_

ขีดฆ่า (Strikethrough)

~~ข้อความที่ขีดฆ่า~~

ขีดเส้นใต้ (Underline)

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

ตัวห้อย (Subscript)

This is a subscript text

<sub>subscript</sub>

ยกกำลัง (Superscript)

22 มีค่าเท่ากับ 4

2<sup>2</sup> มีค่าเท่ากับ 4

แทรกรูปภาพ

สำหรับ Astro วางรูปภาพไว้ใน folder เดียวกันกับไฟล์ Markdown

![ข้อความ Alt Tags ของภาพ](./mardown.webp)

ผลลัพธ์

Test Relative Image

Quoting Code

ไฮไลต์ข้อความ ที่นิยมใช้กับการไฮไลต์โค๊ด เช่น npm run dev

`ข้อความ`

Blockquote

Syntax

> **สวัสดี** นี่คือตัวอย่างโควทสุดเท่ สุดอันตราย

ผลลัพธ์ที่ได้

สวัสดี นี่คือตัวอย่างโควทสุดเท่ สุดอันตราย

ตาราง

Syntax

| Italics   | Bold     | Code   |
| --------- | -------- | ------ |
| _italics_ | **bold** | `code` |

ผลลัพธ์

ItalicsBoldCode
italicsboldcode

Code Blocks

ใช้ 3 Backticks ``` ที่จุดเริ่มต้นและจุดสิ้นสุดของโค๊ดที่ต้องการแสดง

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Example HTML5 Document</title>
  </head>
  <body>
    <p>Test</p>
  </body>
</html>
```

ผลลัพธ์

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Example HTML5 Document</title>
  </head>
  <body>
    <p>Test</p>
  </body>
</html>
[ข้อความ Anchor text ของลิงก์](https://ลิงก์.com)

อ่านบทความดี ๆ ได้ที่ Piases

List Types

Ordered List

Syntax

1. First item
2. Second item
3. Third item

Output

  1. First item
  2. Second item
  3. Third item

Unordered List

Syntax

- List item
- Another item
- And another item

Output

  • List item
  • Another item
  • And another item

Nested list

Syntax

- Fruit
  - Apple
  - Orange
  - Banana
- Dairy
  - Milk
  - Cheese

Output

  • Fruit
    • Apple
    • Orange
    • Banana
  • Dairy
    • Milk
    • Cheese

Other Elements

Syntax

<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.
 
Press <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd></kbd> to end the session.
 
Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.

Output

GIF is a bitmap image format.

Press CTRL+ALT+Delete to end the session.

Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures.