Typography Showcase

Headings

Heading 1 - หัวข้อหลัก (ใช้เฉพาะ title)

Heading 2 - หัวข้อรอง

Heading 3 - หัวข้อย่อย

Text Styles

This is a regular paragraph. ย่อหน้าปกติสำหรับเนื้อหาทั่วไป ควรอ่านง่ายและสบายตา

Bold text ใช้เน้นข้อความสำคัญ

Italic text ใช้สำหรับคำศัพท์หรือเน้นเบาๆ

Bold and italic ใช้เมื่อต้องการเน้นมากเป็นพิเศษ

Strikethrough ใช้แสดงข้อความที่ถูกลบหรือไม่ใช้แล้ว

inline code ใช้สำหรับ code สั้นๆ ในประโยค เช่น npm install หรือ kubectl get pods

Highlight

Revenue เพิ่มขึ้น 67% จากปีก่อน แต่ค่า Cloud เพิ่มขึ้น 40% ในเดือนเดียว

ระบบอยู่ในสถานะ ต้องเฝ้าระวัง แต่ทีมกำลัง ดำเนินการแก้ไข

สีอื่นๆ: Primary และ Accent

Links

• External link - ลิงก์ไปเว็บภายนอก
• Internal link - ลิงก์ภายในเว็บ

Blockquotes

แบบมีผู้พูด (Attribution)

The best way to predict the future is to invent it.

แบบไม่มีผู้พูด

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

Lists

Unordered List

• Item แรก
• Item ที่สอง
  • Sub-item 2.1
  • Sub-item 2.2
• Item ที่สาม

Ordered List

1. ขั้นตอนแรก
2. ขั้นตอนที่สอง
   1. ขั้นตอนย่อย 2.1
   2. ขั้นตอนย่อย 2.2
3. ขั้นตอนที่สาม

Mixed: Ordered → Unordered

1. ขั้นตอนแรก
2. ขั้นตอนที่สอง
   • รายละเอียด A
   • รายละเอียด B
3. ขั้นตอนที่สาม

Mixed: Unordered → Ordered

• หมวดแรก
• หมวดที่สอง
  1. ลำดับที่ 1
  2. ลำดับที่ 2
• หมวดที่สาม

Ordered with Bold + Text (Tight)

1. Kubernetes คือระบบจัดการ container ที่ได้รับความนิยมสูงสุดในปัจจุบัน
2. Docker เป็นเครื่องมือสร้าง container image ที่ใช้งานง่าย
3. Terraform ช่วยจัดการ infrastructure แบบ declarative ผ่านโค้ด

Ordered with Inline Code + Link

1. ใช้คำสั่ง kubectl get pods เพื่อดู pods ทั้งหมด
2. อ่านเพิ่มเติมที่ Kubernetes Docs สำหรับรายละเอียด
3. ตั้งค่า replicas: 3 ใน deployment manifest

Deep Nesting (3 ระดับ)

1. ระดับ 1
   1. ระดับ 2
      1. ระดับ 3a
      2. ระดับ 3b
   2. ระดับ 2 อีกข้อ
2. ระดับ 1 ข้อถัดไป

• ระดับ 1
  • ระดับ 2
    • ระดับ 3a
    • ระดับ 3b
  • ระดับ 2 อีกข้อ
• ระดับ 1 ข้อถัดไป

Task List

• Task ที่เสร็จแล้ว
• Task ที่เสร็จแล้ว
• Task ที่ยังไม่เสร็จ

Tables

Basic Table

Aligned Table

Feature Comparison

DataTable

Code Blocks

Inline Code

ใช้ console.log() สำหรับ debug และ npm run build สำหรับ build project

Editor Frame (with filename)

function greet(name) {
  return `Hello, ${name}!`;
}

Terminal Frame

# Install dependencies
npm install

# Run development server
npm run dev

Line Highlighting

interface User {
  id: number;
  name: string;
  email: string;
  role: 'admin' | 'user';
}

Line Markers (mark, ins, del)

const old = "removed";
const updated = "added";

Text Markers

async function fetchData(url) {
  const response = await fetch(url);
  return response.json();
}

Diff with Syntax Highlighting

apiVersion: apps/v1
kind: Deployment
metadata:
  name: my-app
spec:
  replicas: 1
  replicas: 3

Frame Override (no frame)

{
  "name": "my-project",
  "version": "1.0.0"
}

Line Numbers

1
interface User {
2
  id: number;
3
  name: string;
4
  email: string;
5
}
6

7
function getUser(id: number): User {
8
  return { id, name: "John", email: "john@example.com" };
9
}

Mermaid Diagrams

Flowchart

graph TD
  A[Start] --> B{Decision?}
  B -->|Yes| C[Action A]
  B -->|No| D[Action B]
  C --> E[🏁 End]
  D --> E

Sequence Diagram

sequenceDiagram
  participant U as User
  participant S as Server
  participant DB as Database
  U->>S: POST /api/data
  S->>DB: INSERT query
  DB-->>S: OK
  S-->>U: 201 Created

State Diagram

stateDiagram-v2
  [*] --> Draft
  Draft --> Review: Submit
  Review --> Published: Approve
  Review --> Draft: Reject
  Published --> Archived: Archive
  Archived --> [*]

Class Diagram

classDiagram
  class Animal {
    +String name
    +int age
    +makeSound()
  }
  class Dog {
    +fetch()
  }
  class Cat {
    +purr()
  }
  Animal <|-- Dog
  Animal <|-- Cat

ER Diagram

erDiagram
  USER ||--o{ POST : writes
  POST ||--o{ COMMENT : has
  USER ||--o{ COMMENT : writes
  POST }o--|| CATEGORY : belongs_to

KaTeX

Inline: สมการ Black-Scholes ใช้ $C = S_0 N(d_1) - Ke^{-rT}N(d_2)$ ในการคำนวณราคา option

Block แบบสั้น:

Block แบบซับซ้อน (Black-Scholes full form):

Images

Figure Component

Video

Callouts

Details (Collapsible)

Content Tabs

apiVersion: v1
kind: Pod
metadata:
  name: my-app

{
  "apiVersion": "v1",
  "kind": "Pod",
  "metadata": { "name": "my-app" }
}

Keyboard Shortcuts

กด Ctrl + C เพื่อ copy

กด Cmd + K เพื่อเปิด command palette

Horizontal Rules

ใช้ --- เพื่อแบ่ง section

Quiz

Multiple Choice

True/False

คำถามยาว + ตัวเลือกยาว

ไม่มีคำอธิบาย

Buttons