Markdown

El componente Markdown permite renderizar contenido Markdown con soporte para tamaños y clases personalizadas para un estilo personalizado. Aprovecha la biblioteca markdown-it para la conversión y admite contenido HTML dentro del markdown.

Uso

Para usar el componente Markdown, impórtalo desde @firecms/ui y pasa la prop source con el contenido markdown que deseas mostrar. Opcionalmente, puedes especificar las props size (tamaño) y className (clase CSS) para ajustar la apariencia.

Markdown básico

Un ejemplo simple de renderizado 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} />;
}

Tamaños de Markdown

Demuestra cómo ajustar el tamaño del texto markdown usando 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 con estilo personalizado

Ilustrando el uso de la prop className para aplicar estilos personalizados al 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" />;
}