MarkdownRenderer Example

This component supports both light and dark color modes via the colorMode prop. Consumers should pass it synchronized with their own theme.

Dark mode

Hello from MarkdownRenderer

This component renders GitHub Flavored Markdown, including:

Feature	Supported
Bold / italic	✓
Tables (GFM)	✓
Strikethrough	✓

~~No more silent rendering bugs.~~ GFM is now native.

Light mode

Hello from MarkdownRenderer

This component renders GitHub Flavored Markdown, including:

Feature	Supported
Bold / italic	✓
Tables (GFM)	✓
Strikethrough	✓

~~No more silent rendering bugs.~~ GFM is now native.

How to use this markdown-renderer

Props

Name	Type	Default	Description
source	string	—	Markdown content to render. Required.
colorMode	enum ("light" \| "dark")	"light"	Color mode propagated via the `data-color-mode` attribute, used by the internal markdown rendering.
className	string	—	Optional CSS class merged on the wrapper div.

Playground

Import from @filigran/ui :

Import {MarkdownRenderer} from '@filigran/ui/clients'

<MarkdownRenderer
source={`# Markdown demo

**Bold** text, *italic*, and a [link](https://filigran.io).

| Col 1 | Col 2 |
|-------|-------|
| A     | B     |

- [x] Task done
- [ ] Task pending
`}
  colorMode="dark"
/>