Xây dựng hệ thống Blog hiện đại với Markdown, MDX và tư duy sản phẩm

Chia sẻ

Bạn thấy thế nào?

Đăng nhập để phản hồi.

Tác giả

Frontend Developer · VinSmart Future

Là một Frontend Developer với hơn 5 năm kinh nghiệm, tôi đã tham gia vào nhiều dự án đa dạng và thách thức. Tôi có kiến thức sâu rộng về các công nghệ như React, Vue, và TypeScript, cũng như các công cụ phát triển hiện đại như Webpack, Vite, và các thư viện UI như Material UI, Ant Design, và Tailwind CSS. Tôi luôn tìm kiếm cơ hội để học hỏi và áp dụng các kiến thức mới nhất trong lĩnh vực phát triển web. Ngoài ra, tôi cũng có kinh nghiệm trong việc quản lý dự án và làm việc trong môi trường Agile, giúp đảm bảo các dự án được hoàn thành đúng tiến độ và chất lượng cao. Với sự nhiệt huyết và đam mê của mình, tôi luôn cố gắng để mang lại những giá trị tốt nhất cho khách hàng và đồng nghiệp. Tôi tin rằng sự kết hợp giữa kỹ năng chuyên môn và tinh thần làm việc chuyên nghiệp sẽ giúp tôi đóng góp tích cực vào sự thành công của dự án và tổ chức.

Tiêu chí	Markdown	MDX
Dễ học	✅ Rất dễ	⚠️ Cần biết React
Tính động	❌ Không	✅ Có
Khả năng mở rộng	Thấp	Rất cao
Phù hợp blog cá nhân	✅	✅
Phù hợp product docs	⚠️	✅

Xây dựng hệ thống Blog hiện đại với Markdown, MDX và tư duy sản phẩm 123

Tổng quan về Markdown và MDX

Markdown là gì?

MDX là gì và vì sao nó mạnh hơn Markdown?

Demo: 3 cách nhúng HTML Interactive vào Blog

1. New Tab Mode (Mặc định - Nhẹ nhất)

Demo New Tab - Simple Button Counter

2. Sandpack Mode (Preview trực tiếp)

3. Embed Mode (CodeSandbox Full Features)

So sánh Markdown và MDX

Thiết kế blog dưới góc nhìn Product Thinking

Blog không chỉ là nơi viết bài

Các câu hỏi product cần đặt ra

1. Ai là người đọc?

2. Họ đọc để làm gì?

3. Hành động tiếp theo là gì?

Cấu trúc một bài blog chất lượng

H1 – Tiêu đề chính

H2 – Các ý lớn

H3 – H4 – H5 – H6 để làm gì?

H3: Chia nhỏ logic

H4: Đi sâu chi tiết

H5: Edge case, ghi chú kỹ thuật

H6: Rất hiếm dùng – nhưng hữu ích khi test layout

Ví dụ về các block nội dung thường dùng

Blockquote

Danh sách không thứ tự

Danh sách có thứ tự

Inline code

Code block (đa dòng)

Ví dụ TypeScript cơ bản

Twoslash - TypeScript Type Annotations

Ví dụ 1: Type Hover Queries với ^?

Word Highlighting với Shiki Transformers

Ví dụ 1: Highlighting Lines với [!code highlight]

SEO trong blog Markdown / MDX

Những yếu tố không được bỏ qua

Tags và Metadata

Những sai lầm thường gặp khi làm blog kỹ thuật

Viết cho bản thân, không phải cho người đọc

Bỏ qua trải nghiệm đọc

Kết luận

Components MDX premium — minh hoạ trực tiếp

FluidImage — ảnh full-bleed editorial

Tài liệu tham khảo

Ví dụ TypeScript với type annotations (test Twoslash)

Ví dụ JavaScript với async/await

Code block với filename

Code block dài để test word wrap

Code block với line highlighting

Ví dụ phức tạp với TypeScript generics (test Twoslash)

Thêm ví dụ line highlighting với nhiều dòng

Ví dụ với word highlighting (highlight từng từ cụ thể)

Ví dụ 2: Type Inference với Generics

Ví dụ 3: Complex Type Inference

Ví dụ 4: Union Types và Type Guards

Ví dụ 5: Utility Types

Ví dụ 6: Conditional Types

Ví dụ 7: Mapped Types

Ví dụ 2: Code Diff với [!code ++] và [!code —]

Ví dụ 3: Focus Mode với [!code focus]

Ví dụ 4: Kết hợp nhiều transformers

Ví dụ 5: Kết hợp Twoslash và Line Highlighting

CodeGroup — nhiều ngôn ngữ song song

Premium — section gate cho subscriber

Link — internal navigation locale-aware