Skip to main content
Version: 3.xx.xx
Swizzle Ready

Markdown

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.

localhost:3000/posts
Live previews only work with the latest documentation.
import {
useDataGrid,
DataGrid,
GridColumns,
List,
MarkdownField,
} from "@pankod/refine-mui";

const columns: GridColumns = [
{ field: "id", headerName: "ID", type: "number" },
{ field: "title", headerName: "Title", minWidth: 100, flex: 1 },
{
field: "content",
headerName: "Content",
renderCell: function render({ row }) {
return <MarkdownField value={row?.content} />;
},
minWidth: 100,
flex: 2,
},
];

const PostsList: React.FC = () => {
const { dataGridProps } = useDataGrid<IPost>();

return (
<List>
<DataGrid {...dataGridProps} columns={columns} autoHeight />
</List>
);
};

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

API Reference

Properties

Example

Run on your local
npm create refine-app@latest -- --example input-custom