@intlayer/docs 8.10.0-canary.0 → 8.10.0-canary.1

package/docs/ru/dictionary/markdown.md

@@ -2,7 +2,7 @@
 createdAt: 2025-02-07
 updatedAt: 2026-05-19
 title: Markdown
-description: Узнайте, как объявлять и использовать Markdown-контент на вашем многоязычном сайте с помощью Intlayer. Следуйте шагам этой онлайн-документации, чтобы без проблем интегрировать Markdown в ваш проект.
+description: Узнайте, как объявлять и использовать Markdown-контент на вашем многоязычном сайте с помощью Intlayer. Следуйте инструкциям в этой документации, чтобы легко интегрировать Markdown в ваш проект.
 keywords:
   - Markdown
   - Интернационализация
@@ -22,46 +22,46 @@ history:
     changes: "Добавлена поддержка файлов `.content.md`"
   - version: 8.5.0
     date: 2026-03-24
-    changes: "Add `intlayerMarkdown` plugin object; use `app.use(intlayerMarkdown)` instead of `app.use(installIntlayerMarkdown)`"
+    changes: "Добавлен объект плагина `intlayerMarkdown`; используйте `app.use(intlayerMarkdown)` вместо `app.use(installIntlayerMarkdown)`"
   - version: 8.5.0
     date: 2026-03-24
-    changes: "Перенос импортов из {{framework}}-intlayer в {{framework}}-intlayer/markdown"
+    changes: "перенос импорта из `{{framework}}-intlayer` в `{{framework}}-intlayer/markdown`"
   - version: 8.0.0
     date: 2026-01-22
-    changes: "Добавлены MarkdownRenderer / useMarkdownRenderer / renderMarkdown и опция forceInline"
+    changes: "Добавление утилит MarkdownRenderer / useMarkdownRenderer / renderMarkdown и опции forceInline"
   - version: 8.0.0
     date: 2026-01-18
-    changes: "Автоматическое оформление содержимого markdown, поддержка MDX и SSR"
+    changes: "Автоматическое декорирование Markdown-контента, поддержка MDX и SSR"
   - version: 5.5.10
     date: 2025-06-29
     changes: "Инициализация истории"
 ---
 
-# Markdown / Содержимое с богатым текстом
+# Markdown / Форматированный текст
 
-Intlayer поддерживает содержимое с богатым текстом, определенное с использованием синтаксиса Markdown. Это позволяет легко писать и поддерживать контент с богатым форматированием, такой как блоги, статьи и многое другое.
+Intlayer поддерживает форматированный текстовый контент, определенный с использованием синтаксиса Markdown. Это позволяет легко писать и поддерживать контент со сложным форматированием, такой как блоги, статьи и многое другое.
 
-## Объявление контента Markdown
+## Объявление Markdown-контента
 
-Вы можете объявлять контент Markdown с помощью функции `md` или просто как строку (если она содержит синтаксис Markdown).
+Вы можете объявить Markdown-контент с помощью функции `md` или просто как строку (если она содержит синтаксис Markdown).
 
 <Tabs>
   <Tab label=".content.md" value=".content.md">
-    Начиная с версии `8.10.0`, вы можете объявлять контент Markdown непосредственно в файлах `.content.md`. Intlayer автоматически обнаружит и распарсит контент Markdown.
+    Начиная с версии `8.10.0`, вы можете объявлять Markdown-контент непосредственно в файлах `.content.md`. Intlayer автоматически обнаружит и проанализирует Markdown-контент.
 
-    ```md fileName="markdown-file.ru.content.md"
+    ```md fileName="markdown-file.en.content.md"
     ---
     key: my-markdown-content
     description: Мой контент
-    locale: ru
+    locale: en
     ---
 
     # Мой контент
 
-    Вот пример контента markdown
+    Вот пример Markdown-контента
     ```
 
-    Поле `locale` в frontmatter определяет локаль контента. Это поле необязательно. Если оно не указано, Intlayer будет использовать локаль по умолчанию, которая также используется в качестве резервной (fallback) локали, если для конкретной локали перевод отсутствует.
+    Поле `locale` в front-matter определяет локаль контента. Оно необязательно. Если оно не указано, Intlayer будет использовать локаль по умолчанию, которая также используется в качестве резервной локали (fallback), если перевод для конкретной локали недоступен.
 
     Пример структуры файлов:
 
@@ -70,16 +70,17 @@ Intlayer поддерживает содержимое с богатым тек
     ├── en/
     │   └── markdown-file.en.content.md
     ├── fr/
+
     │   └── markdown-file.fr.content.md
     └── es/
         └── markdown-file.es.content.md
     ```
 
-    Вы можете добавить в front-matter любые свойства, определенные в [Определении словаря (Dictionary definition)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/dictionary/content_file.md)
+    Вы можете добавить в front-matter любые свойства, определенные в [определении словаря](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/dictionary/content_file.md)
 
   </Tab>
-  <Tab label="Ручная обертка" value="manual-wrapping">
-    Используйте функцию `md`, чтобы явно объявить контент Markdown. Это полезно, если вы хотите гарантировать, что строка обрабатывается как Markdown, даже если она не содержит явного синтаксиса.
+  <Tab label="Ручное оборачивание" value="manual-wrapping">
+    Используйте функцию `md` для явного объявления Markdown-контента. Это полезно, если вы хотите гарантировать, что строка будет обрабатываться как Markdown, даже если она не содержит явного синтаксиса.
 
     ```typescript fileName="markdownDictionary.content.ts"
     import { md, type Dictionary } from "intlayer";
@@ -87,7 +88,7 @@ Intlayer поддерживает содержимое с богатым тек
     const markdownDictionary = {
       key: "app",
       content: {
-        myMarkdownContent: md("## Мой заголовок \n\nLorem Ipsum"),
+        myMarkdownContent: md("## My title \n\nLorem Ipsum"),
       },
     } satisfies Dictionary;
 
@@ -96,21 +97,22 @@ Intlayer поддерживает содержимое с богатым тек
 
   </Tab>
   <Tab label="Автоматическое обнаружение" value="automatic-detection">
-    Если строка содержит распространенные индикаторы Markdown (такие как заголовки, списки, ссылки и т. д.), Intlayer автоматически преобразует ее.
+    Если строка содержит общие признаки Markdown (такие как заголовки, списки, ссылки и т. д.), Intlayer автоматически преобразует ее.
 
     ```typescript fileName="markdownDictionary.content.ts"
     export default {
       key: "app",
-      contentAutoTransformation: true, // Включить автоматическое обнаружение контента Markdown - Можно установить глобально в intlayer.config.ts
+      contentAutoTransformation: true, // Включить автоматическое обнаружение Markdown контента — можно установить глобально в intlayer.config.ts
       content: {
-        myMarkdownContent: "## Мой заголовок \n\nLorem Ipsum",
+        myMarkdownContent: "## My title \n\nLorem Ipsum",
       },
     };
     ```
 
   </Tab>
+
   <Tab label="Внешние файлы" value="external-files">
-    Импортируйте файлы `.md` напрямую с помощью функции `file`.
+    Импортируйте файлы `.md` напрямую, используя функцию `file`.
 
     ```typescript fileName="markdownDictionary.content.ts"
     import { md, file, t } from "intlayer";
@@ -119,9 +121,9 @@ Intlayer поддерживает содержимое с богатым тек
       key: "app",
       content: {
         content: t({
+          ru: md(file("./myMarkdown.ru.md")),
           en: md(file("./myMarkdown.en.md")),
           fr: md(file("./myMarkdown.fr.md")),
-          ru: md(file("./myMarkdown.ru.md")),
         }),
       },
     };
@@ -134,536 +136,99 @@ Intlayer поддерживает содержимое с богатым тек
 
 ## Рендеринг Markdown
 
-Рендеринг может осуществляться автоматически системой контента Intlayer или вручную с использованием специализированных инструментов.
+Intlayer предоставляет два независимых способа рендеринга Markdown:
+
+1. **Через `useIntlayer`**
+   — Intlayer автоматически преобразует узел `md` в нативный вывод фреймворка (JSX, VNode, HTML-строка).
+   - Frontmatter парсится и предоставляется как `.metadata`. Вы можете переопределить рендеринг на двух уровнях — глобально с помощью `MarkdownProvider` (или эквивалента для вашего фреймворка) и локально для каждого узла с помощью `.use()`. Оба метода можно комбинировать; `.use()` имеет приоритет над `MarkdownProvider`, который, в свою очередь, имеет приоритет над поведением по умолчанию.
 
-### 1. Автоматический рендеринг (с использованием `useIntlayer`)
+2. **Вспомогательные утилиты** — `<MarkdownRenderer />`, `useMarkdownRenderer()` и `renderMarkdown()` являются автономными инструментами, которые принимают **только необработанные строки Markdown (raw strings)**. Они не зависят от `useIntlayer` и не работают с декорированными узлами, которые он возвращает.
 
-Когда вы получаете контент через `useIntlayer`, узлы Markdown уже подготовлены для рендеринга.
+Рендеринг Markdown поддерживает **MDX** — используйте любой JSX компонент или компонент фреймворка по имени прямо в вашем Markdown.
+
+### 1. Автоматический рендеринг (через `useIntlayer`)
 
 <Tabs group="framework">
   <Tab label="React / Next.js" value="react">
-    Узлы Markdown можно рендерить напрямую как JSX.
+    Markdown-узлы могут быть отрисованы напрямую как JSX.
 
     ```tsx fileName="App.tsx"
     import { useIntlayer } from "react-intlayer";
+    import { MarkdownProvider } from "react-intlayer/markdown";
 
     const AppContent = () => {
       const { myMarkdownContent } = useIntlayer("app");
-      return <div>{myMarkdownContent}</div>;
-    };
-    ```
-
-    Вы также можете предоставить локальные переопределения для конкретных узлов, используя метод `.use()`:
-
-    ```tsx
-    {myMarkdownContent.use({
-      h1: ({ children }) => <h1 className="text-3xl font-bold">{children}</h1>,
-    })}
-    ```
-
-  </Tab>
-  <Tab label="Vue" value="vue">
-    Во Vue контент Markdown можно рендерить с помощью встроенного компонента `component` или напрямую как узел.
-
-    ```vue fileName="App.vue"
-    <script setup>
-    import { useIntlayer } from "vue-intlayer";
-    const { myMarkdownContent } = useIntlayer("app");
-    </script>
-
-    <template>
-      <component :is="myMarkdownContent" />
-    </template>
-    ```
-
-  </Tab>
-  <Tab label="Svelte" value="svelte">
-    Svelte рендерит Markdown как HTML-строку по умолчанию. Используйте `{@html}`, чтобы отобразить его.
-
-    ```svelte
-    <script lang="ts">
-    import { useIntlayer } from "svelte-intlayer";
-    const content = useIntlayer("app");
-    </script>
-
-    {@html $content.myMarkdownContent}
-    ```
-
-  </Tab>
-  <Tab label="Preact" value="preact">
-    Preact поддерживает узлы Markdown непосредственно в JSX.
-
-    ```tsx fileName="App.tsx"
-    import { useIntlayer } from "preact-intlayer";
-
-    const AppContent = () => {
-      const { myMarkdownContent } = useIntlayer("app");
-      return <div>{myMarkdownContent}</div>;
-    };
-    ```
-
-  </Tab>
-  <Tab label="Solid" value="solid">
-    Solid поддерживает узлы Markdown непосредственно в JSX.
 
-    ```tsx fileName="App.tsx"
-    import { useIntlayer } from "solid-intlayer";
-
-    const AppContent = () => {
-      const { myMarkdownContent } = useIntlayer("app");
       return <div>{myMarkdownContent}</div>;
     };
-    ```
-
-  </Tab>
-  <Tab label="Angular" value="angular">
-    В Angular используется директива `[innerHTML]` для рендеринга контента Markdown.
-
-    ```typescript fileName="app.component.ts"
-    import { Component } from "@angular/core";
-    import { useIntlayer } from "angular-intlayer";
-
-    @Component({
-      selector: "app-root",
-      template: `<div [innerHTML]="content().myMarkdownContent"></div>`,
-    })
-    export class AppComponent {
-      content = useIntlayer("app");
-    }
-    ```
-
-    Вы также можете предоставить локальные переопределения для конкретных узлов, используя метод `.use()`:
 
-    ```typescript
-    content().myMarkdownContent.use({
-      h1: { class: "text-3xl font-bold" },
-    })
+    const App = () => (
+      <MarkdownProvider
+        components={{
+          h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,
+          MyButton: (props) => <button {...props} />, // MDX-компонент
+        }}
+      >
+        <AppContent />
+      </MarkdownProvider>
+    );
     ```
 
-  </Tab>
-</Tabs>
-
-### 2. Ручной рендеринг и расширенные инструменты
-
-Если вам нужно отрендерить сырые строки Markdown или иметь больше контроля над процессом рендеринга, используйте следующие инструменты.
+    > Если `MarkdownProvider` отсутствует, intlayer будет отрисовывать markdown, используя стандартный парсер Markdown в JSX.
 
-<Tabs group="framework">
-  <Tab label="React / Next.js" value="react">
-  
-    #### Компонент `<MarkdownRenderer />`
+Вы также можете предоставить локальные переопределения для конкретных узлов, используя метод `.use()`:
 
     ```tsx
-    import { MarkdownRenderer } from "react-intlayer/markdown";
-
-    <MarkdownRenderer forceBlock={true} tagfilter={true}>
-      {"# Мой заголовок"}
-    </MarkdownRenderer>
+    {myMarkdownContent.use({
+      h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,
+    })}
     ```
 
-    #### Хук `useMarkdownRenderer()`
-
-    Получите предварительно настроенную функцию рендеринга.
+    Вы можете получить Markdown в виде строки:
 
     ```tsx
-    import { useMarkdownRenderer } from "react-intlayer/markdown";
-
-    const renderMarkdown = useMarkdownRenderer({
-      forceBlock: true,
-      components: { h1: (props) => <h1 {...props} className="custom" /> }
-    });
-
-    return renderMarkdown("# Мой заголовок");
+    {myMarkdownContent.value}
+    {String(myMarkdownContent)}
+    {myMarkdownContent.toString()}
     ```
 
-    #### Утилита `renderMarkdown()`
-    Автономная утилита для рендеринга вне компонентов.
+    И вы можете получить доступ к метаданным вашего markdown, например:
 
     ```tsx
-    import { renderMarkdown } from "react-intlayer/markdown";
-
-    const jsx = renderMarkdown("# Мой заголовок", { forceBlock: true });
+    {myMarkdownContent.metadata}
+    {myMarkdownContent.metadata.title}
     ```
 
   </Tab>
   <Tab label="Vue" value="vue">
+    В Vue контент Markdown можно отрендерить с помощью встроенного элемента `component` или напрямую как узел.
 
-    #### Компонент `<MarkdownRenderer />`
-
-    ```vue
+    ```vue fileName="App.vue"
     <script setup>
-    import { MarkdownRenderer } from "vue-intlayer/markdown";
+    import { useIntlayer } from "vue-intlayer";
+    const { myMarkdownContent } = useIntlayer("app");
     </script>
 
     <template>
-      <MarkdownRenderer :forceBlock="true" content="# Мой заголовок" />
+      <component :is="myMarkdownContent" />
     </template>
     ```
 
-  </Tab>
-  <Tab label="Svelte" value="svelte">
-
-    #### Компонент `<MarkdownRenderer />`
-
-    ```svelte
-    <script lang="ts">
-    import { MarkdownRenderer } from "svelte-intlayer/markdown";
-    </script>
-
-    <MarkdownRenderer forceBlock={true} value="# Мой заголовок" />
-    ```
-
-    #### Хук `useMarkdownRenderer()`
-
-    ```svelte
-    <script lang="ts">
-    import { useMarkdownRenderer } from "svelte-intlayer/markdown";
-    const render = useMarkdownRenderer();
-    </script>
-
-    {@html render("# Мой заголовок")}
-    ```
-
-    #### Утилита `renderMarkdown()`
-
-    ```svelte
-    <script lang="ts">
-    import { renderMarkdown } from "svelte-intlayer/markdown";
-    </script>
-
-    {@html renderMarkdown("# Мой заголовок")}
-    ```
-
-  </Tab>
-  <Tab label="Preact" value="preact">
-    #### Компонент `<MarkdownRenderer />`
-
-    ```tsx
-    import { MarkdownRenderer } from "preact-intlayer/markdown";
-
-    <MarkdownRenderer forceBlock={true}>
-      {"# Мой заголовок"}
-    </MarkdownRenderer>
-    ```
-
-    #### Хук `useMarkdownRenderer()`
-
-    ```tsx
-    import { useMarkdownRenderer } from "preact-intlayer/markdown";
-
-    const render = useMarkdownRenderer();
-
-    return <div>{render("# Мой заголовок")}</div>;
-    ```
-
-    #### Утилита `renderMarkdown()`
-
-    ```tsx
-    import { renderMarkdown } from "preact-intlayer/markdown";
+    Настройте глобально через плагин `intlayerMarkdown` (поддерживает пользовательские компоненты MDX):
 
-    return <div>{renderMarkdown("# Мой заголовок")}</div>;
-    ```
-
-  </Tab>
-  <Tab label="Solid" value="solid">
-    #### Компонент `<MarkdownRenderer />`
-
-    ```tsx
-    import { MarkdownRenderer } from "solid-intlayer/markdown";
-
-    <MarkdownRenderer forceBlock={true}>
-      {"# Мой заголовок"}
-    </MarkdownRenderer>
-    ```
-
-    #### Хук `useMarkdownRenderer()`
-
-    ```tsx
-    import { useMarkdownRenderer } from "solid-intlayer/markdown";
-
-    const render = useMarkdownRenderer();
-
-    return <div>{render("# Мой заголовок")}</div>;
-    ```
-
-    #### Утилита `renderMarkdown()`
-
-    ```tsx
-    import { renderMarkdown } from "solid-intlayer/markdown";
-
-    return <div>{renderMarkdown("# Мой заголовок")}</div>;
-    ```
-
-  </Tab>
-  <Tab label="Angular" value="angular">
-    #### Сервис `IntlayerMarkdownService`
-    Рендерит строку Markdown с помощью сервиса.
-
-    ```typescript
-    import { IntlayerMarkdownService } from "angular-intlayer/markdown";
-
-    export class MyComponent {
-      constructor(private markdownService: IntlayerMarkdownService) {}
-
-      renderMarkdown(markdown: string) {
-        return this.markdownService.renderMarkdown(markdown);
-      }
-    }
-    ```
-
-  </Tab>
-</Tabs>
-
----
-
-## Глобальная конфигурация с `MarkdownProvider`
-
-Вы можете настроить рендеринг Markdown глобально для всего приложения. Это позволяет избежать передачи одних и тех же параметров каждому рендереру.
-
-<Tabs group="framework">
-  <Tab label="React / Next.js" value="react">
-
-    ```tsx fileName="AppProvider.tsx"
-    import { MarkdownProvider } from "react-intlayer/markdown";
-
-    export const AppProvider = ({ children }) => (
-      <MarkdownProvider
-        components={{
-          h1: ({ children }) => <h1 className="text-2xl font-bold">{children}</h1>,
-          a: ({ href, children }) => <Link to={href}>{children}</Link>,
-        }}
-      >
-        {children}
-      </MarkdownProvider>
-    );
-    ```
-
-    Вы также можете использовать свой собственный рендерер Markdown:
-
-    ```tsx fileName="AppProvider.tsx"
-    import { MarkdownProvider } from "react-intlayer/markdown";
-
-    export const AppProvider = ({ children }) => (
-      <MarkdownProvider
-        renderMarkdown={async (md) => {
-          const { compileMarkdown } = await import('react-intlayer/markdown');
-          return compileMarkdown(md);
-        }}
-      >
-        {children}
-      </MarkdownProvider>
-    );
-    ```
-
-    > Динамический импорт рендерера Markdown - хороший способ уменьшить размер бандла вашего приложения.
-
-  </Tab>
-  <Tab label="Vue" value="vue">
-
-    ```typescript fileName="main.ts"
-    import { createApp } from "vue";
-    import { intlayer } from "vue-intlayer";
+    ```ts fileName="main.ts"
     import { intlayerMarkdown } from "vue-intlayer/markdown";
-    import App from "./App.vue";
-
-    const app = createApp(App);
 
-    app.use(intlayer);
     app.use(intlayerMarkdown, {
       components: {
-        h1: (props) =>
-        h('h1', { style: { color: 'orange' }, ...props }, props.children),
-        ComponentDemo: () => h('div', { style: { background: 'grey' } }, 'DEMO'),
-        bold: (props) => h('strong', props),
-        code: (props) => h('code', props),
+        h1: (props) => h('h1', { style: { color: 'green' } }, props.children),
+        MyButton: (props) => h('button', props), // Компонент MDX
       },
     });
-
-    app.mount("#app");
     ```
 
-    Вы также можете использовать свой собственный рендерер Markdown:
-
-    ```typescript fileName="main.ts"
-    import { createApp } from "vue";
-    import { intlayer } from "vue-intlayer";
-    import { intlayerMarkdown } from "vue-intlayer/markdown";
-    import App from "./App.vue";
-
-    const app = createApp(App);
-
-    app.use(intlayer);
-    app.use(intlayerMarkdown, {
-      renderMarkdown: async (md) => {
-        const { compileMarkdown } = await import('vue-intlayer/markdown');
-        return compileMarkdown(md);
-      },
-    });
-
-    app.mount("#app");
-    ```
-
-    > Динамический импорт рендерера Markdown - хороший способ уменьшить размер бандла вашего приложения.
-
-  </Tab>
-  <Tab label="Svelte" value="svelte">
-
-    ```svelte fileName="App.svelte"
-    <script lang="ts">
-      import { MarkdownProvider } from "svelte-intlayer/markdown";
-      import MyHeading from "./MyHeading.svelte";
-    </script>
-
-    <MarkdownProvider
-      components={{
-        h1: MyHeading,
-      }}
-    >
-      <slot />
-    </MarkdownProvider>
-    ```
-
-    Вы также можете использовать свой собственный рендерер Markdown:
-
-    ```svelte fileName="App.svelte"
-    <script lang="ts">
-      import { MarkdownProvider } from "svelte-intlayer/markdown";
-    </script>
-
-    <MarkdownProvider
-      renderMarkdown={async (md) => {
-        const { compileMarkdown } = await import('svelte-intlayer/markdown');
-        return compileMarkdown(md);
-      }}
-    >
-      <slot />
-    </MarkdownProvider>
-    ```
+    > Если плагин `intlayerMarkdown` не установлен, Intlayer будет выполнять рендеринг с использованием компилятора по умолчанию.
 
-    > Динамический импорт рендерера Markdown - хороший способ уменьшить размер бандла вашего приложения.
-
-  </Tab>
-  <Tab label="Preact" value="preact">
-
-    ```tsx fileName="AppProvider.tsx"
-    import { MarkdownProvider } from "preact-intlayer/markdown";
-
-    export const AppProvider = ({ children }) => (
-      <MarkdownProvider
-        components={{
-          h1: ({ children }) => <h1 className="text-2xl font-bold">{children}</h1>,
-        }}
-      >
-        {children}
-      </MarkdownProvider>
-    );
-    ```
-
-    Вы также можете использовать свой собственный рендерер Markdown:
-
-    ```tsx fileName="AppProvider.tsx"
-    import { MarkdownProvider } from "preact-intlayer/markdown";
-
-    export const AppProvider = ({ children }) => (
-      <MarkdownProvider
-        renderMarkdown={async (md) => {
-          const { compileMarkdown } = await import('preact-intlayer/markdown');
-          return compileMarkdown(md);
-        }}
-      >
-        {children}
-      </MarkdownProvider>
-    );
-    ```
-
-    > Динамический импорт рендерера Markdown - хороший способ уменьшить размер бандла вашего приложения.
-
-  </Tab>
-  <Tab label="Solid" value="solid">
-
-    ```tsx fileName="AppProvider.tsx"
-    import { MarkdownProvider } from "solid-intlayer/markdown";
-
-    export const AppProvider = (props) => (
-      <MarkdownProvider
-        components={{
-          h1: (props) => <h1 className="text-2xl font-bold">{props.children}</h1>,
-        }}
-      >
-        {props.children}
-      </MarkdownProvider>
-    );
-    ```
-
-    Вы также можете использовать свой собственный рендерер Markdown:
-
-    ```tsx fileName="AppProvider.tsx"
-    import { MarkdownProvider } from "solid-intlayer/markdown";
-
-    export const AppProvider = (props) => (
-      <MarkdownProvider
-        renderMarkdown={async (md) => {
-          const { compileMarkdown } = await import('solid-intlayer/markdown');
-          return compileMarkdown(md);
-        }}
-      >
-        {props.children}
-      </MarkdownProvider>
-    );
-    ```
-
-    > Динамический импорт рендерера Markdown - хороший способ уменьшить размер бандла вашего приложения.
-
-  </Tab>
-  <Tab label="Angular" value="angular">
-
-    ```typescript fileName="app.config.ts"
-    import { createIntlayerMarkdownProvider } from "angular-intlayer/markdown";
-
-    export const appConfig: ApplicationConfig = {
-      providers: [
-        createIntlayerMarkdownProvider({
-          components: {
-            h1: { class: "text-2xl font-bold" },
-          },
-        }),
-      ],
-    };
-    ```
-
-    Вы также можете использовать свой собственный рендерер Markdown:
-
-    ```typescript fileName="app.config.ts"
-    import { createIntlayerMarkdownProvider } from "angular-intlayer/markdown";
-
-    export const appConfig: ApplicationConfig = {
-      providers: [
-        createIntlayerMarkdownProvider({
-          renderMarkdown: async (md) => {
-            const { compileMarkdown } = await import('angular-intlayer/markdown');
-            return compileMarkdown(md);
-          },
-        }),
-      ],
-    };
-    ```
-
-    > Динамический импорт рендерера Markdown - хороший способ уменьшить размер бандла вашего приложения.
-
-  </Tab>
-</Tabs>
-
----
-
-## Справочник опций
-
-Эти опции могут быть переданы в `MarkdownProvider`, `MarkdownRenderer`, `useMarkdownRenderer` и `renderMarkdown`.
+    Вы также можете предоставить локальные переопределения для конкретных узлов, используя метод `.use()`:
 
-| Опция                 | Тип         | По умолчанию | Описание                                                                                            |
-| :-------------------- | :---------- | :----------- | :-------------------------------------------------------------------------------------------------- |
-| `forceBlock`          | `boolean`   | `false`      | Принудительно выводит результат в виде блочного элемента (например, `<div>`).                       |
-| `forceInline`         | `boolean`   | `false`      | Принудительно выводит результат в виде встроенного элемента (например, `<span>`).                   |
-| `tagfilter`           | `boolean`   | `true`       | Включает фильтр тегов GitHub для повышения безопасности путем удаления опасных HTML-тегов.          |
-| `preserveFrontmatter` | `boolean`   | `false`      | Если `true`, frontmatter в начале строки Markdown не будет удаляться.                               |
-| `components`          | `Overrides` | `{}`         | Карта HTML-тегов и соответствующих им пользовательских компонентов (например, `{ h1: MyHeading }`). |
-| `wrapper`             | `Component` | `null`       | Пользовательский компонент для обертки отрендеренного Markdown.                                     |
-| `renderMarkdown`      | `Function`  | `null`       | Пользовательская функция рендеринга для полной замены стандартного компилятора Markdown.            |
+    ```vue