\n\n \n h('h1', { style: { color: 'red' } }, props.children),\n })\" />\n ```\n\n Bạn có thể lấy Markdown dưới dạng chuỗi:\n\n ```vue\n {{ myMarkdownContent.value }}\n {{ String(myMarkdownContent) }}\n {{ myMarkdownContent.toString() }}\n ```\n\n Và bạn có thể truy cập siêu dữ liệu markdown của mình như sau:\n\n ```vue\n \n Svelte render Markdown thành một chuỗi HTML theo mặc định. Sử dụng `{@html}` để render nó.\n\n ```svelte fileName=\"App.svelte\"\n \n\n \n {@html $content.myMarkdownContent}\n \n ```\n\n > Nếu không có `MarkdownProvider`, Intlayer sẽ render markdown bằng trình biên dịch mặc định.\n\n Bạn cũng có thể cung cấp các ghi đè cục bộ cho các node cụ thể bằng phương thức `.use()`:\n\n ```svelte\n {@html $content.myMarkdownContent.use({ ... })}\n ```\n\n Bạn có thể lấy Markdown dưới dạng chuỗi:\n\n ```svelte\n {$content.myMarkdownContent.value}\n {String($content.myMarkdownContent)}\n {$content.myMarkdownContent.toString()}\n ```\n\n Và bạn có thể truy cập siêu dữ liệu markdown của mình như sau:\n\n ```svelte\n {$content.myMarkdownContent.metadata}\n {$content.myMarkdownContent.metadata.title}\n ```\n\n \n \n Preact hỗ trợ các node Markdown trực tiếp trong JSX.\n\n ```tsx fileName=\"App.tsx\"\n import { useIntlayer } from \"preact-intlayer\";\n import { MarkdownProvider } from \"preact-intlayer/markdown\";\n\n const AppContent = () => {\n const { myMarkdownContent } = useIntlayer(\"app\");\n return \n \n Solid hỗ trợ các node Markdown trực tiếp trong JSX.\n\n ```tsx fileName=\"App.tsx\"\n import { useIntlayer } from \"solid-intlayer\";\n import { MarkdownProvider } from \"solid-intlayer/markdown\";\n\n const AppContent = () => {\n const { myMarkdownContent } = useIntlayer(\"app\");\n return \n \n Angular sử dụng chỉ thị `[innerHTML]` để render nội dung Markdown.\n\n ```typescript fileName=\"app.component.ts\"\n import { Component } from \"@angular/core\";\n import { useIntlayer } from \"angular-intlayer\";\n\n @Component({\n selector: \"app-root\",\n template: ``,\n })\n export class AppComponent {\n content = useIntlayer(\"app\");\n }\n ```\n\n > Nếu provider IntlayerMarkdown không được cấu hình, Intlayer sẽ render bằng trình biên dịch mặc định.\n\n Bạn cũng có thể cung cấp các ghi đè cục bộ cho các node cụ thể bằng phương thức `.use()`:\n\n ```typescript\n content().myMarkdownContent.use({\n h1: { class: \"text-3xl font-bold\" },\n })\n ```\n\n Bạn có thể lấy Markdown dưới dạng chuỗi:\n\n ```typescript\n content().myMarkdownContent.value\n String(content().myMarkdownContent)\n content().myMarkdownContent.toString()\n ```\n\n Và bạn có thể truy cập siêu dữ liệu markdown của mình như sau:\n\n ```typescript\n content().myMarkdownContent.metadata\n content().myMarkdownContent.metadata.title\n ```\n\n \n\n\n### 2. Các tiện ích hỗ trợ (Chỉ Chuỗi Markdown)\n\nCác tiện ích này **chỉ render các chuỗi Markdown thô** và độc lập với `useIntlayer`. Hãy sử dụng chúng khi bạn cần render Markdown từ các nguồn khác ngoài từ điển của bạn.\n\n\n \n \n #### Component `\n {\"# Tiêu đề của tôi\"}\n \n ```\n\n #### Hook `useMarkdownRenderer()`\n\n Nhận một hàm render đã được cấu hình trước.\n\n ```tsx\n import { useMarkdownRenderer } from \"react-intlayer/markdown\";\n\n const renderMarkdown = useMarkdownRenderer({\n forceBlock: true,\n components: { h1: (props) => }\n });\n\n return renderMarkdown(\"# Tiêu đề của tôi\");\n ```\n\n #### Tiện ích `renderMarkdown()`\n Tiện ích độc lập để render bên ngoài các component.\n\n ```tsx\n import { renderMarkdown } from \"react-intlayer/markdown\";\n\n const jsx = renderMarkdown(\"# Tiêu đề của tôi\", { forceBlock: true });\n ```\n\n \n \n \n #### Component `\n {\"# Tiêu đề của tôi\"}\n \n ```\n\n #### Hook `useMarkdownRenderer()`\n\n Nhận một hàm render đã được cấu hình trước.\n\n ```tsx\n import { useMarkdownRenderer } from \"next-intlayer/markdown\";\n\n const renderMarkdown = useMarkdownRenderer({\n forceBlock: true,\n components: { h1: (props) => }\n });\n\n return renderMarkdown(\"# Tiêu đề của tôi\");\n ```\n\n #### Tiện ích `renderMarkdown()`\n Tiện ích độc lập để render bên ngoài các component.\n\n ```tsx\n import { renderMarkdown } from \"next-intlayer/markdown\";\n\n const jsx = renderMarkdown(\"# Tiêu đề của tôi\", { forceBlock: true });\n ```\n\n \n \n\n #### Component ` \n \n\n #### Component ` \n \n #### Component `\n {\"# Tiêu đề của tôi\"}\n \n ```\n\n #### Hook `useMarkdownRenderer()`\n\n ```tsx\n import { useMarkdownRenderer } from \"preact-intlayer/markdown\";\n\n const render = useMarkdownRenderer();\n\n return \n \n #### Component `\n {\"# Tiêu đề của tôi\"}\n \n ```\n\n #### Hook `useMarkdownRenderer()`\n\n ```tsx\n import { useMarkdownRenderer } from \"solid-intlayer/markdown\";\n\n const render = useMarkdownRenderer();\n\n return \n \n #### Service `IntlayerMarkdownService`\n Render một chuỗi Markdown sử dụng service.\n\n ```typescript\n import { IntlayerMarkdownService } from \"angular-intlayer/markdown\";\n\n export class MyComponent {\n constructor(private markdownService: IntlayerMarkdownService) {}\n\n renderMarkdown(markdown: string) {\n return this.markdownService.renderMarkdown(markdown);\n }\n }\n ```\n\n \n \n\n## Cấu hình Toàn cục với `MarkdownProvider`\n\n`MarkdownProvider` (hoặc tương đương trong framework) cấu hình pipeline render Markdown cho toàn bộ ứng dụng của bạn. Điều này áp dụng cho cả render `useIntlayer` tự động và các tiện ích hỗ trợ. Các tùy chọn được đặt ở đây là mặc định — `.use()` sẽ ghi đè chúng ở cấp độ node.\n\n\n \n\n ```tsx fileName=\"AppProvider.tsx\"\n import { MarkdownProvider } from \"react-intlayer/markdown\";\n\n export const AppProvider = ({ children }) => (\n ,\n a: ({ href, ...props }) => ,\n MyCustomJSXComponent: (props) => ,\n }}\n >\n {children}\n \n );\n ```\n\n\n > Hỗ trợ MDX — bất kỳ tên component nào được sử dụng bên trong Markdown của bạn (ví dụ: ` {\n // Use dynamic import to reduce the bundle size of your application\n const { renderMarkdown } = await import('react-intlayer/markdown');\n return renderMarkdown(md);\n }}\n >\n {children}\n \n );\n ```\n\n > Việc nhập trình render Markdown của bạn một cách động là một cách tuyệt vời để giảm dung lượng bundle của ứng dụng.\n\n \n \n\n ```tsx fileName=\"AppProvider.tsx\"\n import { MarkdownProvider } from \"next-intlayer/markdown\";\n\n export const AppProvider = ({ children }) => (\n ,\n a: ({ href, ...props }) => ,\n MyCustomJSXComponent: (props) => ,\n }}\n >\n {children}\n \n );\n ```\n\n\n > Hỗ trợ MDX — bất kỳ tên component nào được sử dụng bên trong Markdown của bạn (ví dụ: ` {\n // Use dynamic import to reduce the bundle size of your application\n const { renderMarkdown } = await import('next-intlayer/markdown');\n return renderMarkdown(md);\n }}\n >\n {children}\n \n );\n ```\n\n > Việc nhập trình render Markdown của bạn một cách động là một cách tuyệt vời để giảm dung lượng bundle của ứng dụng.\n\n \n \n\n ```typescript fileName=\"main.ts\"\n import { createApp } from \"vue\";\n import { intlayer } from \"vue-intlayer\";\n import { intlayerMarkdown } from \"vue-intlayer/markdown\";\n import App from \"./App.vue\";\n\n const app = createApp(App);\n\n app.use(intlayer);\n app.use(intlayerMarkdown, {\n components: {\n h1: (props) =>\n h('h1', { style: { color: 'orange' }, ...props }, props.children),\n ComponentDemo: () => h('div', { style: { background: 'grey' } }, 'DEMO'),\n bold: (props) => h('strong', props),\n code: (props) => h('code', props),\n },\n });\n\n app.mount(\"#app\");\n ```\n\n\n > Hỗ trợ MDX — bất kỳ tên component nào được sử dụng bên trong Markdown của bạn (ví dụ: ` \n \n\n ```svelte fileName=\"App.svelte\"\n \n\n \n {\n const { renderMarkdown } = await import('svelte-intlayer/markdown');\n return renderMarkdown(md);\n }}\n >\n \n \n\n ```tsx fileName=\"AppProvider.tsx\"\n import { MarkdownProvider } from \"preact-intlayer/markdown\";\n\n export const AppProvider = ({ children }) => (\n {\n const { renderMarkdown } = await import('preact-intlayer/markdown');\n return renderMarkdown(md);\n }}\n >\n {children}\n \n );\n ```\n\n > Việc nhập trình render Markdown của bạn một cách động là một cách tuyệt vời để giảm dung lượng bundle của ứng dụng.\n\n \n \n\n ```tsx fileName=\"AppProvider.tsx\"\n import { MarkdownProvider } from \"solid-intlayer/markdown\";\n\n export const AppProvider = (props) => (\n {\n const { renderMarkdown } = await import('solid-intlayer/markdown');\n return renderMarkdown(md);\n }}\n >\n {props.children}\n \n );\n ```\n\n > Việc nhập trình render Markdown của bạn một cách động là một cách tuyệt vời để giảm dung lượng bundle của ứng dụng.\n\n \n \n\n ```typescript fileName=\"app.module.ts\"\n import { NgModule } from '@angular/core';\n import { IntlayerMarkdownModule } from 'angular-intlayer/markdown';\n\n @NgModule({\n imports: [\n IntlayerMarkdownModule.forRoot({\n renderMarkdown: async (md) => {\n const { renderMarkdown } = await import('angular-intlayer/markdown');\n return renderMarkdown(md);\n }\n })\n ]\n })\n export class AppModule {}\n ```\n\n > Việc nhập trình render Markdown của bạn một cách động là một cách tuyệt vời để giảm dung lượng bundle của ứng dụng.\n\n \n \n\n## Suspense\n\nTrình kết xuất Markdown của Intlayer được tải động. Mặc dù được tối ưu hóa, đoạn phân tích cú pháp cơ bản là khoảng 55kb. Tải điều này đồng bộ sẽ trì hoãn kết xuất trang ban đầu và làm suy giảm First Contentful Paint (FCP).\n\nĐể ngăn chặn việc chặn giao diện người dùng, Intlayer tích hợp với Suspense API của React. Nó tìm nạp trình phân tích cú pháp trong nền và ném Promise trong khi tải xuống.\n\nBọc bất kỳ thành phần nào kết xuất Intlayer Markdown trong ranh giới ``. Điều này hiển thị trạng thái dự phòng được bản địa hóa trong khi đoạn phim tải xuống, cho phép phần còn lại của DOM của bạn kết xuất ngay lập tức.\n\nCảnh báo: Nếu bạn không cung cấp ranh giới ``, React sẽ đình chỉ ở cấp gốc hoặc chặn toàn bộ cây thành phần khỏi kết xuất cho đến khi đoạn 55kb được tải hoàn toàn.\n\n\n \n\nTrong Next.js App Router, bạn có thể sử dụng React `Suspense` cho các thành phần máy khách hoặc tệp `loading.tsx` cho các thành phần máy chủ.\n\n**Thành phần máy khách:**\n\n```tsx fileName=\"components/MyComponent.tsx\"\n\"use client\";\nimport { useIntlayer } from \"next-intlayer\";\nimport { Suspense } from \"react\";\n\nconst MyComponent = () => {\n const markdownContent = useIntlayer(\"my-markdown\");\n\n return (\n Loading...
}>{markdownContent}\n );\n};\n```\n\n**Thành phần máy chủ với `loading.tsx`:**\n\n```tsx fileName=\"app/loading.tsx\"\nexport default function Loading() {\n return {myMarkdownContent}
;\n };\n\n const App = () => (\n {children}
,\n MyButton: (props) => , // Component MDX\n }}\n >\n{children}
,\n })}\n ```\n\n Bạn có thể lấy Markdown dưới dạng chuỗi:\n\n ```tsx\n {myMarkdownContent.value}\n {String(myMarkdownContent)}\n {myMarkdownContent.toString()}\n ```\n\n Và bạn có thể truy cập siêu dữ liệu markdown của mình như sau:\n\n ```tsx\n {myMarkdownContent.metadata}\n {myMarkdownContent.metadata.title}\n ```\n\n{myMarkdownContent}
;\n };\n\n const App = () => (\n {props.children}
,\n MyButton: (props) => , // Component MDX\n }}\n >\n{props.children}
,\n })}\n ```\n\n Bạn có thể lấy Markdown dưới dạng chuỗi:\n\n ```tsx\n {myMarkdownContent.value}\n {String(myMarkdownContent)}\n {myMarkdownContent.toString()}\n ```\n\n Và bạn có thể truy cập siêu dữ liệu markdown của mình như sau:\n\n ```tsx\n {myMarkdownContent.metadata}\n {myMarkdownContent.metadata.title}\n ```\n\n{render(\"# Tiêu đề của tôi\")}
;\n ```\n\n #### Tiện ích `renderMarkdown()`\n\n ```tsx\n import { renderMarkdown } from \"preact-intlayer/markdown\";\n\n return {renderMarkdown(\"# Tiêu đề của tôi\")}
;\n ```\n\n {render(\"# Tiêu đề của tôi\")}
;\n ```\n\n #### Tiện ích `renderMarkdown()`\n\n ```tsx\n import { renderMarkdown } from \"solid-intlayer/markdown\";\n\n return {renderMarkdown(\"# Tiêu đề của tôi\")}
;\n ```\n\n {children}
,\n }}\n >\n {children}\n \n );\n ```\n\n\n > Hỗ trợ MDX — bất kỳ tên component nào được sử dụng bên trong Markdown của bạn (ví dụ: `{props.children}
,\n }}\n >\n {props.children}\n \n );\n ```\n\n\n > Hỗ trợ MDX — bất kỳ tên component nào được sử dụng bên trong Markdown của bạn (ví dụ: `Loading...
;\n}\n```\n\n```tsx fileName=\"app/page.tsx\"\nimport { useIntlayer } from \"next-intlayer/server\";\n\nconst MyPage = () => {\n const markdownContent = useIntlayer(\"my-markdown\");\n return {markdownContent}
;\n};\n\nexport default MyPage;\n```\n\n \n\n