Creation:2025-02-07Last update: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.
    Verschachtelung
    HTML