}>{markdownContent}\n );\n};\n```\n\n \n \n\nAngular non ha un'API Suspense. Usa le viste differite (`@defer`) per gestire i contenuti Markdown caricati in modo lazy (richiede Angular 17+).\n\n```typescript fileName=\"my.component.ts\"\nimport { Component } from \"@angular/core\";\nimport { useIntlayer } from \"angular-intlayer\";\n\n@Component({\n selector: \"app-my\",\n template: `\n @defer {\n
    \n } @loading {\n
    Loading...
    \n }\n `,\n})\nexport class MyComponent {\n content = useIntlayer(\"my-markdown\");\n}\n```\n\n     \n\n\n---\n\n## Rendering Lato Server (SSR) e Idratazione\n\nRispetto ad altri parser Markdown come remark / rehype, Intlayer Markdown è privo di dipendenze e viene eseguito sia sul client che sul server.\n\nTuttavia, Intlayer ottimizza l'analisi per i framework di rendering lato server (SSR) (come Next.js App Router, React Router, Nuxt, SvelteKit, ecc.).\n\nInvece di inviare stringhe Markdown grezze al client e analizzarle nel browser (il che comporta una penalizzazione delle prestazioni), Intlayer consente di pre-analizzare il Markdown in un albero sintattico astratto (AST) sul server.\n\nÈ possibile utilizzare la funzione `parseMarkdown` del pacchetto Intlayer del proprio framework lato server per generare un AST serializzabile (oggetto `ParsedMarkdown`) e passarlo direttamente al frontend. Tutte le utilità di rendering di Intlayer (come ``, `useMarkdownRenderer`, ecc.) accettano automaticamente questo oggetto AST e lo renderizzano perfettamente.\n\n### Esempio in un'Architettura Server/Client\n\n\n \n\n ```tsx fileName=\"server.ts\"\n import { parseMarkdown } from \"react-intlayer/markdown\";\n\n // 1. Sul server: Analizza il markdown in un AST serializzabile\n export const loader = async () => {\n const markdownString = \"## My title \\n\\nLorem Ipsum\";\n const ast = parseMarkdown(markdownString);\n\n // Restituisce l'AST come JSON al client\n return Response.json({ content: ast });\n };\n ```\n\n ```tsx fileName=\"client.tsx\"\n import { useLoaderData } from \"react-router\";\n import { MarkdownRenderer } from \"react-intlayer/markdown\";\n\n // 2. Sul client: Esegue il rendering dell'AST direttamente senza ri-analizzare\n export default function Page() {\n const { content } = useLoaderData();\n\n // Il renderer accetta una stringa grezza o l'AST analizzato\n return ;\n }\n ```\n\n \n \n\n ```tsx fileName=\"app/page.tsx\"\n import { parseMarkdown } from \"next-intlayer/markdown\";\n import { MarkdownRenderer } from \"next-intlayer/markdown\";\n\n export default async function Page() {\n // 1. Analizza il markdown in un AST serializzabile sul server\n const markdownString = \"## My title \\n\\nLorem Ipsum\";\n const ast = parseMarkdown(markdownString);\n\n // 2. Esegue il rendering dell'AST direttamente\n // In un Server Component, questo funziona perfettamente e passa l'AST\n // direttamente ai componenti client sottostanti se necessario.\n return ;\n }\n ```\n\n \n \n\n ```vue fileName=\"pages/index.vue\"\n \n\n \n ```\n\n \n \n\n ```typescript fileName=\"+page.server.ts\"\n import { parseMarkdown } from \"svelte-intlayer/markdown\";\n\n // 1. Sul server: Analizza il markdown in un AST serializzabile\n export const load = async () => {\n const markdownString = \"## My title \\n\\nLorem Ipsum\";\n const ast = parseMarkdown(markdownString);\n\n // Restituisce l'AST al client\n return { content: ast };\n };\n ```\n\n ```svelte fileName=\"+page.svelte\"\n \n\n \n \n ```\n\n \n \n\n L'SSR di Angular in genere risolve i dati sul server durante il caricamento iniziale e si idrata sul client. È possibile utilizzare i resolver per passare l'AST.\n\n ```typescript fileName=\"app.resolver.ts\"\n import { Injectable } from \"@angular/core\";\n import { Resolve } from \"@angular/router\";\n import { parseMarkdown, type ParsedMarkdown } from \"angular-intlayer/markdown\";\n\n @Injectable({ providedIn: \"root\" })\n export class MarkdownResolver implements Resolve {\n resolve(): ParsedMarkdown {\n const markdownString = \"## My title \\n\\nLorem Ipsum\";\n // 1. Sul server: Analizza il markdown in un AST serializzabile\n return parseMarkdown(markdownString);\n }\n }\n ```\n\n ```typescript fileName=\"app.component.ts\"\n import { Component } from \"@angular/core\";\n import { ActivatedRoute } from \"@angular/router\";\n import { IntlayerMarkdownService, type ParsedMarkdown } from \"angular-intlayer/markdown\";\n\n @Component({\n selector: \"app-root\",\n template: `
    `,\n })\n export class AppComponent {\n renderedMarkdown: string = \"\";\n\n constructor(\n private route: ActivatedRoute,\n private markdownService: IntlayerMarkdownService\n ) {\n // 2. Sul client: Esegue il rendering dell'AST direttamente senza ri-analizzare\n this.route.data.subscribe((data) => {\n this.renderedMarkdown = this.markdownService.renderMarkdown(\n data.markdownAst\n ) as string;\n });\n }\n }\n ```\n\n     \n    \n\nQuesto modello garantisce che la logica di analisi del Markdown venga eseguita interamente sul server, riducendo significativamente il tempo di esecuzione lato client e migliorando la velocità di idratazione iniziale.\n\n## Riferimento opzioni\n\nQueste opzioni possono essere passate a `MarkdownProvider`, `MarkdownRenderer`, `useMarkdownRenderer` e `renderMarkdown`.\n\n| Option | Type | Default | Descrizione |\n| :-------------------- | :---------- | :------ | :--------------------------------------------------------------------------------------------------------- |\n| `forceBlock` | `boolean` | `false` | Forza l'output a essere avvolto in un elemento a livello di blocco (es. `
    `). |\n| `forceInline` | `boolean` | `false` | Forza l'output a essere avvolto in un elemento in linea (es. ``). |\n| `tagfilter` | `boolean` | `true` | Abilita il GitHub Tag Filter per una maggiore sicurezza rimuovendo i tag HTML pericolosi. |\n| `preserveFrontmatter` | `boolean` | `false` | Se `true`, il frontmatter all'inizio della stringa Markdown non verrà rimosso. |\n| `components` | `Overrides` | `{}` | Una mappa di tag HTML per componenti personalizzati (es. `{ h1: MyHeading }`). |\n| `wrapper` | `Component` | `null` | Un componente personalizzato per avvolgere il Markdown renderizzato. |\n| `renderMarkdown` | `Function` | `null` | Una funzione di rendering personalizzata per sostituire completamente il compilatore Markdown predefinito. |\n","about":"Scopri come dichiarare e utilizzare i contenuti Markdown nel tuo sito web multilingue con Intlayer. Segui i passaggi in questa documentazione online per integrare perfettamente Markdown nel tuo progetto.","url":"https://intlayer.org/it/doc/concept/content/markdown","datePublished":"07-02-2025","dateModified":"19-05-2026","keywords":"Markdown, Internazionalizzazione, Documentazione, Intlayer, Next.js, JavaScript, React","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Sviluppatori, Manager dei contenuti"}}
    Creazione:2025-02-07Ultimo aggiornamento:2026-05-19

    Markdown / Contenuti Rich Text

    Intlayer supporta contenuti rich text definiti utilizzando la sintassi Markdown. Questo ti permette di scrivere e mantenere facilmente contenuti con formattazione ricca, come blog, articoli e molto altro.

    Dichiarare Contenuti Markdown

    Puoi dichiarare i contenuti Markdown usando la funzione md o semplicemente come stringa (se contiene la sintassi Markdown).

    Dalla versione 8.10.0, puoi dichiarare i contenuti Markdown direttamente nei file .content.md. Intlayer rileverà e analizzerà automaticamente il contenuto Markdown.

    markdown-file.en.content.md
    ---key: my-markdown-contentdescription: Il mio contenutolocale: en---# Il mio contenutoEcco un esempio di contenuto markdown

    Il campo front-matter locale è il campo che definisce la lingua del contenuto. È facoltativo. Se non viene fornito, Intlayer utilizzerà la lingua predefinita, che viene anche utilizzata come lingua di fallback se non è disponibile alcuna traduzione per una lingua specifica.

    Esempio di struttura dei file:

    text
    content├── markdown-file.en.content.md├── markdown-file.fr.content.md└── markdown-file.es.content.md

    Puoi aggiungere nel front-matter qualsiasi proprietà definita nella Definizione del Dizionario

    Rendering del Markdown

    Intlayer fornisce due modi indipendenti per eseguire il rendering del Markdown:

    1. Tramite useIntlayer — Intlayer trasforma automaticamente il nodo md nell'output nativo del framework (JSX, VNode, stringa HTML).

      • Il Frontmatter viene analizzato ed esposto come .metadata. Puoi sovrascrivere il rendering su due livelli — globalmente con MarkdownProvider (o l'equivalente nel framework) e localmente per nodo con .use(). Entrambi possono essere combinati; .use() ha priorità su MarkdownProvider, il quale ha priorità su quello predefinito.

    2. Utility di supporto — <MarkdownRenderer />, useMarkdownRenderer(), e renderMarkdown() sono strumenti indipendenti che accettano solo stringhe Markdown pure. Sono indipendenti da useIntlayer e non funzionano con i nodi decorati che esso restituisce.

    Il rendering del Markdown supporta MDX — usa qualsiasi componente JSX/framework tramite nome direttamente nel tuo Markdown.

    1. Rendering Automatico (tramite useIntlayer)

    I nodi Markdown possono essere renderizzati direttamente come JSX.

    App.tsx
    import { useIntlayer } from "react-intlayer";import { MarkdownProvider } from "react-intlayer/markdown";const AppContent = () => {  const { myMarkdownContent } = useIntlayer("app");  return <div>{myMarkdownContent}</div>;};const App = () => (  <MarkdownProvider    components={{      h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,      MyButton: (props) => <button {...props} />, // Componente MDX    }}  >    <AppContent />  </MarkdownProvider>);
    Se MarkdownProvider non è presente, Intlayer eseguirà il rendering del markdown usando il parser da Markdown a JSX predefinito.

    Puoi anche fornire sovrascritture locali per nodi specifici utilizzando il metodo .use():

    tsx
    {myMarkdownContent.use({  h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,})}

    Puoi recuperare il Markdown come stringa:

    tsx
    {myMarkdownContent.value}{String(myMarkdownContent)}{myMarkdownContent.toString()}

    E puoi accedere ai metadati del tuo markdown in questo modo:

    tsx
    {myMarkdownContent.metadata}{myMarkdownContent.metadata.title}

    2. Utility di Supporto (Solo Stringhe Markdown)

    Queste utility eseguono il rendering solo di stringhe Markdown pure e sono indipendenti da useIntlayer. Usale quando hai bisogno di renderizzare Markdown da fonti diverse dai tuoi dizionari.

    Componente <MarkdownRenderer />

    Esegue il rendering di una stringa Markdown con opzioni specifiche.

    tsx
    import { MarkdownRenderer } from "react-intlayer/markdown";<MarkdownRenderer forceBlock={true} tagfilter={true}>  {"# Il Mio Titolo"}</MarkdownRenderer>

    Hook useMarkdownRenderer()

    Ottieni una funzione di rendering preconfigurata.

    tsx
    import { useMarkdownRenderer } from "react-intlayer/markdown";const renderMarkdown = useMarkdownRenderer({  forceBlock: true,  components: { h1: (props) => <h1 {...props} className="custom" /> }});return renderMarkdown("# Il Mio Titolo");

    Utility renderMarkdown()

    Utility indipendente per il rendering al di fuori dei componenti.

    tsx
    import { renderMarkdown } from "react-intlayer/markdown";const jsx = renderMarkdown("# Il Mio Titolo", { forceBlock: true });

    Configurazione Globale con MarkdownProvider

    Il MarkdownProvider (o il suo equivalente nel framework) configura la pipeline di rendering Markdown per l'intera applicazione. Questo si applica sia al rendering automatico di useIntlayer che alle utility di supporto. Le opzioni impostate qui sono quelle predefinite — .use() le sovrascrive a livello di nodo.

    AppProvider.tsx
    import { MarkdownProvider } from "react-intlayer/markdown";export const AppProvider = ({ children }) => (  <MarkdownProvider    components={{      h1: (props) => <h1 style={{color: 'green'}} {...props} />,      a: ({ href, ...props }) => <a style={{color: 'red'}} {...props} />,      MyCustomJSXComponent: (props) => <span style={{color: 'red'}} {...props} />,    }}  >    {children}  </MarkdownProvider>);
    MDX è supportato — qualsiasi nome di componente usato all'interno del tuo Markdown (es. <MyCustomJSXComponent />) viene risolto tramite la mappa components.

    Puoi anche usare il tuo renderer markdown:

    AppProvider.tsx
    import { MarkdownProvider } from "react-intlayer/markdown";export const AppProvider = ({ children }) => (  <MarkdownProvider    renderMarkdown={async (md) => {      // Use dynamic import to reduce the bundle size of your application      const { renderMarkdown } = await import('react-intlayer/markdown');      return renderMarkdown(md);    }}  >    {children}  </MarkdownProvider>);
    Importare dinamicamente il tuo renderer Markdown è un buon modo per ridurre le dimensioni del bundle della tua applicazione.

    Suspense

    Il renderer Markdown di Intlayer è caricato dinamicamente. Sebbene ottimizzato, il chunk del parser sottostante è di circa 55 kb. Il caricamento sincrono ritarda il rendering iniziale della pagina e riduce il First Contentful Paint (FCP).

    Per evitare di bloccare l'interfaccia utente, Intlayer si integra con l'API Suspense di React. Recupera il parser in background e lancia una Promise durante il download.

    Avvolgi qualsiasi componente che renderizza Intlayer Markdown in un limite <Suspense>. Questo visualizza uno stato di fallback localizzato durante il download del chunk, consentendo al resto del DOM di essere renderizzato immediatamente.

    Avviso: Se non si fornisce un limite <Suspense>, React sospenderà a livello di root o bloccherà il rendering dell'intero albero dei componenti fino al completo caricamento del chunk di 55 kb.

    In Next.js App Router, puoi utilizzare React Suspense per i componenti client o un file loading.tsx per i componenti server.

    Componente Client:

    components/MyComponent.tsx
    "use client";import { useIntlayer } from "next-intlayer";import { Suspense } from "react";const MyComponent = () => {const markdownContent = useIntlayer("my-markdown");return (  <Suspense fallback={<div>Loading...</div>}>{markdownContent}</Suspense>);};

    Componente Server con loading.tsx:

    app/loading.tsx
    export default function Loading() {return <div>Loading...</div>;}
    app/page.tsx
    import { useIntlayer } from "next-intlayer/server";const MyPage = () => {const markdownContent = useIntlayer("my-markdown");return <div>{markdownContent}</div>;};export default MyPage;

    Rendering Lato Server (SSR) e Idratazione

    Rispetto ad altri parser Markdown come remark / rehype, Intlayer Markdown è privo di dipendenze e viene eseguito sia sul client che sul server.

    Tuttavia, Intlayer ottimizza l'analisi per i framework di rendering lato server (SSR) (come Next.js App Router, React Router, Nuxt, SvelteKit, ecc.).

    Invece di inviare stringhe Markdown grezze al client e analizzarle nel browser (il che comporta una penalizzazione delle prestazioni), Intlayer consente di pre-analizzare il Markdown in un albero sintattico astratto (AST) sul server.

    È possibile utilizzare la funzione parseMarkdown del pacchetto Intlayer del proprio framework lato server per generare un AST serializzabile (oggetto ParsedMarkdown) e passarlo direttamente al frontend. Tutte le utilità di rendering di Intlayer (come <MarkdownRenderer>, useMarkdownRenderer, ecc.) accettano automaticamente questo oggetto AST e lo renderizzano perfettamente.

    Esempio in un'Architettura Server/Client

    server.ts
    import { parseMarkdown } from "react-intlayer/markdown";// 1. Sul server: Analizza il markdown in un AST serializzabileexport const loader = async () => {  const markdownString = "## My title \n\nLorem Ipsum";  const ast = parseMarkdown(markdownString);  // Restituisce l'AST come JSON al client  return Response.json({ content: ast });};
    client.tsx
    import { useLoaderData } from "react-router";import { MarkdownRenderer } from "react-intlayer/markdown";// 2. Sul client: Esegue il rendering dell'AST direttamente senza ri-analizzareexport default function Page() {  const { content } = useLoaderData();  // Il renderer accetta una stringa grezza o l'AST analizzato  return <MarkdownRenderer content={content} />;}

    Questo modello garantisce che la logica di analisi del Markdown venga eseguita interamente sul server, riducendo significativamente il tempo di esecuzione lato client e migliorando la velocità di idratazione iniziale.

    Riferimento opzioni

    Queste opzioni possono essere passate a MarkdownProvider, MarkdownRenderer, useMarkdownRenderer e renderMarkdown.

    Option Type Default Descrizione
    forceBlock boolean false Forza l'output a essere avvolto in un elemento a livello di blocco (es. <div>).
    forceInline boolean false Forza l'output a essere avvolto in un elemento in linea (es. <span>).
    tagfilter boolean true Abilita il GitHub Tag Filter per una maggiore sicurezza rimuovendo i tag HTML pericolosi.
    preserveFrontmatter boolean false Se true, il frontmatter all'inizio della stringa Markdown non verrà rimosso.
    components Overrides {} Una mappa di tag HTML per componenti personalizzati (es. { h1: MyHeading }).
    wrapper Component null Un componente personalizzato per avvolgere il Markdown renderizzato.
    renderMarkdown Function null Una funzione di rendering personalizzata per sostituire completamente il compilatore Markdown predefinito.
    Annidamento
    HTML