Автор:
    Aymeric PINEAU
    Создание: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-теги (например, <p>, <div>, <strong> и т. п.), Intlayer автоматически преобразует её.

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

    Импортируйте HTML-контент из файлов. Обратите внимание, что в настоящее время функция file() возвращает строку, которая будет автоматически распознана как HTML, если содержит теги.

    htmlDictionary.content.ts
    import { html, file, t } from "intlayer";

export default {
key: "app",
content: {
  content: t({
    en: html(file("./content.en.html")),
    fr: html(file("./content.fr.html")),
    ru: html(file("./content.ru.html")),
  }),
},
};

    Узел 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>,
})}

    Во Vue HTML-контент можно рендерить с помощью встроенного component.

    App.vue
    <script setup>
import { useIntlayer } from "vue-intlayer";
const { myHtmlContent } = useIntlayer("app");
</script>

<template>
<component :is="myHtmlContent" />
</template>

    Используйте .use() для переопределений:

    vue
    <component :is="myHtmlContent.use({ h1: 'h2' })" />

    Svelte рендерит HTML-узлы в виде строк. Используйте {@html}, чтобы их отобразить.

    svelte
    <script lang="ts">
import { useIntlayer } from "svelte-intlayer";
const content = useIntlayer("app");
</script>

{@html $content.myHtmlContent}

    Preact поддерживает HTML-узлы непосредственно в JSX.

    App.tsx
    import { useIntlayer } from "preact-intlayer";

const AppContent = () => {
const { myHtmlContent } = useIntlayer("app");
return <div>{myHtmlContent}</div>;
};

    Solid поддерживает HTML-узлы непосредственно в JSX.

    App.tsx
    import { useIntlayer } from "solid-intlayer";

const AppContent = () => {
const { myHtmlContent } = useIntlayer("app");
return <div>{myHtmlContent}</div>;
};

    В Angular используется директива [innerHTML] для рендеринга HTML-контента.

    app.component.ts
    import { Component } from "@angular/core";
import { useIntlayer } from "angular-intlayer";

@Component({
selector: "app-root",
template: `<div [innerHTML]="content().myHtmlContent"></div>`,
})
export class AppComponent {
content = useIntlayer("app");
}

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

    typescript
    content().myHtmlContent.use({
p: { class: "prose" },
CustomLink: { href: "/details" },
})

    Глобальная конфигурация с 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 - хороший способ уменьшить размер бандла вашего приложения.
    main.ts
    import { createApp, h } from "vue";
import { intlayer } from "vue-intlayer";
import { intlayerHTML } from "vue-intlayer/html";
import App from "./App.vue";

const app = createApp(App);

app.use(intlayer);
app.use(intlayerHTML, {
components: {
  p: (props, { slots }) => h("p", { class: "prose", ...props }, slots.default?.()),
  CustomLink: (props, { slots }) => h("a", { href: "/details", ...props }, slots.default?.()),
},
});

app.mount("#app");

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

    main.ts
    import { createApp, h } from "vue";
import { intlayer } from "vue-intlayer";
import { intlayerHTML } from "vue-intlayer/html";
import App from "./App.vue";

const app = createApp(App);

app.use(intlayer);
app.use(intlayerHTML, {
renderHTML: async (html) => {
  const { renderHTML } = await import('vue-intlayer/html');
  return renderHTML(html);
},
});

app.mount("#app");
    Динамический импорт рендерера HTML - хороший способ уменьшить размер бандла вашего приложения.
    App.svelte
    <script lang="ts">
import { HTMLProvider } from "svelte-intlayer/html";
import MyCustomP from "./MyCustomP.svelte";
</script>

<HTMLProvider
components={{
  p: MyCustomP,
}}
>
<slot />
</HTMLProvider>

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

    App.svelte
    <script lang="ts">
import { HTMLProvider } from "svelte-intlayer/html";
</script>

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

export const AppProvider = ({ children }) => (
<HTMLProvider
  components={{
    p: (props) => <p className="prose" {...props} />,
  }}
>
  {children}
</HTMLProvider>
);

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

    AppProvider.tsx
    import { HTMLProvider } from "preact-intlayer/html";

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

export const AppProvider = (props) => (
<HTMLProvider
  components={{
    p: (props) => <p className="prose" {...props} />,
  }}
>
  {props.children}
</HTMLProvider>
);

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

    AppProvider.tsx
    import { HTMLProvider } from "solid-intlayer/html";

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

export const appConfig: ApplicationConfig = {
providers: [
  createIntlayerHTMLProvider({
    components: {
      p: { class: "prose" },
      CustomLink: { href: "/details" },
    },
  }),
],
};

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

    app.config.ts
    import { createIntlayerHTMLProvider } from "angular-intlayer/html";

export const appConfig: ApplicationConfig = {
providers: [
  createIntlayerHTMLProvider({
    renderHTML: async (html) => {
      const { renderHTML } = await import('angular-intlayer/html');
      return renderHTML(html);
    },
  }),
],
};
    Динамический импорт рендерера HTML - хороший способ уменьшить размер бандла вашего приложения.

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

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

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

    Отрендерить HTML-строку с конкретными компонентами.

    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' } });

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

    vue
    <script setup>
import { HTMLRenderer } from "vue-intlayer/html";
</script>

<template>
<HTMLRenderer content="<p>Привет, мир</p>" />
</template>

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

    svelte
    <script lang="ts">
import { HTMLRenderer } from "svelte-intlayer/html";
</script>

<HTMLRenderer value="<p>Привет, мир</p>" />

    Хук useHTMLRenderer()

    svelte
    <script lang="ts">
import { useHTMLRenderer } from "svelte-intlayer/html";
const render = useHTMLRenderer();
</script>

{@html render("<p>Привет, мир</p>")}

    Утилита renderHTML()

    svelte
    <script lang="ts">
import { renderHTML } from "svelte-intlayer/html";
</script>

{@html renderHTML("<p>Привет, мир</p>")}

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

    tsx
    import { HTMLRenderer } from "preact-intlayer/html";

<HTMLRenderer>
{"<p>Привет, мир</p>"}
</HTMLRenderer>

    Хук useHTMLRenderer()

    tsx
    import { useHTMLRenderer } from "preact-intlayer/html";

const render = useHTMLRenderer();

return <div>{render("<p>Привет, мир</p>")}</div>;

    Утилита renderHTML()

    tsx
    import { renderHTML } from "preact-intlayer/html";

return <div>{renderHTML("<p>Привет, мир</p>")}</div>;

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

    tsx
    import { HTMLRenderer } from "solid-intlayer/html";

<HTMLRenderer>
{"<p>Привет, мир</p>"}
</HTMLRenderer>

    Хук useHTMLRenderer()

    tsx
    import { useHTMLRenderer } from "solid-intlayer/html";

const render = useHTMLRenderer();

return <div>{render("<p>Привет, мир</p>")}</div>;

    Утилита renderHTML()

    tsx
    import { renderHTML } from "solid-intlayer/html";

return <div>{renderHTML("<p>Привет, мир</p>")}</div>;

    Сервис IntlayerHTMLService

    Рендерит HTML-строку с помощью сервиса.

    typescript
    import { IntlayerHTMLService } from "angular-intlayer/html";

export class MyComponent {
constructor(private markdownService: IntlayerHTMLService) {}

renderHTML(html: string) {
  return this.markdownService.renderHTML(html);
}
}

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

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

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