Markdown

O componente Markdown permite renderizar conteúdo Markdown com suporte para tamanhos e classes personalizadas para estilo personalizado. Utiliza a biblioteca markdown-it para conversão e suporta conteúdo HTML dentro do markdown.

Uso

Para usar o componente Markdown, importe-o de @firecms/ui e passe a prop source com o conteúdo markdown que deseja exibir. Opcionalmente, você pode especificar as props size e className para ajustar a aparência.

Markdown básico

Um exemplo simples de renderização de 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} />;
}

Tamanhos do Markdown

Demonstra como ajustar o tamanho do texto markdown usando a 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 com estilo personalizado

Ilustrando o uso da prop className para aplicar estilos personalizados ao componente 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" />;
}