\n\n \n ```\n\n Global über das `intlayerMarkdown`-Plugin konfigurieren (unterstützt benutzerdefinierte MDX-Komponenten):\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), // MDX-Komponente\n },\n });\n ```\n\n > Wenn das `intlayerMarkdown`-Plugin nicht installiert ist, rendert Intlayer mit dem Standard-Compiler.\n\n Sie können auch lokale Überschreibungen für bestimmte Knoten mit der Methode `.use()` bereitstellen:\n\n ```vue\n h('h1', { style: { color: 'red' } }, props.children),\n })\" />\n ```\n\n Sie können das Markdown als Zeichenfolge abrufen:\n\n ```vue\n {{ myMarkdownContent.value }}\n {{ String(myMarkdownContent) }}\n {{ myMarkdownContent.toString() }}\n ```\n\n Und Sie können folgendermaßen auf Ihre Markdown-Metadaten zugreifen:\n\n ```vue\n \n \n ```\n\n \n \n Svelte rendert Markdown standardmäßig als HTML-String. Verwenden Sie `{@html}`, um es zu rendern.\n\n ```svelte fileName=\"App.svelte\"\n \n\n \n {@html $content.myMarkdownContent}\n \n ```\n\n > Wenn `MarkdownProvider` nicht vorhanden ist, rendert Intlayer das Markdown mit dem Standard-Compiler.\n\n Sie können auch lokale Überschreibungen für bestimmte Knoten mit der Methode `.use()` bereitstellen:\n\n ```svelte\n {@html $content.myMarkdownContent.use({ ... })}\n ```\n\n Sie können das Markdown als Zeichenfolge abrufen:\n\n ```svelte\n {$content.myMarkdownContent.value}\n {String($content.myMarkdownContent)}\n {$content.myMarkdownContent.toString()}\n ```\n\n Und Sie können folgendermaßen auf Ihre Markdown-Metadaten zugreifen:\n\n ```svelte\n {$content.myMarkdownContent.metadata}\n {$content.myMarkdownContent.metadata.title}\n ```\n\n \n \n Preact unterstützt Markdown-Knoten direkt 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) =>
StartseiteSandboxShowcaseAppDokumentBlog
Autor:
Erstellung:2025-02-07Letzte Aktualisierung:2026-05-19

Markdown / Rich-Text-Inhalte

Intlayer unterstützt Rich-Text-Inhalte, die mit der Markdown-Syntax definiert werden. Dies ermöglicht es Ihnen, Inhalte mit umfangreicher Formatierung wie Blogs, Artikel und vieles mehr einfach zu erstellen und zu verwalten.

Markdown-Inhalte deklarieren

Sie können Markdown-Inhalte mithilfe der Funktion md oder einfach als Zeichenfolge (sofern sie Markdown-Syntax enthält) deklarieren.

Ab Version 8.10.0 können Sie Markdown-Inhalte direkt in .content.md-Dateien deklarieren. Intlayer erkennt und analysiert den Markdown-Inhalt automatisch.

markdown-file.en.content.md
---key: my-markdown-contentdescription: Mein Inhaltlocale: en---# Mein InhaltHier ist ein Beispiel für Markdown-Inhalte

Das locale-Feld im Frontmatter definiert die Sprache des Inhalts. Es ist optional. Wird es nicht angegeben, verwendet Intlayer die Standardsprache, die auch als Fallback-Sprache dient, falls keine Übersetzung für eine spezifische Sprache verfügbar ist.

Beispiel für die Dateistruktur:

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

Sie können im Frontmatter alle Eigenschaften hinzufügen, die in der Wörterbuch-Definition definiert sind.

Markdown rendern

Intlayer bietet zwei unabhängige Möglichkeiten zum Rendern von Markdown:

  1. Über useIntlayer — Intlayer konvertiert den md-Knoten automatisch in die native Ausgabe des Frameworks (JSX, VNode, HTML-String).

    • Das Frontmatter wird analysiert und als .metadata bereitgestellt. Sie können das Rendern auf zwei Ebenen überschreiben — global mit dem MarkdownProvider (oder dem Framework-Äquivalent) und lokal pro Knoten mit .use(). Beide können kombiniert werden; .use() hat Vorrang vor dem MarkdownProvider, der wiederum Vorrang vor dem Standardverhalten hat.

  2. Hilfsprogramme — <MarkdownRenderer />, useMarkdownRenderer() und renderMarkdown() sind eigenständige Tools, die nur reine Markdown-Strings akzeptieren. Sie sind unabhängig von useIntlayer und funktionieren nicht mit den dekorierten Knoten, die es zurückgibt.

Das Markdown-Rendering unterstützt MDX — verwenden Sie jede JSX/Framework-Komponente namentlich direkt in Ihrem Markdown.

1. Automatisches Rendern (über useIntlayer)

Markdown-Knoten können direkt als JSX gerendert werden.

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} />, // MDX-Komponente    }}  >    <AppContent />  </MarkdownProvider>);
Wenn MarkdownProvider nicht vorhanden ist, rendert Intlayer das Markdown mit dem standardmäßigen Markdown-zu-JSX-Parser.

Sie können auch lokale Überschreibungen für bestimmte Knoten mit der Methode .use() bereitstellen:

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

Sie können das Markdown als Zeichenfolge abrufen:

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

Und Sie können folgendermaßen auf Ihre Markdown-Metadaten zugreifen:

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

2. Hilfsprogramme (Nur Markdown-Strings)

Diese Dienstprogramme rendern nur reine Markdown-Strings und sind unabhängig von useIntlayer. Verwenden Sie sie, wenn Sie Markdown aus anderen Quellen als Ihren Wörterbüchern rendern müssen.

<MarkdownRenderer /> Komponente

Rendert einen Markdown-String mit bestimmten Optionen.

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

useMarkdownRenderer() Hook

Holt eine vorkonfigurierte Render-Funktion.

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

renderMarkdown() Dienstprogramm

Eigenständiges Dienstprogramm zum Rendern außerhalb von Komponenten.

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

Globale Konfiguration mit MarkdownProvider

Der MarkdownProvider (oder sein Framework-Äquivalent) konfiguriert die Markdown-Rendering-Pipeline für Ihre gesamte Anwendung. Dies gilt sowohl für das automatische Rendering von useIntlayer als auch für die Hilfsprogramme. Die hier konfigurierten Optionen sind die Standardeinstellungen — .use() überschreibt sie auf Knotenebene.

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 wird unterstützt — jeder in Ihrem Markdown verwendete Komponentenname (z. B. <MyCustomJSXComponent />) wird mit dem components-Mapping aufgelöst.

Sie können auch Ihren eigenen Markdown-Renderer verwenden:

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>);
Das dynamische Importieren Ihres Markdown-Renderers ist eine gute Möglichkeit, die Bundle-Größe Ihrer Anwendung zu reduzieren.

Suspense

Der Intlayer-Markdown-Renderer wird dynamisch geladen. Obwohl er optimiert ist, ist der zugrunde liegende Parser-Chunk etwa 55 KB groß. Das synchrone Laden verzögert das anfängliche Rendern der Seite und verschlechtert den First Contentful Paint (FCP).

Um ein Blockieren der Benutzeroberfläche zu verhindern, ist Intlayer in die React-Suspense-API integriert. Es ruft den Parser im Hintergrund ab und wirft während des Downloads ein Promise.

Umschließen Sie jede Komponente, die Intlayer Markdown rendert, mit einer <Suspense>-Grenze. Dies zeigt einen lokalisierten Fallback-Status an, während der Chunk heruntergeladen wird, sodass der Rest Ihres DOMs sofort gerendert werden kann.

Warnung: Wenn Sie keine <Suspense>-Grenze angeben, wird React auf Root-Ebene ausgesetzt oder der gesamte Komponentenbaum vom Rendern blockiert, bis der 55-KB-Chunk vollständig geladen ist.

Im Next.js App Router können Sie entweder React Suspense für Client-Komponenten oder eine loading.tsx-Datei für Server-Komponenten verwenden.

Client-Komponente:

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

Server-Komponente mit 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;

Serverseitiges Rendern (SSR) und Hydratisierung

Im Vergleich zu anderen Markdown-Parsern wie remark / rehype ist Intlayer Markdown frei von Abhängigkeiten und läuft sowohl auf dem Client als auch auf dem Server.

Intlayer optimiert jedoch das Parsen für serverseitig gerenderte (SSR) Frameworks (wie Next.js App Router, React Router, Nuxt, SvelteKit etc.).

Anstatt rohe Markdown-Strings an den Client zu senden und sie im Browser zu parsen (was zu Leistungseinbußen führt), ermöglicht Intlayer das Vorab-Parsen des Markdowns in einen Abstract Syntax Tree (AST) auf dem Server.

Sie können die Funktion parseMarkdown aus dem Intlayer-Paket Ihres Frameworks auf der Serverseite verwenden, um einen serialisierbaren AST (das Objekt ParsedMarkdown) zu erzeugen und diesen direkt an das Frontend zu übergeben. Alle Rendering-Dienstprogramme von Intlayer (wie <MarkdownRenderer>, useMarkdownRenderer usw.) akzeptieren dieses AST-Objekt automatisch und rendern es nahtlos.

Beispiel in einer Server-/Client-Architektur

server.ts
import { parseMarkdown } from "react-intlayer/markdown";// 1. Auf dem Server: Parsen Sie das Markdown in einen serialisierbaren ASTexport const loader = async () => {  const markdownString = "## My title \n\nLorem Ipsum";  const ast = parseMarkdown(markdownString);  // Senden Sie den AST als JSON an den Client  return Response.json({ content: ast });};
client.tsx
import { useLoaderData } from "react-router";import { MarkdownRenderer } from "react-intlayer/markdown";// 2. Auf dem Client: Rendern Sie den AST direkt ohne erneutes Parsenexport default function Page() {  const { content } = useLoaderData();  // Der Renderer akzeptiert entweder einen rohen String oder den geparsten AST  return <MarkdownRenderer content={content} />;}

Dieses Muster stellt sicher, dass die Markdown-Parsing-Logik vollständig auf dem Server ausgeführt wird, was die clientseitige Ausführungszeit erheblich verkürzt und die anfängliche Hydratisierungsgeschwindigkeit verbessert.

Optionen-Referenz

Diese Optionen können an MarkdownProvider, MarkdownRenderer, useMarkdownRenderer und renderMarkdown übergeben werden.

Option Type Default Beschreibung
forceBlock boolean false Erzwingt, dass die Ausgabe in ein Element auf Blockebene (z. B. <div>) eingeschlossen wird.
forceInline boolean false Erzwingt, dass die Ausgabe in ein Inline-Element (z. B. <span>) eingeschlossen wird.
tagfilter boolean true Aktiviert den GitHub-Tag-Filter für verbesserte Sicherheit, indem gefährliche HTML-Tags entfernt werden.
preserveFrontmatter boolean false Wenn true, wird Frontmatter am Anfang der Markdown-Zeichenfolge nicht entfernt.
components Overrides {} Eine Zuordnung von HTML-Tags zu benutzerdefinierten Komponenten (z. B. { h1: MyHeading }).
wrapper Component null Eine benutzerdefinierte Komponente zum Umschließen des gerenderten Markdowns.
renderMarkdown Function null Eine benutzerdefinierte Rendering-Funktion, um den Standard-Markdown-Compiler vollständig zu ersetzen.
VerschachtelungHTML