Markdown

Die Markdown-Komponente ermöglicht das Rendern von Markdown-Inhalten mit Unterstützung für benutzerdefinierte Größen und Klassen für personalisiertes Styling. Sie verwendet die Bibliothek markdown-it zur Konvertierung und unterstützt HTML-Inhalte innerhalb von Markdown.

Verwendung

Um die Markdown-Komponente zu verwenden, importieren Sie sie aus @firecms/ui und übergeben Sie die Eigenschaft source mit dem Markdown-Inhalt, den Sie anzeigen möchten. Optional können Sie die Eigenschaften size und className angeben, um das Erscheinungsbild anzupassen.

Einfaches Markdown

Ein einfaches Beispiel für das Rendern von Markdown.

import React from "react";
import { Markdown } from "@firecms/ui";

const markdownSource = `
# Markdown Example
This is a basic Markdown rendering.
- Bullet one
- Bullet two
`;

export default function MarkdownBasicDemo() {
    return <Markdown source={markdownSource} />;
}

Markdown-Größen

Demonstriert, wie die Größe des Markdown-Textes mithilfe der Eigenschaft size angepasst wird.

import React from "react";
import { Markdown } from "@firecms/ui";

const markdownSource = `
# Different Sizes
You can use the \`size\` prop to adjust the markdown size.
## Medium (default)
- Bullet one
- Bullet two
## Large
- Bullet one
- Bullet two
`;

export default function MarkdownSizeDemo() {
    return (
        <>
            <Markdown source={markdownSource} size="medium" />
            <Markdown source={markdownSource} size="large" />
        </>
    );
}

Benutzerdefiniertes Markdown-Styling

Veranschaulicht die Verwendung der Eigenschaft className, um benutzerdefinierte Stile auf die Markdown-Komponente anzuwenden.

import React from "react";
import { Markdown } from "@firecms/ui";

const markdownSource = `
# Custom Styled Markdown
You can apply custom styles using the \`className\` prop.
`;

export default function MarkdownCustomDemo() {
    return <Markdown source={markdownSource} className="p-4 rounded text-blue-500 bg-surface-100" />;
}