\n\n \n \n Svelte rend les nœuds HTML sous forme de chaînes de caractères. Utilisez `{@html}` pour les rendre.\n\n ```svelte\n \n\n {@html $content.myHtmlContent}\n ```\n\n \n \n Preact prend en charge les nœuds HTML directement dans le JSX.\n\n ```tsx fileName=\"App.tsx\"\n import { useIntlayer } from \"preact-intlayer\";\n\n const AppContent = () => {\n const { myHtmlContent } = useIntlayer(\"app\");\n return \n \n Solid prend en charge les nœuds HTML directement dans le JSX.\n\n ```tsx fileName=\"App.tsx\"\n import { useIntlayer } from \"solid-intlayer\";\n\n const AppContent = () => {\n const { myHtmlContent } = useIntlayer(\"app\");\n return \n \n Angular utilise la directive `[innerHTML]` pour rendre le contenu 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 Utilisez la méthode `.use()` pour fournir des composants personnalisés ou remplacer des balises :\n\n ```typescript\n content().myHtmlContent.use({\n p: { class: \"prose\" },\n CustomLink: { href: \"/details\" },\n })\n ```\n\n \n\n\n## Configuration Globale avec `HTMLProvider`\n\nVous 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.\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 Vous pouvez également utiliser votre propre moteur de rendu HTML :\n\n ```tsx fileName=\"AppProvider.tsx\"\n import { HTMLProvider } from \"react-intlayer/html\";\n\n export const AppProvider = ({ children }) => (\n {\n const { renderHTML } = await import('react-intlayer/html');\n return renderHTML(html);\n }}\n >\n {children}\n \n );\n ```\n\n > L'importation dynamique de votre moteur de rendu HTML est un bon moyen de réduire la taille du bundle de votre application.\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 Vous pouvez également utiliser votre propre moteur de rendu HTML :\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 renderHTML: async (html) => {\n const { renderHTML } = await import('vue-intlayer/html');\n return renderHTML(html);\n },\n });\n\n app.mount(\"#app\");\n ```\n\n > L'importation dynamique de votre moteur de rendu HTML est un bon moyen de réduire la taille du bundle de votre application.\n\n \n \n \n ```svelte fileName=\"App.svelte\"\n \n\n \n {\n const { renderHTML } = await import('svelte-intlayer/html');\n return renderHTML(html);\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 Vous pouvez également utiliser votre propre moteur de rendu HTML :\n\n ```tsx fileName=\"AppProvider.tsx\"\n import { HTMLProvider } from \"preact-intlayer/html\";\n\n export const AppProvider = ({ children }) => (\n {\n const { renderHTML } = await import('preact-intlayer/html');\n return renderHTML(html);\n }}\n >\n {children}\n \n );\n ```\n\n > L'importation dynamique de votre moteur de rendu HTML est un bon moyen de réduire la taille du bundle de votre application.\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 Vous pouvez également utiliser votre propre moteur de rendu HTML :\n\n ```tsx fileName=\"AppProvider.tsx\"\n import { HTMLProvider } from \"solid-intlayer/html\";\n\n export const AppProvider = (props) => (\n {\n const { renderHTML } = await import('solid-intlayer/html');\n return renderHTML(html);\n }}\n >\n {props.children}\n \n );\n ```\n\n > L'importation dynamique de votre moteur de rendu HTML est un bon moyen de réduire la taille du bundle de votre application.\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 Vous pouvez également utiliser votre propre moteur de rendu HTML :\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 renderMarkdown: async (html) => {\n const { renderMarkdown } = await import('angular-intlayer/html');\n return renderMarkdown(html);\n },\n }),\n ],\n };\n ```\n\n > L'importation dynamique de votre moteur de rendu HTML est un bon moyen de réduire la taille du bundle de votre application.\n\n \n \n\n---\n\n### Rendu Manuel et Outils Avancés\n\nSi 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.\n\n\n \n #### Composant `\n {\" \n ```\n\n #### Hook `useHTMLRenderer()`\n\n Obtenir une fonction de rendu pré-configurée.\n\n ```tsx\n import { useHTMLRenderer } from \"react-intlayer/html\";\n\n const renderHTML = useHTMLRenderer({\n components: { strong: (props) => }\n });\n\n return renderHTML(\" \n \n \n #### Composant `Hello World\" />\n \n ```\n\n \n \n \n #### Composant `Hello World\" />\n ```\n\n #### Hook `useHTMLRenderer()`\n\n ```svelte\n \n\n {@html render(\" \n \n \n #### Composant `\n {\" \n ```\n\n #### Hook `useHTMLRenderer()`\n\n ```tsx\n import { useHTMLRenderer } from \"preact-intlayer/html\";\n\n const render = useHTMLRenderer();\n\n return \n \n \n #### Composant `\n {\" \n ```\n\n #### Hook `useHTMLRenderer()`\n\n ```tsx\n import { useHTMLRenderer } from \"solid-intlayer/html\";\n\n const render = useHTMLRenderer();\n\n return \n \n #### Service `IntlayerHTMLService`\n Rendre une chaîne HTML à l'aide du service.\n\n ```typescript\n import { IntlayerHTMLService } from \"angular-intlayer/html\";\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## Référence des Options\n\nCes options peuvent être passées à `HTMLProvider`, `HTMLRenderer`, `useHTMLRenderer` et `renderHTML`.\n\n| Option | Type | Défaut | Description |\n| :----------- | :-------------------- | :----- | :----------------------------------------------------------------------------------------------------------------------- |\n| `components` | `Record` | `{}` | Une carte des balises HTML ou des noms de composants personnalisés vers les composants. |\n| `renderHTML` | `Function` | `null` | Une fonction de rendu personnalisée pour remplacer complètement le parseur HTML par défaut (uniquement pour Vue/Svelte). |\n\n> 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.\n","about":"Apprenez à déclarer et à utiliser du contenu HTML avec des composants personnalisés dans Intlayer. Suivez cette documentation pour intégrer du contenu riche de type HTML avec un remplacement dynamique de composants dans votre projet internationalisé.","url":"https://intlayer.org/fr/doc/concept/content/html","datePublished":"20-01-2026","dateModified":"24-03-2026","keywords":"HTML, Composants Personnalisés, Contenu Riche, Intlayer, Next.js, JavaScript, React, Vue, Svelte","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Développeurs, Responsables de contenu"}}Le nœud
Rendu Automatique (en utilisant
Configuration Globale avec
Composant
Hook
Utilitaire
{myHtmlContent}
;\n };\n ```\n\n {myHtmlContent}
;\n };\n ```\n\n Hello World
\"}\nHello World
\");\n ```\n\n #### Utilitaire `renderHTML()`\n\n Utilitaire autonome pour le rendu en dehors des composants.\n\n ```tsx\n import { renderHTML } from \"react-intlayer/html\";\n\n const jsx = renderHTML(\"Hello
\", { components: { p: 'div' } });\n ```\n\nHello World
\")}\n ```\n\n #### Utilitaire `renderHTML()`\n\n ```svelte\n \n\n {@html renderHTML(\"Hello World
\")}\n ```\n\nHello World
\"}\n{render(\"
;\n ```\n\n #### Utilitaire `renderHTML()`\n\n ```tsx\n import { renderHTML } from \"preact-intlayer/html\";\n\n return Hello World
\")}{renderHTML(\"
;\n ```\n\n Hello World
\")}Hello World
\"}\n{render(\"
;\n ```\n\n #### Utilitaire `renderHTML()`\n\n ```tsx\n import { renderHTML } from \"solid-intlayer/html\";\n\n return Hello World
\")}{renderHTML(\"
;\n ```\n\n Hello World
\")}Création:2026-01-20Dernière mise à jour:2026-03-24
Référencez cette doc à votre assistant AI préféréChatGPTClaudeDeepSeekGoogle AI modeGeminiPerplexityMistralGrok
Posez votre question et obtenez un résumé du document en referencant cette page et le Provider AI de votre choix
Historique des versions
- "Add `intlayerHTML` plugin object; use `app.use(intlayerHTML)` instead of `app.use(installIntlayerHTML)`"v8.5.024/03/2026
- "déplacer l'importation de {{framework}}-intlayer vers {{framework}}-intlayer/html"v8.5.024/03/2026
- "Ajouter HTMLRenderer / useHTMLRenderer / utilitaire renderHTML"v8.0.022/01/2026
- "Ajouter le support du parsing HTML"v8.0.020/01/2026
Le contenu de cette page a été traduit à l'aide d'une IA.
Voir la dernière version du contenu original en anglaisModifier cette documentation
Si vous avez une idée d’amélioration pour améliorer cette documentation, n’hésitez pas à contribuer en submitant une pull request sur GitHub.
Lien GitHub de la documentationCopier
Copier le Markdown du doc dans le presse-papiers
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
Copier le code
Copier le code dans le presse-papiers
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;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
Copier le code
Copier le code dans le presse-papiers
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
Copier le code
Copier le code dans le presse-papiers
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
Copier le code
Copier le code dans le presse-papiers
{myHtmlContent.use({ p: (props) => <p className="prose" {...props} />, CustomLink: ({ children }) => <a href="/details">{children}</a>,})}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
Copier le code
Copier le code dans le presse-papiers
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
Copier le code
Copier le code dans le presse-papiers
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.
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
Copier le code
Copier le code dans le presse-papiers
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
Copier le code
Copier le code dans le presse-papiers
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
Copier le code
Copier le code dans le presse-papiers
import { renderHTML } from "react-intlayer/html";const jsx = renderHTML("<p>Hello</p>", { components: { p: 'div' } });Référence des Options
Ces options peuvent être passées à HTMLProvider, HTMLRenderer, useHTMLRenderer et renderHTML.
Afficher tout le contenu du tableau
Ouvrir le tableau dans une fenêtre modale pour voir tout le contenu clairement
| 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.