Pose una domanda e ottieni un riassunto del documento facendo riferimento a questa pagina e al provider AI di tua scelta
Integrando il server MCP Intlayer al tuo assistente AI, puoi recuperare tutti i documenti direttamente da ChatGPT, DeepSeek, Cursor, VSCode, ecc.
Vedi la documentazione del server MCPIl contenuto di questa pagina è stato tradotto con un'IA.
Vedi l'ultima versione del contenuto originale in ingleseSe hai un’idea per migliorare questa documentazione, non esitare a contribuire inviando una pull request su GitHub.
Collegamento GitHub alla documentazioneCopia il Markdown del documento nella porta-documenti
Markdown / Contenuto Rich Text
Come Funziona Markdown
Intlayer supporta contenuti rich text definiti utilizzando la sintassi Markdown. Questo è possibile grazie alla funzione md, che converte una stringa Markdown in un formato gestibile da Intlayer. Utilizzando Markdown, è possibile scrivere e mantenere facilmente contenuti con formattazione avanzata, come blog, articoli e altro.
Il Visual editor di Intlayer e il CMS di Intlayer supportano entrambi la gestione dei contenuti Markdown.
Quando integrato con un'applicazione React, è possibile utilizzare un provider di rendering Markdown (come markdown-to-jsx) per rendere il contenuto Markdown in HTML. Questo consente di scrivere contenuti in Markdown assicurandosi che vengano visualizzati correttamente nella tua app.
Configurazione dei Contenuti Markdown
Per configurare i contenuti Markdown nel tuo progetto Intlayer, definisci un dizionario di contenuti che utilizza la funzione md.
Copiare il codice nella clipboard
import { md, type Dictionary } from "intlayer";const markdownDictionary = { key: "app", content: { myMarkdownContent: md("## Il mio titolo \n\nLorem Ipsum"), },} satisfies Dictionary;export default markdownDictionary;
Importazione di file .md (multilingua)
Copiare il codice nella clipboard
// Questa dichiarazione consente a TypeScript di riconoscere e importare file Markdown (.md) come moduli.// Senza questa dichiarazione, TypeScript genererebbe un errore quando si tenta di importare file Markdown,// poiché non supporta nativamente l'importazione di file non di codice.declare module "*.md";
Copiare il codice nella clipboard
import { md, t, type Dictionary } from "intlayer";import { readFileSync } from "fs";import { resolve } from "path";import markdown_en from "./myMarkdown.en.md";import markdown_fr from "./myMarkdown.fr.md";import markdown_es from "./myMarkdown.es.md";const markdownDictionary = { key: "app", content: { contentImport: t({ it: md(markdown_en), en: md(markdown_en), fr: md(markdown_fr), es: md(markdown_es), }), contentRequire: md(require("./myMarkdown.md")), contentAsyncImport: md( import("./myMarkdown.md").then((module) => module.default) ), contentFetch: md(fetch("https://example.com").then((res) => res.text())), contentFS: md(() => { const filePath = resolve(process.cwd(), "doc/test.md"); return readFileSync(filePath, "utf8"); }), },} satisfies Dictionary;export default markdownDictionary;
Utilizzo di Markdown con React Intlayer
Per rendere il contenuto Markdown in un'applicazione React, puoi utilizzare il hook useIntlayer dal pacchetto react-intlayer insieme a un provider di rendering Markdown. In questo esempio, utilizziamo il pacchetto markdown-to-jsx per convertire il Markdown in HTML.
Copiare il codice nella clipboard
import type { FC } from "react";import { useIntlayer, MarkdownProvider } from "react-intlayer";import Markdown from "markdown-to-jsx";const AppContent: FC = () => { const { myMarkdownContent } = useIntlayer("app"); return <>{myMarkdownContent}</>;};export const AppProvider: FC = () => ( <MarkdownProvider renderMarkdown={(markdown) => <Markdown>{markdown}</Markdown>} > <AppContent /> </MarkdownProvider>);
In questa implementazione:
- Il MarkdownProvider avvolge l'applicazione (o la parte rilevante di essa) e accetta una funzione renderMarkdown. Questa funzione viene utilizzata per convertire le stringhe Markdown in JSX utilizzando il pacchetto markdown-to-jsx.
- Il hook useIntlayer viene utilizzato per recuperare il contenuto Markdown (myMarkdownContent) dal dizionario con la chiave "app".
- Il contenuto Markdown viene reso direttamente nel componente, e il rendering del Markdown è gestito dal provider.
Utilizzo di Markdown con Next Intlayer
L'implementazione utilizzando il pacchetto next-intlayer è simile a quella sopra. L'unica differenza è che la funzione renderMarkdown deve essere passata al componente MarkdownProvider in un componente client.
Copiare il codice nella clipboard
"use client";import type { FC, PropsWithChildren } from "react";import { MarkdownProvider } from "next-intlayer";const renderMarkdown = (markdown: string) => ( <span style={{ color: "red" }}>{markdown}</span>);export const IntlayerMarkdownProvider: FC<PropsWithChildren> = ({ children,}) => ( <MarkdownProvider renderMarkdown={renderMarkdown}> {children} </MarkdownProvider>);
Risorse Aggiuntive
- Documentazione CLI di Intlayer
- Documentazione React Intlayer
- Documentazione Next Intlayer
- markdown-to-jsx su npm
Queste risorse forniscono ulteriori approfondimenti su come configurare e utilizzare Intlayer con vari tipi di contenuti e framework.