Автор:
    Aymeric PINEAU
    Дата створення:2026-01-20Останнє оновлення:2026-01-22

    Вміст 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({
    uk: html(file("./content.uk.html")),
    en: html(file("./content.en.html")),
    fr: html(file("./content.fr.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>Hello World</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>Hello <strong>World</strong></p>");

    Утиліта renderHTML()

    Автономна утиліта для відтворення поза компонентами.

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

const jsx = renderHTML("<p>Hello</p>", { components: { p: 'div' } });

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

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

<template>
<HTMLRenderer content="<p>Hello World</p>" />
</template>

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

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

<HTMLRenderer value="<p>Hello World</p>" />

    Хук useHTMLRenderer()

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

{@html render("<p>Hello World</p>")}

    Утиліта renderHTML()

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

{@html renderHTML("<p>Hello World</p>")}

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

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

<HTMLRenderer>
{"<p>Hello World</p>"}
</HTMLRenderer>

    Хук useHTMLRenderer()

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

const render = useHTMLRenderer();

return <div>{render("<p>Hello World</p>")}</div>;

    Утиліта renderHTML()

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

return <div>{renderHTML("<p>Hello World</p>")}</div>;

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

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

<HTMLRenderer>
{"<p>Hello World</p>"}
</HTMLRenderer>

    Хук useHTMLRenderer()

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

const render = useHTMLRenderer();

return <div>{render("<p>Hello World</p>")}</div>;

    Утиліта renderHTML()

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

return <div>{renderHTML("<p>Hello World</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Отримання функції