Markdown

This field lets you display markdown content. It supports GitHub Flavored Markdown.

Swizzle

You can swizzle this component with the refine CLI to customize it.

Usage

Let's see how we can use <MarkdownField> in a show page.

localhost:3000/posts/show/123

import React from "react";
import { useShow } from "@refinedev/core";
import {
    Show,
    TextFieldComponent as TextField,
    MarkdownField,
} from "@refinedev/mui";
import { Stack, Typography } from "@mui/material";

const SampleShow = () => {
    const { queryResult: { data, isLoading } } = useShow();
    const record = data?.data;

    return (
        <Show isLoading={isLoading}>
            <Stack gap={1}>
                <Typography variant="body1" fontWeight="bold">
                    Title
                </Typography>
                <TextField value={record?.title} />
                <Typography variant="body1" fontWeight="bold">
                    Content
                </Typography>
                <MarkdownField value={record?.content} />
            </Stack>
        </Show>
    );
};

API Reference

Properties

Example

View Source Code

Run on your local

npm create refine-app@latest -- --example input-custom

Usage​

API Reference​

Properties​

Example​

Usage

API Reference

Properties

Example