\n\n \n ```\n\n Configura globalmente tramite il plugin `intlayerMarkdown` (supporta componenti MDX personalizzati):\n\n ```ts fileName=\"main.ts\"\n import { intlayerMarkdown } from \"vue-intlayer/markdown\";\n\n app.use(intlayerMarkdown, {\n components: {\n h1: (props) => h('h1', { style: { color: 'green' } }, props.children),\n MyButton: (props) => h('button', props), // Componente MDX\n },\n });\n ```\n\n > Se il plugin `intlayerMarkdown` non è installato, Intlayer eseguirà il rendering utilizzando il compilatore predefinito.\n\n Puoi anche fornire sovrascritture locali per nodi specifici utilizzando il metodo `.use()`:\n\n ```vue\n h('h1', { style: { color: 'red' } }, props.children),\n })\" />\n ```\n\n Puoi recuperare il Markdown come stringa:\n\n ```vue\n {{ myMarkdownContent.value }}\n {{ String(myMarkdownContent) }}\n {{ myMarkdownContent.toString() }}\n ```\n\n E puoi accedere ai metadati del tuo markdown in questo modo:\n\n ```vue\n \n \n ```\n\n \n \n Svelte renderizza il Markdown come una stringa HTML per impostazione predefinita. Usa `{@html}` per renderizzarlo.\n\n ```svelte fileName=\"App.svelte\"\n \n\n \n {@html $content.myMarkdownContent}\n \n ```\n\n > Se `MarkdownProvider` non è presente, Intlayer renderizzerà il markdown usando il compilatore predefinito.\n\n Puoi anche fornire sovrascritture locali per nodi specifici utilizzando il metodo `.use()`:\n\n ```svelte\n {@html $content.myMarkdownContent.use({ ... })}\n ```\n\n Puoi recuperare il Markdown come stringa:\n\n ```svelte\n {$content.myMarkdownContent.value}\n {String($content.myMarkdownContent)}\n {$content.myMarkdownContent.toString()}\n ```\n\n E puoi accedere ai metadati del tuo markdown in questo modo:\n\n ```svelte\n {$content.myMarkdownContent.metadata}\n {$content.myMarkdownContent.metadata.title}\n ```\n\n \n \n Preact supporta i nodi Markdown direttamente in JSX.\n\n ```tsx fileName=\"App.tsx\"\n import { useIntlayer } from \"preact-intlayer\";\n import { MarkdownProvider } from \"preact-intlayer/markdown\";\n\n const AppContent = () => {\n const { myMarkdownContent } = useIntlayer(\"app\");\n return
{myMarkdownContent}
;\n };\n\n const App = () => (\n

{children}

,\n MyButton: (props) =>
HomeAmbiente di testVetrinaAppDocBlog
Autore:
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.
AnnidamentoHTML