Markdown

Il componente Markdown consente di renderizzare contenuto Markdown con supporto per dimensioni e classi personalizzate. Sfrutta la libreria markdown-it per la conversione e supporta contenuto HTML all’interno del markdown.

Utilizzo

Per usare il componente Markdown, importalo da @firecms/ui e passa la prop source con il contenuto markdown che vuoi mostrare. Opzionalmente, puoi specificare le prop size e className per regolare l’aspetto.

Markdown di base

Un esempio semplice di rendering 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} />;
}

Dimensioni del Markdown

Dimostra come regolare la dimensione del testo 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 stile personalizzato

Illustrazione dell’uso della prop className per applicare stili personalizzati 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" />;
}