Markdown - Supabase — ContextQMD

A composable react-markdown component with defaults for all standard markdown elements (headings, paragraphs, lists, blockquotes, links, images, tables, code). Customize any element via the components prop and import optional components such as Quote or Avatar. All components are lazy-loaded.

API

Prop	Type	Default	Description
`children`	`string`	-	Markdown content to render
`content`	`string`	`''`	Deprecated: Use `children` instead
`codeBlock`	`boolean`	`false`	Enable syntax highlighting for code blocks (lazy-loaded via CodeBlock)
`components`	`Partial<Components>`	-	Override or add specific markdown elements
`className`	`string`	-	CSS class for the wrapper div
`remarkPlugins`	`PluggableList`	`[remarkGfm]`	Additional remark plugins (GFM is included by default)

All other react-markdown options are supported via spread props.

Customization

Override any element or add new ones via the components prop.

Primitive Components

tsx

import {
  Anchor,
  Avatar,
  Blockquote,
  Code,
  CodeBlockPre,
  DefaultPre,
  Hr,
  Img,
  Paragraph,
  Quote,
  SimplePre,
  Table,
  Td,
  Th,
  Tr,
  UnorderedList,
} from 'ui-patterns/Markdown'

Headings

Paragraphs

Lists

Links

Inline Code

Blockquotes

Code Blocks

Tables

Images

Horizontal Rules

Optional Components

Quote

Avatar