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

Live previews only work with the latest documentation.

import { useShow, IResourceComponentsProps } from "@pankod/refine-core";
import {
  Show,
  Typography,
  MarkdownField,
} from "@pankod/refine-antd";

const { Title, Text } = Typography;

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

  return (
    <Show isLoading={isLoading}>
      <Title level={5}>Id</Title>
      <Text>{record?.id}</Text>

      <Title level={5}>Content</Title>

      <MarkdownField value={record?.content} />
    </Show>
  );
};

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

API Reference

Properties

Example

View Source Code

Run on your local

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

Swizzle

Usage​

API Reference​

Properties​

Example​

Usage

API Reference

Properties

Example