How to write a blog using MDX on my blog

1. Định Dạng Văn Bản (Text Formatting)

Bạn có thể sử dụng các ký tự Markdown tiêu chuẩn cũng như các thẻ Component tùy chỉnh để định dạng văn bản:

• In đậm (Bold): Dùng **nội dung** hoặc __nội dung__ → Bài viết hướng dẫn MDX
• In nghiêng (Italic): Dùng *nội dung* hoặc _nội dung_ → Bài viết hướng dẫn MDX
• Gạch ngang (Strikethrough): Dùng ~~nội dung~~ → Nội dung bị gạch bỏ
• Inline Code: Dùng dấu backtick `const x = 10` → const x = 10
• Phím tắt (Kbd): Dùng <Kbd>Ctrl</Kbd> + <Kbd>Shift</Kbd> + <Kbd>P</Kbd> → Ctrl + Shift + P
• Chú thích nhanh (Tooltip): Rê chuột vào đâyTrình biên dịch MDX hỗ trợ React 19 để xem giải thích.

Các nhãn trạng thái (Badge Components)

Blog hỗ trợ component <Badge> hiển thị các tag / nhãn trạng thái phân loại:

1
2
3
4
5

<Badge variant="default">Default</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="danger">Danger</Badge>

2. Tiêu Đề (Headings)

Blog hỗ trợ 6 cấp độ tiêu đề từ H1 đến H6. Tiêu đề H1 chính được layout lấy từ title trong src/data/blog.ts, vì vậy trong nội dung MDX bạn nên dùng từ H2 (##) trở đi:

1
2
3
4
5
6

## Tiêu đề H2 (Chủ đề chính) - 20px (text-xl)
### Tiêu đề H3 (Mục nhỏ hơn) - 18px (text-lg)
#### Tiêu đề H4 (Chi tiết bổ sung) - 16px (text-base)
##### Tiêu đề H5 - 14px (text-sm)
###### Tiêu đề H6 - 12px (text-xs)
text bình thường - 16px (blog-content)

Tiêu đề H2 mẫu - 20px (text-xl)

Tiêu đề H3 mẫu - 18px (text-lg)

Tiêu đề H4 mẫu - 16px (text-base)

Tiêu đề H5 mẫu - 14px (text-sm)

Tiêu đề H6 mẫu - 12px (text-xs)

text bình thường - 16px (blog-content)

3. Quy Trình Theo Bước (Steps)

3.1. Các bước thực hiện (<Steps> & <Step>)

Phù hợp hiển thị các hướng dẫn theo quy trình 1, 2, 3 có vạch nối trực quan:

1
2
3
4
5
6
7
8
9
10
11

// src/data/blog.ts
export const BLOG: BlogPost[] = [
  {
    title: 'Tên blog',
    description: 'Mô tả ngắn cho blog',
    link: '/blog/<slug>', // slug = tên folder bạn tạo ở step 1
    date: 'YYYY-MM-DD', // format yyyy-mm-dd
    // image: '/blog/<slug>/images/cover.png',
  },
  // ...
]

1
2
3
4
5

<Steps>
  <Step number="1" title="Tạo file MDX">Nội dung bước 1...</Step>
  <Step number="2" title="Khai báo BLOG">Nội dung bước 2...</Step>
  <Step number="3" title="Metadata tự động sinh">Nội dung bước 3...</Step>
</Steps>

4. Code (Code Blocks & Syntax Highlighting)

Code block hỗ trợ tự động đánh số dòng, nút Copy 1-click, badge tên ngôn ngữ, và bộ phối màu Light/Dark Mode phân biệt rõ ràng từ khóa, biến, hàm và chuỗi.

Cú pháp:

1
2
3

\```<tên ngôn ngữ>
code
\```

4.1. JavaScript / TypeScript (javascript, typescript)

1
2
3
4
5
6
7
8
9

interface UserProfile {
  id: string
  name: string
  role: 'admin' | 'user'
}
function getUserInfo(user: UserProfile): string {
  return `User ${user.name} with ID ${user.id}`
}

4.2. Go (go)

1
2
3
4
5
6
7
8
9
10

package main
import "fmt"
func main() {
    numbers := []int{1, 2, 3, 4, 5}
    for _, num := range numbers {
        fmt.Printf("Number: %d\n", num)
    }
}

4.3. Python (python)

1
2
3
4
5
6
7

def calculate_fibonacci(n: int) -> list[int]:
    sequence = [0, 1]
    while len(sequence) < n:
        sequence.append(sequence[-1] + sequence[-2])
    return sequence
print(calculate_fibonacci(8))

4.4. Shell Script (bash, zsh)

1
2
3
4

# Cập nhật repository và cài đặt gói
sudo apt update && sudo apt upgrade -y
git clone https://github.com/facebook/react.git
cd react && npm install

4.5. Code Group (<CodeGroup>)

Dùng <CodeGroup> + <Code> để so sánh cùng logic ở nhiều ngôn ngữ:

1
2
3
4

function fibonacci(n) {
  if (n <= 1) return n
  return fibonacci(n - 1) + fibonacci(n - 2)
}

1
2
3
4

def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)

1
2
3
4
5
6

func fibonacci(n int) int {
    if n <= 1 {
        return n
    }
    return fibonacci(n-1) + fibonacci(n-2)
}

Cú pháp:

1
2
3
4
5
6
7
8

<CodeGroup>
  <Code language="javascript" label="JS">\```javascript
    code...
  \```</Code>
  <Code language="python" label="Python">\```python
    code...
  \```</Code>
</CodeGroup>

5. Danh Sách (Lists)

Tất cả các danh sách trên blog đã được tinh chỉnh tự động thụt lề lùi sâu pl-11 (2.75rem) giúp giao diện ngăn nắp, dễ theo dõi.

5.1. Danh sách đánh số (Ordered List)

Cú pháp: 1., 2., 3.

1. Chuẩn bị tiêu đề và tóm tắt nội dung bài viết rõ ràng.
2. Kiểm tra lại cú pháp Markdown và các đường dẫn liên kết.
3. Sắp xếp bố cục hình ảnh và code block hợp lý.
4. Đảm bảo hiển thị tốt trên cả giao diện sáng (Light) và tối (Dark).

5.2. Danh sách gạch đầu dòng (Unordered List)

Cú pháp: - hoặc *

• Go (Golang): Ngôn ngữ lập trình hệ thống hiện đại, tối ưu xử lý đồng thời (Concurrency).
• Kotlin: Ngôn ngữ hiện đại phát triển ứng dụng Android.
• TypeScript: Ngôn ngữ nâng cấp cho JavaScript với Static Typing.
• Python: Phổ biến trong Khoa học dữ liệu và Trí tuệ nhân tạo.

5.3. Danh sách công việc (Task Lists / Checkboxes)

Cú pháp: - [ ] (chưa hoàn thành) hoặc - [x] (đã hoàn thành)

• Thiết kế giao diện Blog Responsive
• Tích hợp bộ tô màu cú pháp Code Block
• Tự động tạo Mục lục (Table of Contents)
• Thêm tính năng bình luận dưới bài viết

6. Trích Dẫn & Khung Thông Báo (Blockquotes & Callouts)

6.1. Trích dẫn chuẩn (Blockquotes)

Khung trích dẫn dùng dấu > ở đầu dòng, có chữ nghiêng và vạch kẻ lề trái. Độ đậm hiện tại (font-weight) là 440 trên desktop, 400 trên mobile:

1

> Đây là đoạn văn bản trích dẫn hoặc ghi chú quan trọng cần người đọc chú ý trong bài viết.

Đây là đoạn văn bản trích dẫn hoặc ghi chú quan trọng cần người đọc chú ý trong bài viết.

6.2. Trích Dẫn Lớn (PullQuote)

Dùng <PullQuote> để tạo trích dẫn nổi bật giữa bài:

1
2
3

<PullQuote author="Steve Jobs">
  The only way to do great work is to love what you do.
</PullQuote>

6.3. Khung thông báo chuyên nghiệp (Callout)

Blog cung cấp component <Callout> với nhiều màu sắc và icon phù hợp cho nhiều loại thông điệp:

1
2
3
4
5
6

<Callout type="note" title="Ghi chú">Nội dung ghi chú...</Callout>
<Callout type="tip" title="Mẹo hay">Nội dung mẹo hay...</Callout>
<Callout type="info" title="Thông tin">Nội dung thông tin...</Callout>
<Callout type="success" title="Hoàn tất">Nội dung thành công...</Callout>
<Callout type="warning" title="Cảnh báo">Nội dung cảnh báo...</Callout>
<Callout type="danger" title="Nguy hiểm">Nội dung nguy hiểm...</Callout>

7. Hình Ảnh, Video & Audio (Media & Embeds)

Blog hỗ trợ component Image, YouTube, Audio, PDF. Ảnh riêng của bài có thể đặt trong src/app/blog/_content/<slug>/images/ rồi dùng đường dẫn /blog/<slug>/images/anh.png. File dùng chung có thể đặt trong public/ và tham chiếu bằng đường dẫn bắt đầu từ /. Ảnh và PDF cũng nhận link Google Drive công khai; Audio nhận URL file âm thanh trực tiếp.

7.1. Thẻ Image cơ bản có chú thích dưới ảnh.

1

<Image src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?auto=format&fit=crop&w=1200&q=80" caption="Phong cảnh thung lũng sương mù" />

Phong cảnh thung lũng sương mù

7.2. Thẻ Image tùy chỉnh độ rộng width & căn giữa className="mx-auto"

1

<Image src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=600&q=80" width="350" className="mx-auto" caption="Kích thước 350px căn giữa" />

• width="350": Chỉ định chiều rộng ảnh theo pixel (px). Nếu muốn ảnh chiếm nửa khung chứa, dùng className="w-1/2 mx-auto".
• className="mx-auto": Căn ảnh giữa khung bài viết.

Kích thước 350px căn giữa

Hỗ trợ hiển thị ảnh động .gif đầy đủ hiệu ứng chuyển động:

Charizard Mega X

1

<Image src="/blog/<slug>/images/anh-dong.gif" width="480" className="mx-auto" caption="Minh họa ảnh động GIF" />

7.3. Thẻ Image lấy ảnh từ Google Drive

Hỗ trợ nhúng ảnh trực tiếp từ đường dẫn chia sẻ Google Drive công khai:

ảnh từ Google Drive

1

<Image src="https://drive.google.com/file/d/{FILE_ID}/view?usp=sharing" caption="Bức ảnh được nhúng trực tiếp từ Google Drive" />

7.4. Thẻ Xem File PDF (<PDF />)

Cho phép hiển thị và xem trực tiếp file PDF trong blog với thanh công cụ (Tải về, Mở tab mới, Toàn màn hình).

Hỗ trợ file nội bộ trong src/app/resources/ và file PDF được lưu trên Google Drive (công khai):

Route /resources/<filename> phục vụ file đặt trong src/app/resources/. Ví dụ PDF có sẵn trong repository:

Resources PDF từ Google Drive công khai:

1
2
3
4
5

{/* File PDF nội bộ */}
<PDF src="/resources/file_name.pdf" title="Tên tài liệu PDF" height="700px" />
{/* Hoặc link Google Drive công khai */}
<PDF src="https://drive.google.com/file/d/YOUR_FILE_ID/view?usp=sharing" title="Tài liệu từ Google Drive" height="700px" />

7.5. Thẻ Phát Nhạc Trực Tuyến (<Spotify />, <SoundCloud />)

Cho phép nhúng trực tiếp bài hát, album hoặc danh sách nhạc cho người đọc vừa xem bài viết vừa nghe nhạc, hỗ trợ Spotify và SoundCloud:

Nhúng Spotify (<Spotify />)

1
2

<Spotify link="https://open.spotify.com/track/3QaPy1KgI7nu9FJEQUgn6h" />
<Spotify link="https://open.spotify.com/album/7aJuG4TFXa2hmE4z1yxc3n" />

Nhúng SoundCloud (<SoundCloud />)

1

<SoundCloud link="https://soundcloud.com/john-nguy-n-984283038/n-u-em-kh-ng-h-nh-ph-c-remix-1" />

7.6. Thẻ Video YouTube (<YouTube />)

Cho phép nhúng trực tiếp video YouTube bằng đường dẫn chia sẻ (https://youtu.be/..., https://www.youtube.com/watch?v=...) hoặc Video ID:

Vào 1 video YouTube, nhấn nút Chia sẻ → Sao chép.

1
2
3
4
5
6
7
8

{/* Truyền đường dẫn chia sẻ (Copy Link từ nút Share) */}
<YouTube link="https://youtu.be/dQw4w9WgXcQ" title="Tên Video YouTube" />
{/* Hoặc đường dẫn tiêu chuẩn watch?v= */}
<YouTube url="https://www.youtube.com/watch?v=dQw4w9WgXcQ" title="Tên Video YouTube" />
{/* Hoặc truyền Video ID */}
<YouTube id="dQw4w9WgXcQ" title="Tên Video YouTube" />

7.7. Thẻ phát File Âm Thanh (MP3, WAV, FLAC, ...) (<Audio />)

1

<Audio src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" title="Mẫu bản ghi âm thanh Podcast" />

8. Bảng Dữ Liệu (Tables)

Bảng trong MDX tự động hỗ trợ cuộn ngang trên thiết bị di động và viền ô sắc nét:

Cú pháp tổng quát:

1
2
3
4

| Tiêu đề cột 1 | Tiêu đề cột 2 | Tiêu đề cột 3 |
| :--- | :--- | :--- |
| Nội dung hàng 1 | Nội dung hàng 2 | Nội dung hàng 3 |
| Nội dung hàng 1 | Nội dung hàng 2 | Nội dung hàng 3 |

9. Biểu Thức Toán Học (LaTeX Math)

Blog tự động hỗ trợ soạn thảo công thức toán học KaTeX / LaTeX trực tiếp trong MDX:

• Inline Math (nằm cùng dòng text): Kẹp công thức giữa hai dấu $: ví dụ $E = mc^2$ ra $E = mc^2$, hoặc công thức Euler $e^{i\pi} + 1 = 0$.
• Block Math (khối riêng biệt): Kẹp công thức giữa hai cặp dấu $$:

1
2
3
4
5
6

Công thức inline: $E = mc^2$ hoặc $e^{i\pi} + 1 = 0$
Công thức khối:
$$
f(x) = \int_{-\infty}^{\infty} \hat{f}(\xi)\,e^{2\pi i \xi x}\,d\xi
$$

10. Chèn Đường Dẫn (Links)

Để chèn liên kết ngoài hoặc nội bộ, sử dụng cú pháp: [Tên hiển thị](https://...). Blog tự động nhận biết liên kết ngoài (http/https) và mở sẵn ở tab mới (target="_blank"):

• Khám phá kho ảnh nghệ thuật & thiên nhiên: Unsplash
• Săn lùng sản phẩm công nghệ độc đáo: Product Hunt
• Chuyển hướng nội bộ trong Blog: Tin tức HCMUS

1

[Tên hiển thị](https://link.com)

11. Kẻ Ngang & Phân Đoạn (Horizontal Rules)

Sử dụng --- để kẻ một đường phân cách giữa các phần nội dung:

1

---

12. Cấu Trúc Thư Mục Trực Quan (FileTree)

Component <FileTree> hiển thị cây thư mục dạng collapsible, thay thế cho cách gõ text thủ công:

1
2
3
4
5
6
7
8
9
10

<FileTree>
  <Folder name="src/app/blog/_content" defaultOpen>
    <Folder name="hello-world" defaultOpen>
      <File name="page.mdx" />
      <Folder name="images" defaultOpen>
        <File name="photos-1.png" />
      </Folder>
    </Folder>
  </Folder>
</FileTree>

Dùng defaultOpen để mở rộng thư mục theo mặc định, hoặc bỏ đi để gấp lại.

13. Sơ Đồ Kiến Trúc (Mermaid)

Dùng <Mermaid> để vẽ flowchart, sequence diagram, class diagram, v.v.:

13.1. Sơ đồ luồng (Flowchart)

1
2
3
4
5
6
7
8

<Mermaid chart={`
graph TD
    A[Viết bài MDX] --> B{Đã thêm trong blog.ts?}
    B -- Có --> C[Build & Deploy]
    B -- Chưa --> D[Thêm entry vào BLOG]
    D --> C
    C --> E[🚀 Blog lên sóng]
`} />

13.2. Sơ đồ lớp (Class Diagram)

Cú pháp:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<Mermaid chart={`
classDiagram
    class User {
        +String id
        +String name
        +login()
    }
    class Author {
        +String bio
        +createPost()
    }
    class Post {
        +String slug
        +String title
        +publish()
    }
    User <|-- Author
    Author -- Post : writes
`} />

Xem thêm tại đây: Syntax Mermaid

14. Bôi Sáng Văn Bản (Highlight)

Dùng <Highlight> để làm nổi bật từ khóa hoặc đoạn quan trọng — hoạt động cả inline lẫn block:

Đây là một từ khóa quan trọng được bôi vàng trong câu.

1
2
3
4
5

Đây là một <Highlight>từ khóa quan trọng</Highlight> được bôi vàng.
<Highlight>
  **Block highlight**: Đoạn văn bản dài cần gây chú ý.
</Highlight>

15. Nút Kêu Gọi Hành Động (Button)

Dùng <Button> để tạo nút CTA hoặc dẫn link:

1
2
3

<Button href="https://nextjs.org/docs">Xem tài liệu Next.js</Button>
<Button href="/blog" variant="outline">Quay lại Blog</Button>
<Button href="/about" variant="ghost" size="sm">Tìm hiểu thêm</Button>

16. Dòng Thời Gian (Timeline)

Dùng <Timeline> và <TimelineItem> để hiển thị lịch sử phát triển, roadmap, changelog. Các mốc bên dưới chỉ là dữ liệu minh họa:

1
2
3
4
5
6
7
8
9
10
11

<Timeline>
  <TimelineItem date="2024-03" title="Ra mắt Blog" active>
    Phiên bản đầu tiên.
  </TimelineItem>
  <TimelineItem date="2024-06" title="Bổ sung Media">
    Thêm Image, YouTube, Audio.
  </TimelineItem>
  <TimelineItem date="2024-09" title="Nâng cấp UX">
    Thêm Steps, FileTree, Mermaid.
  </TimelineItem>
</Timeline>

17. Thư Viện Ảnh (ImageGallery)

Dùng <ImageGallery> để hiển thị grid ảnh + lightbox:

1
2
3
4
5
6

<ImageGallery
  images={[
    { src: '...', alt: 'Mô tả' },
    { src: '...', alt: 'Mô tả' },
  ]}
/>

18. So Sánh Ảnh (ImageCompare)

Dùng <ImageCompare> với ảnh trước/sau kéo thả so sánh:

BeforeAfter

1
2
3
4
5
6

<ImageCompare
  before="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80"
  after="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=80"
  beforeLabel="Before"
  afterLabel="After"
/>

19. Thẻ GitHub Repo (GithubCard)

Dùng <GithubCard> để hiển thị thông tin repository GitHub:

1

<GithubCard owner="anomalyco" repo="opencode" />

20. Thẻ Thu Gọn & Lưới Thẻ Card (Accordion & Grid Cards)

20.1. Thẻ thu gọn (<Details>)

Sử dụng component <Details> để ẩn/hiện các nội dung chi tiết hoặc phần giải đáp thắc mắc (FAQ):

1
2
3

<Details summary="Tiêu đề câu hỏi hoặc thông tin ẩn" defaultOpen>
  Nội dung chi tiết được giấu bên trong, click vào tiêu đề để mở ra.
</Details>

Dùng defaultOpen để mở ra.

20.2. Lưới Thẻ Card (<CardGrid> & <Card>)

Hiển thị liên kết hoặc tài liệu tham khảo dưới dạng Lưới thẻ thiết kế hiện đại:

1
2
3
4
5
6
7
8
9

<CardGrid>
  <Card title="Next.js Documentation" href="https://nextjs.org/docs">
    Mô tả ngắn gọn về tài liệu Next.js.
  </Card>
  <Card title="Vercel Platform" href="https://vercel.com">
    Mô tả ngắn gọn về Vercel.
  </Card>
</CardGrid>

21. Thẻ Bài Viết (PostCard)

Dùng <PostCard> để dẫn link đến bài blog khác:

1

<PostCard slug="hello-world" />

22. Số Đếm Động (CountUp)

Dùng <CountUp> để tạo hiệu ứng đếm số khi scroll đến:

1
2
3

<CountUp number={42} suffix="+" title="Bài viết" color="#2563eb" />
<CountUp number={4} suffix="k" title="Lượt xem" color="#10b981" />
<CountUp number={128} prefix="$" decimals={2} title="Ủng hộ" color="#f59e0b" />

Bảng tham số Props

23. Biểu Đồ (Chart)

Dùng BarChart, LineChart, PieChart để vẽ biểu đồ từ dữ liệu:

1
2
3
4
5
6
7

<BarChart
  data={[
    { label: 'T1', value: 120 },
    { label: 'T2', value: 200 },
    { label: 'T3', value: 150 },
  ]}
/>

1
2
3
4
5
6

<LineChart
  data={[
    { label: 'T1', value: 120 },
    { label: 'T2', value: 200 },
  ]}
/>

1
2
3
4
5
6

<PieChart
  data={[
    { label: 'React', value: 40 },
    { label: 'Next.js', value: 30 },
  ]}
/>

Happy blogging! 🎉