Ví dụ về bài viết định dạng MDX

Sự khác biệt giữa Markdown và MDX#

• Markdown (MD) là một ngôn ngữ đánh dấu nhẹ, cho phép người dùng viết tài liệu bằng định dạng văn bản thuần túy, sau đó chuyển đổi thành mã HTML đã được định dạng. Nó được ưa chuộng rộng rãi nhờ cú pháp đơn giản, dễ sử dụng, đặc biệt phù hợp để viết tài liệu và các bài viết blog.
• MDX là một định dạng mở rộng cú pháp của Markdown, cho phép chèn mã JSX vào tài liệu Markdown một cách mượt mà. Thông qua MDX, người dùng có thể nhúng các thành phần (React components) vào tài liệu, từ đó mang lại khả năng tương tác và tính động phong phú hơn.

Sử dụng các thành phần#

Dưới đây là một thành phần biểu tượng:

1
import { Icon } from 'astro-icon/components'
2

3
<div class="flex items-center gap-2 my-4">
4
  <Icon name="fa7-solid:rocket" class="text-4xl text-red-500" />
5
  <span>Phóng tên lửa!</span>
6
</div>

Sử dụng JSX#

Bạn cũng có thể viết trực tiếp bằng HTML/JSX:

1
<div className="p-4 bg-blue-100 dark:bg-blue-900 rounded-lg my-4">
2
Đây là một khối div với kiểu dáng tùy chỉnh, sử dụng các lớp Tailwind CSS.
3
</div>

Xuất biến đơn giản#

1
export const year = new Date().getFullYear()
2

3
Năm nay là năm {year}

Năm nay là năm 2026

Để biết thêm thông tin, vui lòng xem Tài liệu MDX