{
  "url": "https://unifast.dev/vi/docs/guides/mdx/",
  "locale": "vi",
  "title": "Sử dụng MDX",
  "description": "Biên dịch MDX với unifast để sử dụng biểu thức JSX và câu lệnh import bên trong Markdown, render bằng React hoặc các JSX runtime khác.",
  "section": "guides",
  "body": "MDX cho phép bạn sử dụng biểu thức JSX và câu lệnh import ngay trong Markdown. unifast biên dịch MDX thành các module JavaScript có thể render bằng React hoặc các JSX runtime khác.\n\n### Cài đặt\n\n### Cách dùng cơ bản\n\n```ts\n\nconst source = `\n# Hello\n\nexport const meta = { title: \"My Page\" };\n`;\n\nconst result = compile(source, { inputKind: \"mdx\" });\n// result.output is a JavaScript module string\n```\n\n### Cách MDX hoạt động\n\nMDX mở rộng Markdown với hai khả năng:\n\n1. **Biểu thức JSX** - Sử dụng component xen kẽ trong nội dung của bạn.\n2. **Import/export ESM** - Import component và export metadata.\n\nTrình biên dịch xử lý MDX qua các bước sau:\n\n```\nMDX source\n  → Parse (Markdown + JSX + ESM)\n  → MdAst with JSX/ESM nodes\n  → Lower to HAst\n  → Emit as JavaScript module\n```\n\nKết quả đầu ra là một module JavaScript với một hàm default export nhận prop `components` để inject component.\n\n### Sử dụng với React\n\n```ts\n\nconst source = `# Hello\\n\\nThis is **MDX**.`;\n\nconst result = compile(source, { inputKind: \"mdx\" });\nconst Component = compileToReact(result);\n\n// Render in your React app\n\n```\n\n### Frontmatter trong MDX\n\nKết hợp MDX với plugin frontmatter để trích xuất metadata:\n\n```ts\n\nconst source = `---\ntitle: My Article\nauthor: Jane\n---\n\n# {frontmatter.title}\n\nWritten by {frontmatter.author}.\n`;\n\nconst result = compile(source, {\n  inputKind: \"mdx\",\n  plugins: [frontmatter()],\n});\n\nconsole.log(result.frontmatter);\n// { title: \"My Article\", author: \"Jane\" }\n```\n\n### Xem thêm\n\n- [compile()](/docs/packages/node/compile) - Tài liệu tham chiếu API đầy đủ\n- [Tích hợp React](/docs/guides/react) - Render MDX bằng React",
  "alternates": [
    {
      "locale": "en",
      "url": "https://unifast.dev/docs/guides/mdx/",
      "api": "https://unifast.dev//api/docs/guides/mdx.json"
    },
    {
      "locale": "ja",
      "url": "https://unifast.dev/ja/docs/guides/mdx/",
      "api": "https://unifast.dev//api/ja/docs/guides/mdx.json"
    },
    {
      "locale": "zh-CN",
      "url": "https://unifast.dev/zh-CN/docs/guides/mdx/",
      "api": "https://unifast.dev//api/zh-CN/docs/guides/mdx.json"
    },
    {
      "locale": "zh-TW",
      "url": "https://unifast.dev/zh-TW/docs/guides/mdx/",
      "api": "https://unifast.dev//api/zh-TW/docs/guides/mdx.json"
    },
    {
      "locale": "ko",
      "url": "https://unifast.dev/ko/docs/guides/mdx/",
      "api": "https://unifast.dev//api/ko/docs/guides/mdx.json"
    },
    {
      "locale": "fr",
      "url": "https://unifast.dev/fr/docs/guides/mdx/",
      "api": "https://unifast.dev//api/fr/docs/guides/mdx.json"
    },
    {
      "locale": "it",
      "url": "https://unifast.dev/it/docs/guides/mdx/",
      "api": "https://unifast.dev//api/it/docs/guides/mdx.json"
    },
    {
      "locale": "es",
      "url": "https://unifast.dev/es/docs/guides/mdx/",
      "api": "https://unifast.dev//api/es/docs/guides/mdx.json"
    },
    {
      "locale": "pt-BR",
      "url": "https://unifast.dev/pt-BR/docs/guides/mdx/",
      "api": "https://unifast.dev//api/pt-BR/docs/guides/mdx.json"
    },
    {
      "locale": "de",
      "url": "https://unifast.dev/de/docs/guides/mdx/",
      "api": "https://unifast.dev//api/de/docs/guides/mdx.json"
    },
    {
      "locale": "ru",
      "url": "https://unifast.dev/ru/docs/guides/mdx/",
      "api": "https://unifast.dev//api/ru/docs/guides/mdx.json"
    },
    {
      "locale": "hi",
      "url": "https://unifast.dev/hi/docs/guides/mdx/",
      "api": "https://unifast.dev//api/hi/docs/guides/mdx.json"
    },
    {
      "locale": "id",
      "url": "https://unifast.dev/id/docs/guides/mdx/",
      "api": "https://unifast.dev//api/id/docs/guides/mdx.json"
    },
    {
      "locale": "tr",
      "url": "https://unifast.dev/tr/docs/guides/mdx/",
      "api": "https://unifast.dev//api/tr/docs/guides/mdx.json"
    },
    {
      "locale": "vi",
      "url": "https://unifast.dev/vi/docs/guides/mdx/",
      "api": "https://unifast.dev//api/vi/docs/guides/mdx.json"
    }
  ]
}