Ví dụ 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 văn bản thuần, sau đó chuyển đổi thành HTML đã được định dạng. Nhờ cú pháp đơn giản và dễ dùng, nó rất phổ biến khi viết tài liệu và blog.
• MDX là một định dạng mở rộng của Markdown, cho phép chèn trực tiếp mã JSX vào trong tài liệu Markdown. Với MDX, bạn có thể nhúng các component React vào bài viết để tạo tính tương tác và nội dung động phong phú hơn.

Sử dụng component#

Đây là một component icon:

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 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 được tùy chỉnh kiểu dáng, sử dụng các class của Tailwind CSS.
3
</div>

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

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

3
Năm nay là {year}.

Năm nay là 2026.

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