\n\n \n ```\n\n Настройте глобально через плагин `intlayerMarkdown` (поддерживает пользовательские компоненты MDX):\n\n ```ts fileName=\"main.ts\"\n import { intlayerMarkdown } from \"vue-intlayer/markdown\";\n\n app.use(intlayerMarkdown, {\n components: {\n h1: (props) => h('h1', { style: { color: 'green' } }, props.children),\n MyButton: (props) => h('button', props), // Компонент MDX\n },\n });\n ```\n\n > Если плагин `intlayerMarkdown` не установлен, Intlayer будет выполнять рендеринг с использованием компилятора по умолчанию.\n\n Вы также можете предоставить локальные переопределения для конкретных узлов, используя метод `.use()`:\n\n ```vue\n h('h1', { style: { color: 'red' } }, props.children),\n })\" />\n ```\n\n Вы можете получить Markdown в виде строки:\n\n ```vue\n {{ myMarkdownContent.value }}\n {{ String(myMarkdownContent) }}\n {{ myMarkdownContent.toString() }}\n ```\n\n И вы можете получить доступ к метаданным вашего markdown, например:\n\n ```vue\n \n \n ```\n\n \n \n Svelte по умолчанию рендерит Markdown как HTML-строку. Используйте `{@html}` для его рендеринга.\n\n ```svelte fileName=\"App.svelte\"\n \n\n \n {@html $content.myMarkdownContent}\n \n ```\n\n > Если `MarkdownProvider` отсутствует, Intlayer будет рендерить markdown с использованием компилятора по умолчанию.\n\n Вы также можете предоставить локальные переопределения для конкретных узлов, используя метод `.use()`:\n\n ```svelte\n {@html $content.myMarkdownContent.use({ ... })}\n ```\n\n Вы можете получить Markdown в виде строки:\n\n ```svelte\n {$content.myMarkdownContent.value}\n {String($content.myMarkdownContent)}\n {$content.myMarkdownContent.toString()}\n ```\n\n И вы можете получить доступ к метаданным вашего markdown, например:\n\n ```svelte\n {$content.myMarkdownContent.metadata}\n {$content.myMarkdownContent.metadata.title}\n ```\n\n \n \n Preact поддерживает узлы Markdown непосредственно в 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

{myMarkdownContent}

;\n };\n\n const App = () => (\n

{children}

,\n MyButton: (props) => , // Компонент MDX\n }}\n >\n \n \n );\n ```\n\n > Если `MarkdownProvider` отсутствует, intlayer будет отрисовывать markdown, используя стандартный парсер Markdown в JSX.\n\n Вы также можете предоставить локальные переопределения для конкретных узлов, используя метод `.use()`:\n\n ```tsx\n {myMarkdownContent.use({\n h1: ({ children }) =>

{children}

,\n })}\n ```\n\n Вы можете получить Markdown в виде строки:\n\n ```tsx\n {myMarkdownContent.value}\n {String(myMarkdownContent)}\n {myMarkdownContent.toString()}\n ```\n\n И вы можете получить доступ к метаданным вашего markdown, например:\n\n ```tsx\n {myMarkdownContent.metadata}\n {myMarkdownContent.metadata.title}\n ```\n\n \n \n Solid поддерживает узлы Markdown непосредственно в 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

{myMarkdownContent}

;\n };\n\n const App = () => (\n

{props.children}

,\n MyButton: (props) => , // Компонент MDX\n }}\n >\n \n \n );\n ```\n\n > Если `MarkdownProvider` отсутствует, intlayer будет отрисовывать markdown, используя стандартный парсер Markdown в JSX.\n\n Вы также можете предоставить локальные переопределения для конкретных узлов, используя метод `.use()`:\n\n ```tsx\n {myMarkdownContent.use({\n h1: (props) =>

{props.children}

,\n })}\n ```\n\n Вы можете получить Markdown в виде строки:\n\n ```tsx\n {myMarkdownContent.value}\n {String(myMarkdownContent)}\n {myMarkdownContent.toString()}\n ```\n\n И вы можете получить доступ к метаданным вашего markdown, например:\n\n ```tsx\n {myMarkdownContent.metadata}\n {myMarkdownContent.metadata.title}\n ```\n\n \n \n Angular использует директиву `[innerHTML]` для рендеринга контента 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 > Если провайдер IntlayerMarkdown не настроен, Intlayer будет выполнять рендеринг с использованием компилятора по умолчанию.\n\n Вы также можете предоставить локальные переопределения для конкретных узлов, используя метод `.use()`:\n\n ```typescript\n content().myMarkdownContent.use({\n h1: { class: \"text-3xl font-bold\" },\n })\n ```\n\n Вы можете получить Markdown в виде строки:\n\n ```typescript\n content().myMarkdownContent.value\n String(content().myMarkdownContent)\n content().myMarkdownContent.toString()\n ```\n\n И вы можете получить доступ к метаданным вашего markdown, например:\n\n ```typescript\n content().myMarkdownContent.metadata\n content().myMarkdownContent.metadata.title\n ```\n\n \n\n\n## Suspense\n\nРендерер Markdown в Intlayer загружается динамически. Несмотря на оптимизацию, базовый фрагмент парсера составляет около 55 КБ. Его синхронная загрузка задерживает первоначальный рендеринг страницы и ухудшает First Contentful Paint (FCP).\n\nЧтобы предотвратить блокировку пользовательского интерфейса, Intlayer интегрируется с API React Suspense. Он загружает парсер в фоновом режиме и выдает Promise во время загрузки.\n\nОберните любой компонент, рендерящий Intlayer Markdown, в границу ``. Это отобразит локализованное резервное состояние во время загрузки фрагмента, позволяя остальной части вашего DOM рендериться немедленно.\n\nПредупреждение: Если вы не предоставите границу ``, React приостановит работу на корневом уровне или заблокирует рендеринг всего дерева компонентов до тех пор, пока фрагмент размером 55 КБ не будет полностью загружен.\n\n\n \n\nВ маршрутизаторе Next.js App Router вы можете использовать либо React `Suspense` для клиентских компонентов, либо файл `loading.tsx` для серверных компонентов.\n\n**Клиентский компонент:**\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...