\n\n \n ```\n\n Используйте `.use()` для переопределений:\n ```vue\n \n ```\n\n \n \n Svelte рендерит HTML-узлы в виде строк. Используйте `{@html}`, чтобы их отобразить.\n\n ```svelte\n \n\n {@html $content.myHtmlContent}\n ```\n\n \n \n Preact поддерживает HTML-узлы непосредственно в JSX.\n\n ```tsx fileName=\"App.tsx\"\n import { useIntlayer } from \"preact-intlayer\";\n\n const AppContent = () => {\n const { myHtmlContent } = useIntlayer(\"app\");\n return
{myHtmlContent}
;\n };\n ```\n\n \n \n Solid поддерживает HTML-узлы непосредственно в JSX.\n\n ```tsx fileName=\"App.tsx\"\n import { useIntlayer } from \"solid-intlayer\";\n\n const AppContent = () => {\n const { myHtmlContent } = useIntlayer(\"app\");\n return
{myHtmlContent}
;\n };\n ```\n\n \n \n В Angular используется директива `[innerHTML]` для рендеринга HTML-контента.\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 Используйте метод `.use()` для предоставления пользовательских компонентов или переопределения тегов:\n\n ```typescript\n content().myHtmlContent.use({\n p: { class: \"prose\" },\n CustomLink: { href: \"/details\" },\n })\n ```\n\n \n\n\n## Глобальная конфигурация с `HTMLProvider`\n\nВы можете настроить рендеринг HTML глобально для всего приложения. Это удобно для определения пользовательских компонентов, которые должны быть доступны во всём HTML-контенте.\n\n\n \n \n ```tsx fileName=\"AppProvider.tsx\"\n import { HTMLProvider } from \"react-intlayer/html\";\n\n export const AppProvider = ({ children }) => (\n

,\n CustomLink: ({ children }) => {children},\n }}\n >\n {children}\n \n );\n ```\n\n Вы также можете использовать свой собственный рендерер HTML:\n\n ```tsx fileName=\"AppProvider.tsx\"\n import { HTMLProvider } from \"react-intlayer/html\";\n\n export const AppProvider = ({ children }) => (\n {\n const { renderHTML } = await import('react-intlayer/html');\n return renderHTML(html);\n }}\n >\n {children}\n \n );\n ```\n\n > Динамический импорт рендерера HTML - хороший способ уменьшить размер бандла вашего приложения.\n\n \n \n \n ```typescript fileName=\"main.ts\"\n import { createApp, h } from \"vue\";\n import { intlayer } from \"vue-intlayer\";\n import { intlayerHTML } from \"vue-intlayer/html\";\n import App from \"./App.vue\";\n\n const app = createApp(App);\n\n app.use(intlayer);\n app.use(intlayerHTML, {\n components: {\n p: (props, { slots }) => h(\"p\", { class: \"prose\", ...props }, slots.default?.()),\n CustomLink: (props, { slots }) => h(\"a\", { href: \"/details\", ...props }, slots.default?.()),\n },\n });\n\n app.mount(\"#app\");\n ```\n\n Вы также можете использовать свой собственный рендерер HTML:\n\n ```typescript fileName=\"main.ts\"\n import { createApp, h } from \"vue\";\n import { intlayer } from \"vue-intlayer\";\n import { intlayerHTML } from \"vue-intlayer/html\";\n import App from \"./App.vue\";\n\n const app = createApp(App);\n\n app.use(intlayer);\n app.use(intlayerHTML, {\n renderHTML: async (html) => {\n const { renderHTML } = await import('vue-intlayer/html');\n return renderHTML(html);\n },\n });\n\n app.mount(\"#app\");\n ```\n\n > Динамический импорт рендерера HTML - хороший способ уменьшить размер бандла вашего приложения.\n\n \n \n \n ```svelte fileName=\"App.svelte\"\n \n\n \n \n \n ```\n\n Вы также можете использовать свой собственный рендерер HTML:\n\n ```svelte fileName=\"App.svelte\"\n \n\n {\n const { renderHTML } = await import('svelte-intlayer/html');\n return renderHTML(html);\n }}\n >\n \n \n ```\n\n > Динамический импорт рендерера HTML - хороший способ уменьшить размер бандла вашего приложения.\n\n \n \n \n ```tsx fileName=\"AppProvider.tsx\"\n import { HTMLProvider } from \"preact-intlayer/html\";\n\n export const AppProvider = ({ children }) => (\n

,\n }}\n >\n {children}\n \n );\n ```\n\n Вы также можете использовать свой собственный рендерер HTML:\n\n ```tsx fileName=\"AppProvider.tsx\"\n import { HTMLProvider } from \"preact-intlayer/html\";\n\n export const AppProvider = ({ children }) => (\n {\n const { renderHTML } = await import('preact-intlayer/html');\n return renderHTML(html);\n }}\n >\n {children}\n \n );\n ```\n\n > Динамический импорт рендерера HTML - хороший способ уменьшить размер бандла вашего приложения.\n\n \n \n \n ```tsx fileName=\"AppProvider.tsx\"\n import { HTMLProvider } from \"solid-intlayer/html\";\n\n export const AppProvider = (props) => (\n

,\n }}\n >\n {props.children}\n \n );\n ```\n\n Вы также можете использовать свой собственный рендерер HTML:\n\n ```tsx fileName=\"AppProvider.tsx\"\n import { HTMLProvider } from \"solid-intlayer/html\";\n\n export const AppProvider = (props) => (\n {\n const { renderHTML } = await import('solid-intlayer/html');\n return renderHTML(html);\n }}\n >\n {props.children}\n \n );\n ```\n\n > Динамический импорт рендерера HTML - хороший способ уменьшить размер бандла вашего приложения.\n\n \n \n\n ```typescript fileName=\"app.config.ts\"\n import { createIntlayerHTMLProvider } from \"angular-intlayer/html\";\n\n export const appConfig: ApplicationConfig = {\n providers: [\n createIntlayerHTMLProvider({\n components: {\n p: { class: \"prose\" },\n CustomLink: { href: \"/details\" },\n },\n }),\n ],\n };\n ```\n\n Вы также можете использовать свой собственный рендерер HTML:\n\n ```typescript fileName=\"app.config.ts\"\n import { createIntlayerHTMLProvider } from \"angular-intlayer/html\";\n\n export const appConfig: ApplicationConfig = {\n providers: [\n createIntlayerHTMLProvider({\n renderHTML: async (html) => {\n const { renderHTML } = await import('angular-intlayer/html');\n return renderHTML(html);\n },\n }),\n ],\n };\n ```\n\n > Динамический импорт рендерера HTML - хороший способ уменьшить размер бандла вашего приложения.\n\n \n\n\n---\n\n### Ручной рендеринг и расширенные инструменты\n\nЕсли вам нужно рендерить сырые HTML-строки или иметь больший контроль над маппингом компонентов, используйте следующие инструменты.\n\n\n \n #### Компонент ``\n \n ```tsx\n import { HTMLRenderer } from \"react-intlayer/html\";\n\n \n {\"

Привет, мир

\"}\n \n ```\n\n #### Хук `useHTMLRenderer()`\n\n Возвращает предварительно настроенную функцию рендеринга.\n\n ```tsx\n import { useHTMLRenderer } from \"react-intlayer/html\";\n\n const renderHTML = useHTMLRenderer({\n components: { strong: (props) => }\n });\n\n return renderHTML(\"

Привет Мир

\");\n ```\n\n #### Утилита `renderHTML()`\n\n Утилита для рендеринга вне компонентов.\n\n ```tsx\n import { renderHTML } from \"react-intlayer/html\";\n\n const jsx = renderHTML(\"

Привет

\", { components: { p: 'div' } });\n ```\n\n \n \n \n #### Компонент ``\n \n ```vue\n \n\n \n ```\n\n \n \n \n #### Компонент ``\n \n ```svelte\n \n\n Привет, мир

\" />\n ```\n\n #### Хук `useHTMLRenderer()`\n\n ```svelte\n \n\n {@html render(\"

Привет, мир

\")}\n ```\n\n #### Утилита `renderHTML()`\n\n ```svelte\n \n\n {@html renderHTML(\"

Привет, мир

\")}\n ```\n\n \n \n \n #### Компонент ``\n \n ```tsx\n import { HTMLRenderer } from \"preact-intlayer/html\";\n\n \n {\"

Привет, мир

\"}\n \n ```\n\n #### Хук `useHTMLRenderer()`\n\n ```tsx\n import { useHTMLRenderer } from \"preact-intlayer/html\";\n\n const render = useHTMLRenderer();\n\n return
{render(\"

Привет, мир

\")}
;\n ```\n\n #### Утилита `renderHTML()`\n\n ```tsx\n import { renderHTML } from \"preact-intlayer/html\";\n\n return
{renderHTML(\"

Привет, мир

\")}
;\n ```\n\n \n \n \n #### Компонент ``\n \n ```tsx\n import { HTMLRenderer } from \"solid-intlayer/html\";\n\n \n {\"

Привет, мир

\"}\n \n ```\n\n #### Хук `useHTMLRenderer()`\n\n ```tsx\n import { useHTMLRenderer } from \"solid-intlayer/html\";\n\n const render = useHTMLRenderer();\n\n return
{render(\"

Привет, мир

\")}
;\n ```\n\n #### Утилита `renderHTML()`\n\n ```tsx\n import { renderHTML } from \"solid-intlayer/html\";\n\n return
{renderHTML(\"

Привет, мир

\")}
;\n ```\n\n \n \n #### Сервис `IntlayerHTMLService`\n Рендерит HTML-строку с помощью сервиса.\n\n ```typescript\n import { IntlayerHTMLService } from \"angular-intlayer/html\";\n\n export class MyComponent {\n constructor(private markdownService: IntlayerHTMLService) {}\n\n renderHTML(html: string) {\n return this.markdownService.renderHTML(html);\n }\n }\n ```\n\n \n\n\n---\n\n## Справочник опций\n\nЭти опции могут быть переданы в `HTMLProvider`, `HTMLRenderer`, `useHTMLRenderer` и `renderHTML`.\n\n| Опция | Тип | По умолчанию | Описание |\n| :----------- | :-------------------- | :----------- | :------------------------------------------------------------------------------------------------------------------- |\n| `components` | `Record` | `{}` | Отображение HTML-тегов или имён пользовательских компонентов на соответствующие компоненты. |\n| `renderHTML` | `Function` | `null` | Пользовательская функция рендеринга для полной замены стандартного HTML-парсера (только для провайдеров Vue/Svelte). |\n\n> Примечание: для React и Preact стандартные HTML-теги предоставляются автоматически. Вам нужно передавать проп `components` только если вы хотите переопределить их или добавить пользовательские компоненты.\n","description":"Узнайте, как объявлять и использовать HTML-контент с пользовательскими компонентами в Intlayer. Следуйте этой документации, чтобы встроить богатый HTML-подобный контент с динамической заменой компонентов в ваш проект с поддержкой интернационализации.","url":"https://intlayer.org/ru/doc/concept/content/html","datePublished":"2026-01-20","dateModified":"2026-03-24","version":"8.5.0","keywords":"HTML, Пользовательские компоненты, Богатый контент, Intlayer, Next.js, JavaScript, React, Vue, Svelte, Solid, Angular","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Разработчики, менеджеры контента"}}
    Автор:
    Создание:2026-01-20Последнее обновление:2026-03-24

    HTML-контент / HTML в Intlayer

    Intlayer поддерживает HTML-контент, позволяя встраивать насыщенный, структурированный контент в ваши словари. Этот контент может отображаться с помощью стандартных HTML-тегов или заменяться на пользовательские компоненты во время выполнения.

    Объявление HTML-контента

    Вы можете объявлять HTML-контент с помощью функции html или просто как строку.

    Используйте функцию html, чтобы явно объявлять HTML-контент. Это гарантирует корректную сопоставляемость стандартных тегов, даже если автоматическое обнаружение отключено.

    htmlDictionary.content.ts
    import { html, type Dictionary } from "intlayer";const htmlDictionary = {  key: "app",  contentAutoTransformation: true, // можно задать в файле конфигурации  content: {    myHtmlContent:  html("<p>Привет <strong>Мир</strong></p>"),  },} satisfies Dictionary;export default htmlDictionary;

    Узел html()

    Функция html(), это новая возможность в Intlayer v8, которая позволяет явно определять HTML-контент в ваших словарях. Хотя Intlayer часто может автоматически определять HTML-контент, использование функции html() дает несколько преимуществ:

    • Типобезопасность: Функция html() позволяет определять ожидаемые пропсы для пользовательских компонентов, обеспечивая лучшее автодополнение и проверку типов в вашем редакторе.
    • Явное объявление: Это гарантирует, что строка всегда будет рассматриваться как HTML, даже если она не содержит стандартных HTML-тегов, которые могли бы активировать автоматическое определение.
    • Определение пользовательских компонентов: Вы можете передать второй аргумент в html(), чтобы определить пользовательские компоненты и ожидаемые типы их пропсов.
    typescript
    import { html } from "intlayer";const myContent = html(  "<MyCustomComponent title='Привет'>Мир</MyCustomComponent>",  {    MyCustomComponent: {      title: "string",      children: "node",    },  });

    При использовании метода .use() для HTML-узла предоставленные вами компоненты будут проверяться на соответствие определению, указанному в функции html() (если оно доступно).

    Рендеринг HTML

    Рендеринг можно осуществлять автоматически с помощью системы контента Intlayer или вручную с использованием специализированных инструментов.

    Автоматический рендеринг (с использованием useIntlayer)

    Когда вы получаете контент через useIntlayer, HTML-узлы уже подготовлены для рендеринга.

    HTML-узлы можно рендерить напрямую как JSX. Стандартные теги работают автоматически.

    App.tsx
    import { useIntlayer } from "react-intlayer";const AppContent = () => {  const { myHtmlContent } = useIntlayer("app");  return <div>{myHtmlContent}</div>;};

    Используйте метод .use() для предоставления пользовательских компонентов или переопределения тегов:

    tsx
    {myHtmlContent.use({  p: (props) => <p className="prose" {...props} />,  CustomLink: ({ children }) => <a href="/details">{children}</a>,})}

    Глобальная конфигурация с HTMLProvider

    Вы можете настроить рендеринг HTML глобально для всего приложения. Это удобно для определения пользовательских компонентов, которые должны быть доступны во всём HTML-контенте.

    AppProvider.tsx
    import { HTMLProvider } from "react-intlayer/html";export const AppProvider = ({ children }) => (  <HTMLProvider    components={{      p: (props) => <p className="prose" {...props} />,      CustomLink: ({ children }) => <a href="/details">{children}</a>,    }}  >    {children}  </HTMLProvider>);

    Вы также можете использовать свой собственный рендерер HTML:

    AppProvider.tsx
    import { HTMLProvider } from "react-intlayer/html";export const AppProvider = ({ children }) => (  <HTMLProvider    renderHTML={async (html) => {      const { renderHTML } = await import('react-intlayer/html');      return renderHTML(html);    }}  >    {children}  </HTMLProvider>);
    Динамический импорт рендерера HTML - хороший способ уменьшить размер бандла вашего приложения.

    Ручной рендеринг и расширенные инструменты

    Если вам нужно рендерить сырые HTML-строки или иметь больший контроль над маппингом компонентов, используйте следующие инструменты.

    Компонент <HTMLRenderer />

    tsx
    import { HTMLRenderer } from "react-intlayer/html";<HTMLRenderer components={{ p: MyCustomP }}>  {"<p>Привет, мир</p>"}</HTMLRenderer>

    Хук useHTMLRenderer()

    Возвращает предварительно настроенную функцию рендеринга.

    tsx
    import { useHTMLRenderer } from "react-intlayer/html";const renderHTML = useHTMLRenderer({  components: { strong: (props) => <strong {...props} className="text-red-500" /> }});return renderHTML("<p>Привет <strong>Мир</strong></p>");

    Утилита renderHTML()

    Утилита для рендеринга вне компонентов.

    tsx
    import { renderHTML } from "react-intlayer/html";const jsx = renderHTML("<p>Привет</p>", { components: { p: 'div' } });

    Справочник опций

    Эти опции могут быть переданы в HTMLProvider, HTMLRenderer, useHTMLRenderer и renderHTML.

    Опция Тип По умолчанию Описание
    components Record<string, any> {} Отображение HTML-тегов или имён пользовательских компонентов на соответствующие компоненты.
    renderHTML Function null Пользовательская функция рендеринга для полной замены стандартного HTML-парсера (только для провайдеров Vue/Svelte).
    Примечание: для React и Preact стандартные HTML-теги предоставляются автоматически. Вам нужно передавать проп components только если вы хотите переопределить их или добавить пользовательские компоненты.
    MarkdownПолучение функции