Auteur:
    Aymeric PINEAU
    Création:2026-01-20Dernière mise à jour:2026-03-24

    Contenu HTML / HTML dans Intlayer

    Intlayer prend en charge le contenu HTML, vous permettant d'intégrer du contenu riche et structuré dans vos dictionnaires. Ce contenu peut être rendu avec des balises HTML standard ou remplacé par des composants personnalisés à l'exécution.

    Déclarer du contenu HTML

    Vous pouvez déclarer du contenu HTML à l'aide de la fonction html ou simplement sous forme de chaîne de caractères.

    Utilisez la fonction html pour déclarer explicitement du contenu HTML. Cela garantit que les balises standard sont mappées correctement même si la détection automatique est désactivée.

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

const htmlDictionary = {
key: "app",
contentAutoTransformation: true, // peut être défini dans le fichier de configuration
content: {
  myHtmlContent:  html("<p>Hello <strong>World</strong></p>"),
},
} satisfies Dictionary;

export default htmlDictionary;

    Si la chaîne contient des balises HTML courantes (par exemple, <p>, <div>, <strong>, etc.), Intlayer la transformera automatiquement.

    htmlDictionary.content.ts
    export default {
key: "app",
contentAutoTransformation: true, // peut être défini dans le fichier de configuration
content: {
  myHtmlContent:  "<p>Hello <strong>World</strong></p>",
},
};

    Importez du contenu HTML à partir de fichiers. Notez qu'actuellement la fonction file() renvoie une chaîne, qui sera automatiquement détectée comme HTML si elle contient des balises.

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

    Le nœud html()

    La fonction html() est une nouvelle fonctionnalité d'Intlayer v8 qui vous permet de définir explicitement du contenu HTML dans vos dictionnaires. Bien qu'Intlayer puisse souvent détecter automatiquement le contenu HTML, l'utilisation de la fonction html() offre plusieurs avantages :

    • Sécurité de typage : La fonction html() vous permet de définir les props attendues pour les composants personnalisés, offrant une meilleure autocomplétion et une vérification de type dans votre éditeur.
    • Déclaration explicite : Elle garantit qu'une chaîne est toujours traitée comme du HTML, même si elle ne contient pas de balises HTML standard qui déclencheraient l'auto-détection.
    • Définition de composants personnalisés : Vous pouvez passer un deuxième argument à html() pour définir les composants personnalisés et leurs types de props attendus.
    typescript
    import { html } from "intlayer";

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

    Lors de l'utilisation de la méthode .use() sur un nœud HTML, les composants que vous fournissez seront vérifiés par rapport à la définition fournie dans la fonction html() (si disponible).

    Rendu du HTML

    Le rendu peut être géré automatiquement par le système de contenu d'Intlayer ou manuellement à l'aide d'outils spécialisés.

    Rendu Automatique (en utilisant useIntlayer)

    Lorsque vous accédez au contenu via useIntlayer, les nœuds HTML sont déjà préparés pour le rendu.

    Les nœuds HTML peuvent être rendus directement en JSX. Les balises standard fonctionnent automatiquement.

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

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

    Utilisez la méthode .use() pour fournir des composants personnalisés ou remplacer des balises :

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

    Dans Vue, le contenu HTML peut être rendu à l'aide du composant intégré component.

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

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

    Utilisez .use() pour les remplacements :

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

    Svelte rend les nœuds HTML sous forme de chaînes de caractères. Utilisez {@html} pour les rendre.

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

{@html $content.myHtmlContent}

    Preact prend en charge les nœuds HTML directement dans le JSX.

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

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

    Solid prend en charge les nœuds HTML directement dans le JSX.

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

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

    Angular utilise la directive [innerHTML] pour rendre le contenu 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");
}

    Utilisez la méthode .use() pour fournir des composants personnalisés ou remplacer des balises :

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

    Configuration Globale avec HTMLProvider

    Vous pouvez configurer le rendu HTML globalement pour l'ensemble de votre application. C'est idéal pour définir des composants personnalisés qui doivent être disponibles dans tout le contenu 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>
);

    Vous pouvez également utiliser votre propre moteur de rendu 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>
);
    L'importation dynamique de votre moteur de rendu HTML est un bon moyen de réduire la taille du bundle de votre application.
    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");

    Vous pouvez également utiliser votre propre moteur de rendu 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");
    L'importation dynamique de votre moteur de rendu HTML est un bon moyen de réduire la taille du bundle de votre application.
    App.svelte
    <script lang="ts">
import { HTMLProvider } from "svelte-intlayer/html";
import MyCustomP from "./MyCustomP.svelte";
</script>

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

    Vous pouvez également utiliser votre propre moteur de rendu 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>
    L'importation dynamique de votre moteur de rendu HTML est un bon moyen de réduire la taille du bundle de votre application.
    AppProvider.tsx
    import { HTMLProvider } from "preact-intlayer/html";

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

    Vous pouvez également utiliser votre propre moteur de rendu 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>
);
    L'importation dynamique de votre moteur de rendu HTML est un bon moyen de réduire la taille du bundle de votre application.
    AppProvider.tsx
    import { HTMLProvider } from "solid-intlayer/html";

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

    Vous pouvez également utiliser votre propre moteur de rendu 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>
);
    L'importation dynamique de votre moteur de rendu HTML est un bon moyen de réduire la taille du bundle de votre application.
    app.config.ts
    import { createIntlayerHTMLProvider } from "angular-intlayer/html";

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

    Vous pouvez également utiliser votre propre moteur de rendu 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);
    },
  }),
],
};
    L'importation dynamique de votre moteur de rendu HTML est un bon moyen de réduire la taille du bundle de votre application.

    Rendu Manuel et Outils Avancés

    Si vous avez besoin de rendre des chaînes HTML brutes ou si vous voulez plus de contrôle sur le mappage des composants, utilisez les outils suivants.

    Composant <HTMLRenderer />

    Rendre une chaîne HTML avec des composants spécifiques.

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

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

    Hook useHTMLRenderer()

    Obtenir une fonction de rendu pré-configurée.

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

    Utilitaire renderHTML()

    Utilitaire autonome pour le rendu en dehors des composants.

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

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

    Composant <HTMLRenderer />

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

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

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

    Utilitaire renderHTML()

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

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

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

    Utilitaire renderHTML()

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

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

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

    Utilitaire renderHTML()

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

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

    Service IntlayerHTMLService

    Rendre une chaîne HTML à l'aide du service.

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

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

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

    Référence des Options

    Ces options peuvent être passées à HTMLProvider, HTMLRenderer, useHTMLRenderer et renderHTML.

    Option Type Défaut Description
    components Record<string, any> {} Une carte des balises HTML ou des noms de composants personnalisés vers les composants.
    renderHTML Function null Une fonction de rendu personnalisée pour remplacer complètement le parseur HTML par défaut (uniquement pour Vue/Svelte).
    Note : Pour React et Preact, les balises HTML standard sont fournies automatiquement. Vous n'avez besoin de passer la prop components que si vous souhaitez les remplacer ou ajouter des composants personnalisés.
    MarkdownRécupération de fonction