Autor:
    Aymeric PINEAU
    Data utworzenia:2026-01-20Ostatnia aktualizacja:2026-03-24

    Zawartość HTML / HTML w Intlayer

    Intlayer obsługuje zawartość HTML, umożliwiając osadzanie bogatej, strukturalnej treści w Twoich słownikach. Ta zawartość może być renderowana za pomocą standardowych tagów HTML lub zastępowana niestandardowymi komponentami w czasie wykonywania.

    Deklarowanie treści HTML

    Możesz zadeklarować treść HTML, używając funkcji html lub po prostu jako łańcuch znaków.

    Użyj funkcji html, aby jawnie zadeklarować zawartość HTML. Zapewnia to poprawne odwzorowanie standardowych tagów, nawet jeśli automatyczne wykrywanie jest wyłączone.

    htmlDictionary.content.ts
    import { html, type Dictionary } from "intlayer";

const htmlDictionary = {
key: "app",
contentAutoTransformation: true, // można ustawić w pliku konfiguracyjnym
content: {
  myHtmlContent:  html("<p>Witaj <strong>świecie</strong></p>"),
},
} satisfies Dictionary;

export default htmlDictionary;

    Jeśli ciąg zawiera typowe tagi HTML (np. <p>, <div>, <strong> itd.), Intlayer automatycznie go przekształci.

    htmlDictionary.content.ts
    export default {
key: "app",
contentAutoTransformation: true, // można ustawić w pliku konfiguracyjnym
content: {
  myHtmlContent:  "<p>Witaj <strong>świecie</strong></p>",
},
};

    Importuj zawartość HTML z plików. Zauważ, że obecnie funkcja file() zwraca ciąg znaków, który zostanie automatycznie rozpoznany jako HTML, jeśli zawiera tagi.

    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")),
    pl: html(file("./content.pl.html")),
  }),
},
};

    Węzeł html()

    Funkcja html() to nowa funkcja w Intlayer v8, która pozwala na jawne definiowanie treści HTML w słownikach. Chociaż Intlayer często potrafi automatycznie wykryć treść HTML, użycie funkcji html() zapewnia kilka korzyści:

    • Bezpieczeństwo typów: Funkcja html() pozwala zdefiniować oczekiwane właściwości (props) dla niestandardowych komponentów, co zapewnia lepsze autouzupełnianie i sprawdzanie typów w edytorze.
    • Jawna deklaracja: Gwarantuje, że ciąg znaków będzie zawsze traktowany jako HTML, nawet jeśli nie zawiera standardowych tagów HTML, które wyzwoliłyby automatyczne wykrywanie.
    • Definiowanie niestandardowych komponentów: Możesz przekazać drugi argument do html(), aby zdefiniować niestandardowe komponenty i ich oczekiwane typy właściwości.
    typescript
    import { html } from "intlayer";

const myContent = html(
  "<MyCustomComponent title='Witaj'>Świecie</MyCustomComponent>",
  {
    MyCustomComponent: {
      title: "string",
      children: "node",
    },
  }
);

    Podczas korzystania z metody .use() na węźle HTML, dostarczone komponenty zostaną sprawdzone pod kątem definicji podanej w funkcji html() (jeśli jest dostępna).

    Renderowanie HTML

    Renderowaniem można zająć się automatycznie za pomocą systemu treści Intlayer lub ręcznie przy użyciu specjalistycznych narzędzi.

    Automatyczne renderowanie (z użyciem useIntlayer)

    Kiedy uzyskujesz dostęp do treści za pomocą useIntlayer, węzły HTML są już przygotowane do renderowania.

    Węzły HTML można renderować bezpośrednio jako JSX. Standardowe tagi działają automatycznie.

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

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

    Użyj metody .use(), aby dostarczyć własne komponenty lub nadpisać tagi:

    tsx
    {myHtmlContent.use({
p: (props) => <p className="prose" {...props} />,
CustomLink: ({ children }) => <a href="/details">{children}</a>,
})}

    W Vue zawartość HTML można renderować przy użyciu wbudowanego komponentu component.

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

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

    Użyj .use() do nadpisania:

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

    Svelte renderuje węzły HTML jako ciągi znaków. Użyj {@html}, aby je wyrenderować.

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

{@html $content.myHtmlContent}

    Preact obsługuje węzły HTML bezpośrednio w JSX.

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

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

    Solid obsługuje węzły HTML bezpośrednio w JSX.

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

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

    Angular wykorzystuje dyrektywę [innerHTML] do renderowania zawartości 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");
}

    Użyj metody .use(), aby dostarczyć własne komponenty lub nadpisać tagi:

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

    Konfiguracja globalna z HTMLProvider

    Możesz skonfigurować renderowanie HTML globalnie dla całej aplikacji. To idealne rozwiązanie do zdefiniowania niestandardowych komponentów, które powinny być dostępne we wszystkich treściach 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>
);

    Możesz również użyć własnego silnika renderującego 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>
);
    Dynamiczne importowanie silnika renderującego HTML to dobry sposób na zmniejszenie rozmiaru paczki (bundle) Twojej aplikacji.
    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");

    Możesz również użyć własnego silnika renderującego 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");
    Dynamiczne importowanie silnika renderującego HTML to dobry sposób na zmniejszenie rozmiaru paczki (bundle) Twojej aplikacji.
    App.svelte
    <script lang="ts">
import { HTMLProvider } from "svelte-intlayer/html";
import MyCustomP from "./MyCustomP.svelte";
</script>

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

    Możesz również użyć własnego silnika renderującego 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>
    Dynamiczne importowanie silnika renderującego HTML to dobry sposób na zmniejszenie rozmiaru paczki (bundle) Twojej aplikacji.
    AppProvider.tsx
    import { HTMLProvider } from "preact-intlayer/html";

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

    Możesz również użyć własnego silnika renderującego 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>
);
    Dynamiczne importowanie silnika renderującego HTML to dobry sposób na zmniejszenie rozmiaru paczki (bundle) Twojej aplikacji.
    AppProvider.tsx
    import { HTMLProvider } from "solid-intlayer/html";

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

    Możesz również użyć własnego silnika renderującego 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>
);
    Dynamiczne importowanie silnika renderującego HTML to dobry sposób na zmniejszenie rozmiaru paczki (bundle) Twojej aplikacji.
    app.config.ts
    import { createIntlayerHTMLProvider } from "angular-intlayer/html";

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

    Możesz również użyć własnego silnika renderującego 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);
    },
  }),
],
};
    Dynamiczne importowanie silnika renderującego HTML to dobry sposób na zmniejszenie rozmiaru paczki (bundle) Twojej aplikacji.

    Ręczne renderowanie i zaawansowane narzędzia

    Jeśli musisz renderować surowe łańcuchy HTML lub potrzebujesz większej kontroli nad mapowaniem komponentów, użyj poniższych narzędzi.

    Komponent <HTMLRenderer />

    Renderuj łańcuch HTML przy użyciu określonych komponentów.

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

<HTMLRenderer components={{ p: MyCustomP }}>
{"<p>Hello World</p>"}
</HTMLRenderer>

    Hook useHTMLRenderer()

    Uzyskaj wstępnie skonfigurowaną funkcję renderującą.

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

const renderHTML = useHTMLRenderer({
components: { strong: (props) => <strong {...props} className="text-red-500" /> }
});

return renderHTML("<p>Witaj <strong>świecie</strong></p>");

    Narzędzie renderHTML()

    Samodzielne narzędzie do renderowania poza komponentami.

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

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

    Komponent <HTMLRenderer />

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

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

    Komponent <HTMLRenderer />

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

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

    Hook useHTMLRenderer()

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

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

    Narzędzie renderHTML()

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

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

    Komponent <HTMLRenderer />

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

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

    Hook useHTMLRenderer()

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

const render = useHTMLRenderer();

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

    Narzędzie renderHTML()

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

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

    Komponent <HTMLRenderer />

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

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

    Hook useHTMLRenderer()

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

const render = useHTMLRenderer();

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

    Narzędzie renderHTML()

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

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

    Usługa IntlayerHTMLService

    Renderuje ciąg HTML przy użyciu usługi.

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

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

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

    Referencja opcji

    Te opcje mogą być przekazane do HTMLProvider, HTMLRenderer, useHTMLRenderer i renderHTML.

    Opcja Typ Domyślnie Opis
    components Record<string, any> {} Mapa tagów HTML lub niestandardowych nazw komponentów do odpowiadających im komponentów.
    renderHTML Function null Funkcja renderująca, która całkowicie zastąpi domyślny parser HTML (tylko dla providerów Vue/Svelte).
    Uwaga: Dla React i Preact standardowe tagi HTML są dostarczane automatycznie. Prop components trzeba przekazać tylko wtedy, gdy chcesz je nadpisać lub dodać niestandardowe komponenty.
    MarkdownPobieranie funkcji