Autore:
    Aymeric PINEAU
    Creazione:2026-01-20Ultimo aggiornamento:2026-09-27

    Contenuto HTML / HTML in Intlayer

    Intlayer supporta contenuti HTML, permettendoti di incorporare contenuti ricchi e strutturati all'interno dei tuoi dizionari. Questi contenuti possono essere renderizzati con tag HTML standard o sostituiti con componenti personalizzati a runtime.

    Dichiarare contenuti HTML

    Puoi dichiarare contenuti HTML usando la funzione html o semplicemente come stringa.

    Usa la funzione html per dichiarare esplicitamente contenuti HTML. Questo garantisce che i tag standard siano mappati correttamente anche se il rilevamento automatico è disabilitato.

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

const htmlDictionary = {
key: "app",
contentAutoTransformation: true, // può essere impostato nel file di configurazione
content: {
  myHtmlContent:  html("<p>Ciao <strong>Mondo</strong></p>"),
},
} satisfies Dictionary;

export default htmlDictionary;

    Se la stringa contiene tag HTML comuni (ad esempio, <p>, <div>, <strong>, ecc.), Intlayer la trasformerà automaticamente.

    htmlDictionary.content.ts
    export default {
key: "app",
contentAutoTransformation: true, // può essere impostato nel file di configurazione
content: {
  myHtmlContent:  "<p>Ciao <strong>Mondo</strong></p>",
},
};

    Importa contenuti HTML da file. Nota che attualmente la funzione file() restituisce una stringa, che verrà rilevata automaticamente come HTML se contiene tag.

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

    Il nodo html()

    La funzione html() è una nuova funzionalità di Intlayer v8 che consente di definire esplicitamente il contenuto HTML nei dizionari. Sebbene Intlayer sia spesso in grado di rilevare automaticamente il contenuto HTML, l'uso della funzione html() offre diversi vantaggi:

    • Sicurezza dei tipi: La funzione html() consente di definire le prop attese per i componenti personalizzati, offrendo un migliore completamento automatico e controllo dei tipi nel proprio editor.
    • Dichiarazione esplicita: Garantisce che una stringa venga sempre trattata come HTML, anche se non contiene tag HTML standard che attiverebbero il rilevamento automatico.
    • Definizione di componenti personalizzati: È possibile passare un secondo argomento a html() per definire i componenti personalizzati e i tipi di prop attesi.
    typescript
    import { html } from "intlayer";

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

    Quando si utilizza il metodo .use() su un nodo HTML, i componenti forniti verranno controllati rispetto alla definizione fornita nella funzione html() (se disponibile).

    Rendering dell'HTML

    Il rendering può essere gestito automaticamente dal sistema di contenuti di Intlayer o manualmente utilizzando strumenti specializzati.

    Rendering automatico (usando useIntlayer)

    Quando accedi al contenuto tramite useIntlayer, i nodi HTML sono già pronti per il rendering.

    I nodi HTML possono essere renderizzati direttamente come JSX. I tag standard funzionano automaticamente.

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

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

    Usa il metodo .use() per fornire componenti personalizzati o sovrascrivere i tag:

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

    In Vue, i contenuti HTML possono essere renderizzati usando il built-in component.

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

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

    Usa .use() per le sovrascritture:

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

    Svelte rende i nodi HTML come stringhe. Usa {@html} per renderizzarli.

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

{@html $content.myHtmlContent}

    Preact supporta i nodi HTML direttamente nel JSX.

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

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

    Solid supporta i nodi HTML direttamente nel JSX.

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

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

    Angular utilizza la direttiva [innerHTML] per renderizzare contenuti 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");
}

    Usa il metodo .use() per fornire componenti personalizzati o sovrascrivere i tag:

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

    In Remix 3, i nodi HTML si risolvono in una stringa HTML. Inseriscila con la prop innerHTML di Remix JSX o con html.raw in una vista html-template.

    src/views/home.tsx
    import { useIntlayer } from "remix-intlayer";

export const HomePage = () => () => {
const { myHtmlContent } = useIntlayer("app");

return <div innerHTML={myHtmlContent.value} />;
};
    src/views/home.ts
    import { html } from "remix/html-template";
import { useIntlayer } from "remix-intlayer";

export const renderHomePage = () => {
const { myHtmlContent } = useIntlayer("app");

return html.raw`<div>${myHtmlContent.value}</div>`;
};
    Remix esegue l'escape dei valori interpolati per impostazione predefinita. innerHTML e html.raw sono i due meccanismi di esclusione, che è ciò di cui ha bisogno una stringa HTML.

    Usa il metodo .use() per sovrascrivere i tag o mappare componenti personalizzati. Le sovrascritture sono funzioni che restituiscono una stringa HTML:

    tsx
    <div
innerHTML={myHtmlContent.use({
  p: ({ children }) => `<p class="prose">${children}</p>`,
  CustomLink: ({ children }) => `<a href="/details">${children}</a>`,
})}
/>

    In Astro, i nodi HTML si risolvono in una stringa HTML. Inseriscila con la direttiva set:html nel template o con innerHTML in uno <script> client.

    src/pages/index.astro
    ---
import { useIntlayer } from "astro-intlayer";

const { myHtmlContent } = useIntlayer("app");
---

<div set:html={myHtmlContent.value} />
    src/components/Content.astro
    <div id="content"></div>

<script>
import { useIntlayer } from "astro-intlayer";

const { myHtmlContent } = useIntlayer("app");

document.querySelector("#content")!.innerHTML = myHtmlContent.value;
</script>
    Astro esegue l'escape di {espressioni} per impostazione predefinita. set:html è il meccanismo di esclusione, che è ciò di cui ha bisogno una stringa HTML.

    Usa il metodo .use() per sovrascrivere i tag o mappare componenti personalizzati. Le sovrascritture sono funzioni che restituiscono una stringa HTML:

    astro
    <div
set:html={myHtmlContent.use({
  p: ({ children }) => `<p class="prose">${children}</p>`,
  CustomLink: ({ children }) => `<a href="/details">${children}</a>`,
})}
/>

    Configurazione globale con HTMLProvider

    Puoi configurare il rendering HTML a livello globale per l'intera applicazione. Questo è ideale per definire componenti personalizzati che dovrebbero essere disponibili in tutti i contenuti 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>
);

    Puoi anche utilizzare il tuo motore di rendering 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>
);
    Importare dinamicamente il tuo renderer HTML è un ottimo modo per ridurre le dimensioni del bundle della tua applicazione.
    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");

    Puoi anche utilizzare il tuo motore di rendering 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");
    Importare dinamicamente il tuo renderer HTML è un ottimo modo per ridurre le dimensioni del bundle della tua applicazione.
    App.svelte
    <script lang="ts">
import { HTMLProvider } from "svelte-intlayer/html";
import MyCustomP from "./MyCustomP.svelte";
</script>

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

    Puoi anche utilizzare il tuo motore di rendering 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>
    Importare dinamicamente il tuo renderer HTML è un ottimo modo per ridurre le dimensioni del bundle della tua applicazione.
    AppProvider.tsx
    import { HTMLProvider } from "preact-intlayer/html";

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

    Puoi anche utilizzare il tuo motore di rendering 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>
);
    Importare dinamicamente il tuo renderer HTML è un ottimo modo per ridurre le dimensioni del bundle della tua applicazione.
    AppProvider.tsx
    import { HTMLProvider } from "solid-intlayer/html";

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

    Puoi anche utilizzare il tuo motore di rendering 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>
);
    Importare dinamicamente il tuo renderer HTML è un ottimo modo per ridurre le dimensioni del bundle della tua applicazione.
    app.config.ts
    import { createIntlayerHTMLProvider } from "angular-intlayer/html";

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

    Puoi anche utilizzare il tuo motore di rendering 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);
    },
  }),
],
};
    Importare dinamicamente il tuo renderer HTML è un ottimo modo per ridurre le dimensioni del bundle della tua applicazione.

    Remix non ha un albero dei componenti per contenere un provider, quindi la configurazione viene installata una sola volta, come singleton, all'avvio del server. Configura il renderer restituito da useHTMLRenderer(). I nodi html restituiti da useIntlayer vengono renderizzati così come sono; sovrascrivi i loro tag per nodo con .use().

    src/router.ts
    import { installIntlayerHTML } from "remix-intlayer/html";

installIntlayerHTML({
renderHTML: (html) => html.replaceAll("<p>", '<p class="prose">'),
});
    Usa installIntlayerHTMLDynamic(async () => …) per caricare il renderer in modo lazy; il loader viene eseguito solo alla prima chiamata.

    Astro non ha un albero dei componenti per contenere un provider, quindi la configurazione viene installata una sola volta, come singleton, nel middleware (server) e in uno <script> client (browser). Configura il renderer restituito da useHTMLRenderer(). I nodi html restituiti da useIntlayer vengono renderizzati così come sono; sovrascrivi i loro tag per nodo con .use().

    src/middleware.ts
    import { installIntlayerHTML } from "astro-intlayer/html";
import { defineMiddleware } from "astro:middleware";

// Viene eseguito una sola volta all'avvio del server; il middleware Intlayer stesso è
// registrato dall'integrazione, prima di questo file.
installIntlayerHTML({
renderHTML: (html) => html.replaceAll("<p>", '<p class="prose">'),
});

export const onRequest = defineMiddleware((_context, next) => next());
    Usa installIntlayerHTMLDynamic(async () => …) per caricare il renderer in modo lazy; il loader viene eseguito solo alla prima chiamata.

    Rendering manuale e strumenti avanzati

    Se hai bisogno di renderizzare stringhe HTML grezze o di avere un controllo maggiore sulla mappatura dei componenti, usa i seguenti strumenti.

    Componente <HTMLRenderer />

    Esegui il rendering di una stringa HTML con componenti specifici.

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

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

    Hook useHTMLRenderer()

    Ottieni una funzione di rendering preconfigurata.

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

    Utility renderHTML()

    Utility standalone per il rendering al di fuori dei componenti.

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

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

    Componente <HTMLRenderer />

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

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

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

    Utility renderHTML()

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

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

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

    Utility renderHTML()

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

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

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

    Utility renderHTML()

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

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

    Servizio IntlayerHTMLService

    Renderizza una stringa HTML utilizzando il servizio.

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

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

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

    Hook useHTMLRenderer()

    Ottieni una funzione di rendering preconfigurata da installIntlayerHTML(). Restituisce una stringa HTML.

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

const renderHTML = useHTMLRenderer();

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

    Utility renderHTML()

    Utility autonoma che ignora la configurazione globale.

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

const html = renderHTML("<p>Hello</p>");

    Hook useHTMLRenderer()

    Ottieni una funzione di rendering preconfigurata da installIntlayerHTML(). Restituisce una stringa HTML.

    astro
    ---
import { useHTMLRenderer } from "astro-intlayer/html";

const renderHTML = useHTMLRenderer();
---

<div set:html={renderHTML("<p>Hello <strong>World</strong></p>")} />

    Utility renderHTML()

    Utility autonoma che ignora la configurazione globale.

    astro
    ---
import { renderHTML } from "astro-intlayer/html";

const html = renderHTML("<p>Hello</p>");
---

<div set:html={html} />

    Riferimento delle opzioni

    Queste opzioni possono essere passate a HTMLProvider, HTMLRenderer, useHTMLRenderer, e renderHTML.

    OpzioneTipoPredefinitoDescrizione
    componentsRecord<string, any>{}Una mappa che associa tag HTML o nomi di componenti personalizzati ai componenti.
    renderHTMLFunctionnullUna funzione di rendering personalizzata per sostituire completamente il parser HTML predefinito (provider Vue, Svelte, Remix e Astro).
    Nota: per React e Preact, i tag HTML standard sono forniti automaticamente. È necessario passare la prop components solo se si desidera sovrascriverli o aggiungere componenti personalizzati.
    MarkdownRecupero funzione