ข้ามไปยังเนื้อหาหลัก

คุณสมบัติของ Markdown

Docusaurus รองรับ Markdown และคุณสมบัติเพิ่มเติมอีกเล็กน้อย

Front Matter​

เอกสาร Markdown จะมีเมทาดาต้าอยู่ที่ด้านบนสุดซึ่งเรียกว่า Front Matter:

my-doc.md
---
id: my-doc-id
title: ชื่อเรื่องของเอกสาร
description: คำอธิบายของเอกสาร
slug: /my-custom-url
---

## หัวข้อ Markdown

ข้อความ Markdown พร้อม [ลิงก์](./hello.md)

ลิงก์​

รองรับลิงก์ Markdown ปกติ โดยใช้เส้นทาง URL หรือเส้นทางไฟล์แบบสัมพัทธ์

มาดู [วิธีการสร้างหน้า](/create-a-page) กันเถอะ
มาดู [วิธีการสร้างหน้า](./create-a-page.md) กันเถอะ

ผลลัพธ์: มาดู วิธีการสร้างหน้า กันเถอะ

รูปภาพ​

รองรับรูปภาพ Markdown ปกติ

คุณสามารถใช้เส้นทางแบบสัมบูรณ์เพื่ออ้างอิงรูปภาพในไดเรกทอรี static (static/img/docusaurus.png):

![Docusaurus logo](/img/docusaurus.png)

Docusaurus logo

คุณสามารถอ้างอิงรูปภาพที่สัมพันธ์กับไฟล์ปัจจุบันได้เช่นกัน วิธีนี้มีประโยชน์อย่างยิ่งในการวางรูปภาพไว้ใกล้กับไฟล์ Markdown ที่เรียกใช้:

![Docusaurus logo](./img/docusaurus.png)

บล็อกโค้ด​

รองรับบล็อกโค้ด Markdown พร้อมการไฮไลต์ไวยากรณ์

```jsx title="src/components/HelloDocusaurus.js"
function HelloDocusaurus() {
  return <h1>สวัสดี Docusaurus!</h1>;
}
```
src/components/HelloDocusaurus.js
function HelloDocusaurus() {
  return <h1>สวัสดี Docusaurus!</h1>;
}

การแจ้งเตือน (Admonitions)​

Docusaurus มีไวยากรณ์พิเศษเพื่อสร้างการแจ้งเตือนและข้อความเน้น:

:::tip[เคล็ดลับของฉัน]

ใช้ตัวเลือกคุณสมบัติที่ยอดเยี่ยมนี้

:::

:::danger[ระวัง]

การกระทำนี้อันตราย

:::
เคล็ดลับของฉัน

ใช้ตัวเลือกคุณสมบัติที่ยอดเยี่ยมนี้

ระวัง

การกระทำนี้อันตราย

MDX และ React Components​

MDX สามารถทำให้เอกสารของคุณโต้ตอบได้มากขึ้น และอนุญาตให้ใช้ คอมโพเนนต์ React ภายใน Markdown:

export const Highlight = ({children, color}) => (
  <span
    style={{
      backgroundColor: color,
      borderRadius: '20px',
      color: '#fff',
      padding: '10px',
      cursor: 'pointer',
    }}
    onClick={() => {
      alert(`คุณคลิกสี ${color} พร้อมป้ายกำกับ ${children}`)
    }}>
    {children}
  </span>
);

นี่คือ <Highlight color="#25c2a0">Docusaurus สีเขียว</Highlight> !

นี่คือ <Highlight color="#1877F2">Facebook สีน้ำเงิน</Highlight> !

นี่คือ Docusaurus สีเขียว !

นี่คือ Facebook สีน้ำเงิน !