Markdown

http://localhost:3000

Live previews only work with the latest documentation.

const { default: routerProvider } = RefineReactRouterV6
const { default: simpleRest } = RefineSimpleRest
setRefineProps({
  routerProvider,
  dataProvider: simpleRest('https://api.fake-rest.refine.dev'),
  notificationProvider: RefineMantine.notificationProvider,
  Layout: RefineMantine.Layout,
  Sider: () => null,
})

const Wrapper = ({ children }) => {
  return (
    <RefineMantine.MantineProvider
      theme={RefineMantine.LightTheme}
      withNormalizeCSS
      withGlobalStyles
    >
      <RefineMantine.Global
        styles={{ body: { WebkitFontSmoothing: 'auto' } }}
      />
      <RefineMantine.NotificationsProvider position="top-right">
        {children}
      </RefineMantine.NotificationsProvider>
    </RefineMantine.MantineProvider>
  )
}

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

Live previews only work with the latest documentation.

import { useShow } from '@pankod/refine-core'
import { Show, Title, Text, MarkdownField } from '@pankod/refine-mantine'

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

  return (
    <Show isLoading={isLoading}>
      <Title order={5}>Id</Title>
      <Text mt="sm">{record?.id}</Text>
      <Title mt="sm" order={5}>
        Content
      </Title>
      <MarkdownField value={record?.content} />
    </Show>
  )
}

interface IPost {
  id: number
  content: string
}

API Reference

Properties