Autor:
    Aymeric PINEAU
    Erstellung:2026-01-20Letzte Aktualisierung:2026-03-24

    HTML-Inhalte / HTML in Intlayer

    Intlayer unterstützt HTML-Inhalte, sodass Sie reichhaltige, strukturierte Inhalte in Ihre Dictionaries einbetten können. Diese Inhalte können mit Standard-HTML-Tags gerendert oder zur Laufzeit durch benutzerdefinierte Komponenten ersetzt werden.

    HTML-Inhalte deklarieren

    Sie können HTML-Inhalte mit der html-Funktion oder einfach als String deklarieren.

    Verwenden Sie die html-Funktion, um HTML-Inhalte explizit zu deklarieren. Dies stellt sicher, dass Standard-Tags korrekt zugeordnet werden, selbst wenn die automatische Erkennung deaktiviert ist.

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

const htmlDictionary = {
key: "app",
contentAutoTransformation: true, // kann in der Konfigurationsdatei festgelegt werden
content: {
  myHtmlContent:  html("<p>Hello <strong>World</strong></p>"),
},
} satisfies Dictionary;

export default htmlDictionary;

    Wenn der String gängige HTML-Tags enthält (z. B. <p>, <div>, <strong> usw.), wird Intlayer ihn automatisch umwandeln.

    htmlDictionary.content.ts
    export default {
key: "app",
contentAutoTransformation: true, // kann in der Konfigurationsdatei festgelegt werden
content: {
  myHtmlContent:  "<p>Hello <strong>World</strong></p>",
},
};

    Importieren Sie HTML-Inhalte aus Dateien. Beachten Sie, dass die Funktion file() derzeit einen String zurückgibt, der automatisch als HTML erkannt wird, wenn er Tags enthält.

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

    Der html()-Knoten

    Die html()-Funktion ist ein neues Feature in Intlayer v8, mit dem Sie HTML-Inhalte in Ihren Wörterbüchern explizit definieren können. Während Intlayer HTML-Inhalte oft automatisch erkennt, bietet die Verwendung der html()-Funktion mehrere Vorteile:

    • Typsicherheit: Mit der html()-Funktion können Sie die erwarteten Props für benutzerdefinierte Komponenten definieren, was eine bessere Autovervollständigung und Typprüfung in Ihrem Editor ermöglicht.
    • Explizite Deklaration: Sie stellt sicher, dass eine Zeichenfolge immer als HTML behandelt wird, auch wenn sie keine Standard-HTML-Tags enthält, die die automatische Erkennung auslösen würden.
    • Definition benutzerdefinierter Komponenten: Sie können ein zweites Argument an html() übergeben, um die benutzerdefinierten Komponenten und deren erwartete Prop-Typen zu definieren.
    typescript
    import { html } from "intlayer";

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

    Wenn Sie die Methode .use() auf einem HTML-Knoten verwenden, werden die von Ihnen bereitgestellten Komponenten gegen die in der html()-Funktion bereitgestellte Definition (falls verfügbar) geprüft.

    HTML rendern

    Das Rendern kann automatisch durch das Inhaltssystem von Intlayer oder manuell mit spezialisierten Tools erfolgen.

    Automatisches Rendern (mit useIntlayer)

    Wenn Sie auf Inhalte über useIntlayer zugreifen, sind HTML-Knoten bereits für das Rendering vorbereitet.

    HTML-Knoten können direkt als JSX gerendert werden. Standard-Tags funktionieren automatisch.

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

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

    Verwenden Sie die .use()-Methode, um benutzerdefinierte Komponenten bereitzustellen oder Tags zu überschreiben:

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

    In Vue können HTML-Inhalte mit der integrierten component-Komponente gerendert werden.

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

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

    Verwenden Sie .use() für Overrides:

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

    Svelte rendert HTML-Knoten als Strings. Verwenden Sie {@html}, um sie zu rendern.

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

{@html $content.myHtmlContent}

    Preact unterstützt HTML-Knoten direkt im JSX.

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

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

    Solid unterstützt HTML-Knoten direkt im JSX.

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

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

    Angular verwendet die [innerHTML]-Direktive, um HTML-Inhalte zu rendern.

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

    Verwenden Sie die .use()-Methode, um benutzerdefinierte Komponenten bereitzustellen oder Tags zu überschreiben:

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

    Globale Konfiguration mit HTMLProvider

    Sie können das HTML-Rendering global für Ihre gesamte Anwendung konfigurieren. Dies ist ideal, um benutzerdefinierte Komponenten zu definieren, die in allen HTML-Inhalten verfügbar sein sollen.

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

    Sie können auch Ihren eigenen HTML-Renderer verwenden:

    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>
);
    Das dynamische Importieren Ihres HTML-Renderers ist eine gute Möglichkeit, die Bundle-Größe Ihrer Anwendung zu reduzieren.
    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");

    Sie können auch Ihren eigenen HTML-Renderer verwenden:

    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");
    Das dynamische Importieren Ihres HTML-Renderers ist eine gute Möglichkeit, die Bundle-Größe Ihrer Anwendung zu reduzieren.
    App.svelte
    <script lang="ts">
import { HTMLProvider } from "svelte-intlayer/html";
import MyCustomP from "./MyCustomP.svelte";
</script>

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

    Sie können auch Ihren eigenen HTML-Renderer verwenden:

    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>
    Das dynamische Importieren Ihres HTML-Renderers ist eine gute Möglichkeit, die Bundle-Größe Ihrer Anwendung zu reduzieren.
    AppProvider.tsx
    import { HTMLProvider } from "preact-intlayer/html";

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

    Sie können auch Ihren eigenen HTML-Renderer verwenden:

    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>
);
    Das dynamische Importieren Ihres HTML-Renderers ist eine gute Möglichkeit, die Bundle-Größe Ihrer Anwendung zu reduzieren.
    AppProvider.tsx
    import { HTMLProvider } from "solid-intlayer/html";

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

    Sie können auch Ihren eigenen HTML-Renderer verwenden:

    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>
);
    Das dynamische Importieren Ihres HTML-Renderers ist eine gute Möglichkeit, die Bundle-Größe Ihrer Anwendung zu reduzieren.
    app.config.ts
    import { createIntlayerHTMLProvider } from "angular-intlayer/html";

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

    Sie können auch Ihren eigenen HTML-Renderer verwenden:

    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);
    },
  }),
],
};
    Das dynamische Importieren Ihres HTML-Renderers ist eine gute Möglichkeit, die Bundle-Größe Ihrer Anwendung zu reduzieren.

    Manuelles Rendering & Erweiterte Tools

    Wenn Sie rohe HTML-Strings rendern müssen oder mehr Kontrolle über die Komponentenzuordnung benötigen, verwenden Sie die folgenden Tools.

    <HTMLRenderer /> Komponente

    Rendern Sie einen HTML-String mit spezifischen Komponenten.

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

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

    useHTMLRenderer() Hook

    Holen Sie sich eine vorkonfigurierte Renderer-Funktion.

    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() Utility

    Eigenständiges Utility zum Rendern außerhalb von Komponenten.

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

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

    <HTMLRenderer /> Komponente

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

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

    <HTMLRenderer /> Komponente

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

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

    useHTMLRenderer() Hook

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

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

    renderHTML() Utility

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

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

    <HTMLRenderer /> Komponente

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

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

    useHTMLRenderer() Hook

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

const render = useHTMLRenderer();

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

    renderHTML() Utility

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

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

    <HTMLRenderer /> Komponente

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

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

    useHTMLRenderer() Hook

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

const render = useHTMLRenderer();

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

    renderHTML() Utility

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

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

    IntlayerHTMLService Service

    Rendern Sie einen HTML-String mit dem Service.

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

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

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

    Optionen-Referenz

    Diese Optionen können an HTMLProvider, HTMLRenderer, useHTMLRenderer und renderHTML übergeben werden.

    Option Typ Standard Beschreibung
    components Record<string, any> {} Eine Map von HTML-Tags oder benutzerdefinierten Komponentennamen zu Komponenten.
    renderHTML Function null Eine benutzerdefinierte Rendering-Funktion, um den Standard-HTML-Parser vollständig zu ersetzen (Nur für Vue/Svelte Provider).
    Hinweis: Für React und Preact werden Standard-HTML-Tags automatisch bereitgestellt. Sie müssen das components-Prop nur übergeben, wenn Sie sie überschreiben oder benutzerdefinierte Komponenten hinzufügen möchten.
    MarkdownFunktionsabruf