Автор:

Создание:2026-01-20Последнее обновление:2026-03-24

Ссылайтесь на этот документ на ваш любимый ассистент AIChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

Спросите свой вопрос и получите сводку документа, используя эту страницу и выбранного вами поставщика AI

История версий

"Add `intlayerHTML` plugin object; use `app.use(intlayerHTML)` instead of `app.use(installIntlayerHTML)`"
v8.5.024.03.2026
"Перенос импортов из {{framework}}-intlayer в {{framework}}-intlayer/html"
v8.5.024.03.2026
"Добавлены HTMLRenderer / useHTMLRenderer / renderHTML"
v8.0.022.01.2026
"Добавлена поддержка парсинга HTML"
v8.0.020.01.2026

Содержимое этой страницы было переведено с помощью ИИ.

Смотреть последнюю версию оригинального контента на английском

Изменить эту документацию

Если у вас есть идея по улучшению этой документации, не стесняйтесь внести свой вклад, подав запрос на вытягивание на GitHub.

Ссылка на документацию GitHub

Копировать

Копировать Markdown документа в буфер обмена

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

Name: Intlayer
Rating: 4.92 (64 reviews)
Author: 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 Получение функции

История версий

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

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

Узел html()

Рендеринг HTML

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

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

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

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

Хук useHTMLRenderer()

Утилита renderHTML()

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

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

Хук useHTMLRenderer()

Утилита renderHTML()

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

Хук useHTMLRenderer()

Утилита renderHTML()

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

Хук useHTMLRenderer()

Утилита renderHTML()

Сервис IntlayerHTMLService

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

Узел `html()`

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

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

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

Хук `useHTMLRenderer()`

Утилита `renderHTML()`

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

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

Хук `useHTMLRenderer()`

Утилита `renderHTML()`

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

Хук `useHTMLRenderer()`

Утилита `renderHTML()`

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

Хук `useHTMLRenderer()`

Утилита `renderHTML()`

Сервис `IntlayerHTMLService`