Markdown

Le composant Markdown permet de rendre du contenu Markdown avec le support de tailles et de classes personnalisées pour un style personnalisé. Il exploite la bibliothèque markdown-it pour la conversion et supporte le contenu HTML dans le markdown.

Utilisation

Pour utiliser le composant Markdown, importez-le depuis @firecms/ui et passez la prop source avec le contenu markdown que vous souhaitez afficher. Optionnellement, vous pouvez spécifier les props size et className pour ajuster l’apparence.

Markdown de base

Un exemple simple de rendu 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} />;
}

Tailles de Markdown

Démontre comment ajuster la taille du texte markdown en utilisant la prop size.

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

Markdown avec style personnalisé

Illustration de l’utilisation de la prop className pour appliquer des styles personnalisés au composant markdown.

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" />;
}