Markdown

http://localhost:3000

const { default: routerProvider } = LegacyRefineReactRouterV6;
const { default: simpleRest } = RefineSimpleRest;
setRefineProps({
    legacyRouterProvider: routerProvider,
    dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
    Layout: RefineChakra.Layout,
    Sider: () => null,
});

const Wrapper = ({ children }) => {
    return (
        <ChakraUI.ChakraProvider theme={RefineChakra.refineTheme}>
            {children}
        </ChakraUI.ChakraProvider>
    );
};

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

Swizzle

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

Usage

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

http://localhost:3000

import { useShow } from "@refinedev/core";
import {
    Show,
    MarkdownField,
} from "@refinedev/chakra-ui";
import { Heading, Text } from "@chakra-ui/react";

const PostShow: React.FC = () => {
    const { queryResult } = useShow<IPost>();
    const { data, isLoading } = queryResult;
    const record = data?.data;

    return (
        <Show isLoading={isLoading}>
            <Heading as="h5" size="sm">
                Id
            </Heading>
            <Text mt={2}>{record?.id}</Text>
            <Heading as="h5" size="sm" mt={4}>
                Content
            </Heading>
            <MarkdownField value={record?.content} />
        </Show>
    );
};

interface IPost {
    id: number;
    content: string;
}

API Reference

Properties