Creation:2026-01-20Last update:2026-01-22

Надішліть цей документ вашому улюбленому AI-асистенту

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

Задайте питання та отримайте підсумок документа, вказавши цю сторінку та обраного вами постачальника штучного інтелекту

Ця документація застаріла, базову версію оновлено станом на 24 березня 2026 р..

Перейти до англійської версії документа

Історія версій

"Add `intlayerHTML` plugin object; use `app.use(intlayerHTML)` instead of `app.use(installIntlayerHTML)`"
v8.5.024.03.2026
"move import from `{{framework}}-intlayer` to `{{framework}}-intlayer/html`"
v8.5.024.03.2026
"Додано HTMLRenderer / useHTMLRenderer / утиліту renderHTML"
v8.0.022.01.2026
"Додано підтримку парсингу HTML"
v8.0.020.01.2026

Вміст цієї сторінки перекладено за допомогою штучного інтелекту.

Переглянути останню версію оригінального вмісту англійською

Edit this doc

If you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.

GitHub link to the documentation

Copy

Copy doc Markdown to clipboard

Вміст HTML / HTML в Intlayer

Name: Intlayer
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;

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>",  },};

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")),    }),  },};

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",    },  });

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

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>,})}

{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>

<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' })" />

<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}

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

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

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

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" },})

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

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

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");

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");

App.svelte

Копіювати код

Скопіюйте код у буфер обміну

 <script lang="ts">   import { HTMLProvider } from "svelte-intlayer/html";   import MyCustomP from "./MyCustomP.svelte"; </script> <HTMLProvider   components={{     p: MyCustomP,   }} >   <slot /> </HTMLProvider>

 <script lang="ts">   import { HTMLProvider } from "svelte-intlayer/html";   import MyCustomP from "./MyCustomP.svelte"; </script> <HTMLProvider   components={{     p: MyCustomP,   }} >   <slot /> </HTMLProvider>

AppProvider.tsx

Копіювати код

Скопіюйте код у буфер обміну

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

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

AppProvider.tsx

Копіювати код

Скопіюйте код у буфер обміну

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

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

app.config.ts

Копіювати код

Скопіюйте код у буфер обміну

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

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

Ручне відтворення та розширені інструменти

Якщо вам потрібно відтворити сирі HTML-рядки або ви хочете більше контролю над мапуванням компонентів, використовуйте наступні інструменти.

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

Відтворіть HTML-рядок із конкретними компонентами.

tsx

Копіювати код

Скопіюйте код у буфер обміну

import { HTMLRenderer } from "react-intlayer/html";<HTMLRenderer components={{ p: MyCustomP }}>  {"<p>Hello World</p>"}</HTMLRenderer>

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>");

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

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>

 <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>" />

<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>")}

<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>")}

<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>

 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>;

 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>;

 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>

 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>;

 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>;

 import { renderHTML } from "solid-intlayer/html"; return <div>{renderHTML("<p>Hello World</p>")}</div>;

Сервіс `IntlayerHTMLService`

Відтворіть HTML-рядок за допомогою сервісу.

typescript

Копіювати код

Скопіюйте код у буфер обміну

import { IntlayerHTMLService } from "angular-intlayer";export class MyComponent {  constructor(private markdownService: IntlayerHTMLService) {}  renderHTML(html: string) {    return this.markdownService.renderMarkdown(html);  }}

import { IntlayerHTMLService } from "angular-intlayer";export class MyComponent {  constructor(private markdownService: IntlayerHTMLService) {}  renderHTML(html: string) {    return this.markdownService.renderMarkdown(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()

Довідник опцій

Вузол `html()`

Автоматичне відтворення (за допомогою `useIntlayer`)

Глобальна конфігурація за допомогою `HTMLProvider`

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

Хук `useHTMLRenderer()`

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