ГоловнаПісочницяВітринаДодатокДокументаціяБлог
    • Englishанглійська
      EN
    • русскийросійська
      RU
    • 日本語японська
      JA
    • françaisфранцузька
      FR
    • 한국어корейська
      KO
    • 中文китайська
      ZH
    • españolіспанська
      ES
    • Deutschнімецька
      DE
    • العربيةарабська
      AR
    • italianoіталійська
      IT
    • British Englishанглійська (Велика Британія)
      EN-GB
    • portuguêsпортугальська
      PT
    • हिन्दीгінді
      HI
    • Türkçeтурецька
      TR
    • polskiпольська
      PL
    • Indonesiaіндонезійська
      ID
    • Tiếng Việtвʼєтнамська
      VI
    • українськаукраїнська
      UK
    /
    Фільтрувати документи за фреймворком
    Alt+←
    Чому Intlayer?
    Почати
    Концепція
    • Як працює Intlayer
    • Конфігурація
    • TestFillBuildWatchExtractLoginPushPullConfigurationListVersionEditorLiveDebugDoc ReviewDoc TranslateSDK
    • Візуальний редактор
    • CMS
    • Інтеграція CI/CD
    • ПерекладМножинаПерелікУмоваРідВставкаФайлВкладеністьMarkdownHTMLОтримання функції
    • Файл для кожної локалі
    • Компілятор
    • Автозаповнення
    • Тестування
    • Оптимізація пакета
    Середовище
    • Next.js 14 та App Router
      Next.js 15
      Next.js без locale URL
      Next.js та Page Router
      Compiler
    • Tanstack Start Solid
    • Astro та React
      Astro та Svelte
      Astro та Vue
      Astro та Solid
      Astro та Preact
      Astro та Lit
      Astro та Vanilla JS
    • React Router v7
      React Router v7 (fs-routes)
      Compiler
    • Nuxt та Vue
    • Vite та Solid
    • SvelteKit
    • Vite та Preact
    • Vite та Vanilla JS
    • Vite та Lit
    • Angular 19 (Webpack)
      Analog
    • React CRA
    • React Native та Expo
    • Express.js
      NestJS
      Fastify
      Hono
      Adonis
    • Lynx та React
    Plugins
    • JSON
    • gettext (.po)
    Розширення VS Code
    Агент
    • Сервер MCP
    • Навички агента
    Релізи
    • v8
    • v7
    • v6
    Бенчмарк
    • Next.js
    • TanStack
    • Vue
    • Solid
    • Svelte
    Блог
    Задати питання
    1. Documentation
    2. Концепція
    3. Оголошення контенту
    4. HTML
    \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 \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 \n \n \n ```svelte fileName=\"App.svelte\"\n \n\n \n \n \n ```\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 \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 \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 \n\n\n---\n\n### Ручне відтворення та розширені інструменти\n\nЯкщо вам потрібно відтворити сирі HTML-рядки або ви хочете більше контролю над мапуванням компонентів, використовуйте наступні інструменти.\n\n\n \n #### Компонент ``\n Відтворіть HTML-рядок із конкретними компонентами.\n\n ```tsx\n import { HTMLRenderer } from \"react-intlayer/html\";\n\n \n {\"

    Hello World

    \"}\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(\"

    Hello World

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

    Hello

    \", { 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 Hello World

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

    Hello World

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

    Hello World

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

    Hello World

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

    Hello World

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

    Hello World

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

    Hello World

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

    Hello World

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

    Hello World

    \")}
    ;\n ```\n\n
    \n \n #### Сервіс `IntlayerHTMLService`\n Відтворіть HTML-рядок за допомогою сервісу.\n\n ```typescript\n import { IntlayerHTMLService } from \"angular-intlayer\";\n\n export class MyComponent {\n constructor(private markdownService: IntlayerHTMLService) {}\n\n renderHTML(html: string) {\n return this.markdownService.renderMarkdown(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","about":"Дізнайтеся, як оголошувати та використовувати HTML-контент із користувацькими компонентами в Intlayer. Дотримуйтесь цієї документації, щоб вбудувати багатий вміст, схожий на HTML, з динамічною заміною компонентів у вашому інтернаціоналізованому проєкті.","url":"https://intlayer.org/uk/doc/concept/content/html","datePublished":"20-01-2026","dateModified":"22-01-2026","keywords":"HTML, Користувацькі компоненти, Багатий вміст, Intlayer, Next.js, JavaScript, React, Vue, Svelte","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Розробники, менеджери контенту"}}
    Дата створення:2026-01-20Останнє оновлення:2026-01-22
    Надішліть цей документ вашому улюбленому AI-асистенту
    ChatGPT
    Claude
    DeepSeek
    Google AI mode
    Gemini
    Perplexity
    Mistral
    Grok

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

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

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

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

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

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

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

    Якщо у вас є ідея щодо покращення цієї документації, будь ласка, долучіться, надіславши pull request на GitHub.

    Посилання на документацію на GitHub
    Копіювати

    Скопіювати документацію у форматі Markdown в буфер обміну

    Вміст 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>);
    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");
    App.svelte
    Копіювати код

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

     <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> ); 
    AppProvider.tsx
    Копіювати код

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

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

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

    Якщо вам потрібно відтворити сирі 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";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
    Отримання функції
    Alt+→

    На цій сторінці

      Обговорення анонімні та регулярно переглядаються для вирішення поширених проблем. Не соромтеся ділитися ідеями функцій, відгуками про документацію або будь-чим, що стосується Intlayer, ми використовуємо цю інформацію для формування нашої дорожньої карти та покращення продукту.

      import { html, type Dictionary } from "intlayer";const htmlDictionary = {  key: "app",  contentAutoTransformation: true, // можна встановити у файлі конфігурації  content: {    myHtmlContent:  html("<p>Привіт <strong>Світ</strong></p>"),  },} satisfies Dictionary;export default htmlDictionary;
      export default {  key: "app",  contentAutoTransformation: true, // можна встановити у файлі конфігурації  content: {    myHtmlContent:  "<p>Привіт <strong>Світ</strong></p>",  },};
      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 } from "intlayer";const myContent = html(  "<MyCustomComponent title='Привіт'>Світ</MyCustomComponent>",  {    MyCustomComponent: {      title: "string",      children: "node",    },  });
      import { useIntlayer } from "react-intlayer";const AppContent = () => {  const { myHtmlContent } = useIntlayer("app");  return <div>{myHtmlContent}</div>;};
      {myHtmlContent.use({  p: (props) => <p className="prose" {...props} />,  CustomLink: ({ children }) => <a href="/details">{children}</a>,})}
      <script setup>import { useIntlayer } from "vue-intlayer";const { myHtmlContent } = useIntlayer("app");</script><template>  <component :is="myHtmlContent" /></template>
      <component :is="myHtmlContent.use({ h1: 'h2' })" />
      <script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("app");</script>{@html $content.myHtmlContent}
      import { useIntlayer } from "preact-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>;};
      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");}
      content().myHtmlContent.use({  p: { class: "prose" },  CustomLink: { href: "/details" },})
      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 { 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");
       <script lang="ts">   import { HTMLProvider } from "svelte-intlayer/html";   import MyCustomP from "./MyCustomP.svelte"; </script> <HTMLProvider   components={{     p: MyCustomP,   }} >   <slot /> </HTMLProvider> 
       import { HTMLProvider } from "preact-intlayer/html"; export const AppProvider = ({ children }) => (   <HTMLProvider     components={{       p: (props) => <p className="prose" {...props} />,     }}   >     {children}   </HTMLProvider> ); 
       import { HTMLProvider } from "solid-intlayer/html"; export const AppProvider = (props) => (   <HTMLProvider     components={{       p: (props) => <p className="prose" {...props} />,     }}   >     {props.children}   </HTMLProvider> ); 
      import { createIntlayerHTMLProvider } from "angular-intlayer/html";export const appConfig: ApplicationConfig = {  providers: [    createIntlayerHTMLProvider({      components: {        p: { class: "prose" },        CustomLink: { href: "/details" },      },    }),  ],};
      import { HTMLRenderer } from "react-intlayer/html";<HTMLRenderer components={{ p: MyCustomP }}>  {"<p>Hello World</p>"}</HTMLRenderer>
      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 { renderHTML } from "react-intlayer/html";const jsx = renderHTML("<p>Hello</p>", { components: { p: 'div' } });
       <script setup> import { HTMLRenderer } from "vue-intlayer/html"; </script> <template>   <HTMLRenderer content="<p>Hello World</p>" /> </template> 
      <script lang="ts">import { HTMLRenderer } from "svelte-intlayer/html";</script><HTMLRenderer value="<p>Hello World</p>" />
      <script lang="ts">import { useHTMLRenderer } from "svelte-intlayer/html";const render = useHTMLRenderer();</script>{@html render("<p>Hello World</p>")}
      <script lang="ts">import { renderHTML } from "svelte-intlayer/html";</script>{@html renderHTML("<p>Hello World</p>")}
       import { HTMLRenderer } from "preact-intlayer/html"; <HTMLRenderer>   {"<p>Hello World</p>"} </HTMLRenderer> 
       import { useHTMLRenderer } from "preact-intlayer/html"; const render = useHTMLRenderer(); return <div>{render("<p>Hello World</p>")}</div>; 
       import { renderHTML } from "preact-intlayer/html"; return <div>{renderHTML("<p>Hello World</p>")}</div>; 
       import { HTMLRenderer } from "solid-intlayer/html"; <HTMLRenderer>   {"<p>Hello World</p>"} </HTMLRenderer> 
       import { useHTMLRenderer } from "solid-intlayer/html"; const render = useHTMLRenderer(); return <div>{render("<p>Hello World</p>")}</div>; 
       import { renderHTML } from "solid-intlayer/html"; return <div>{renderHTML("<p>Hello World</p>")}</div>; 
      import { IntlayerHTMLService } from "angular-intlayer";export class MyComponent {  constructor(private markdownService: IntlayerHTMLService) {}  renderHTML(html: string) {    return this.markdownService.renderMarkdown(html);  }}