MDX là gì?
MDX cho phép bạn viết JSX trực tiếp trong Markdown. Điều này có nghĩa bạn có thể sử dụng React components trong nội dung blog!
Code Highlighting với Shiki
Shiki mang đến syntax highlighting đẹp như VS Code. Bạn có thể:
Highlight dòng cụ thể
Dùng comment // [!code highlight] để highlight:
function greet(name: string) {
console.log(`Hello, ${name}!`); // [!code highlight]
return name;
}
Focus vào code quan trọng
Dùng // [!code focus] để làm nổi bật phần quan trọng:
const config = {
database: process.env.DATABASE_URL, // [!code focus]
port: 3000,
debug: false,
};
Highlight nhiều dòng
async function fetchData() {
const response = await fetch('/api/data'); // [!code highlight:3]
const data = await response.json();
return data;
}
Custom Components
Đây là một Alert component - bạn có thể dùng nó để hiển thị thông tin quan trọng!
Cảnh báo: Đây là warning alert để lưu ý người đọc.
Thành công! Bạn đã hoàn thành bước này.
Step-by-Step Tutorial
Cài đặt dependencies
Đầu tiên, cài đặt các packages cần thiết:
npm install @next/mdx @mdx-js/loader shiki
Cấu hình Next.js
Thêm MDX vào next.config.mjs để Next.js hiểu file .mdx.
Tạo mdx-components.tsx
Định nghĩa các custom components trong file mdx-components.tsx.
Embed Video
Tables
| Feature | Markdown | MDX |
|---|---|---|
| Text formatting | ✅ | ✅ |
| Code blocks | ✅ | ✅ |
| Images | ✅ | ✅ |
| React components | ❌ | ✅ |
| Interactive elements | ❌ | ✅ |
Links
- Internal link - Dùng Next.js Link component
- External link↗ - Mở tab mới với icon ↗
Kết luận
MDX là công cụ mạnh mẽ để tạo content động và interactive. Với Shiki, code của bạn sẽ được highlight đẹp như trong VS Code!
Bài viết hữu ích?
Chia sẻ để nhiều người biết đến!
>_ LLM-Friendly Copy
Copy as Markdown to use with ChatGPT, Claude, or other AI tools
