Markdown Renderer

The Markdown Renderer component allows rendering Markdown content safely with support for various customizations.

Usage & Examples

default.tsx

<MarkdownRenderer content={`
# Markdown Test

- Item 1
- Item 2
- [Visit BorealUI](https://www.borealui.ca)
- `Inline code`

> Blockquote
`} />

Markdown Renderer props API
				Default	Description
`allowHtml`	`boolean`	No	props	`false`	Allows raw HTML embedded in markdown before sanitization. Leave false for untrusted content.
`aria-describedby`	`string`	No	aria	`—`	ID of an element that describes the markdown region.
`aria-label`	`string`	No	aria	`—`	Accessible label for the markdown region. Use this when there is no visible heading associated with the content.
`aria-labelledby`	`string`	No	aria	`—`	ID of an element that labels the markdown region. Prefer this when a visible heading already exists.
`className`	`string`	No	styling	`—`	Optional additional class name for styling.
`content`	`string`	Yes	props	`—`	Raw markdown content to be rendered as HTML.
`data-testid`	`string`	No	testing	`—`	Backward-compatible alias for test ID attributes.
`language`	`string`	No	props	`"en"`	Language of the rendered markdown content.
`role`	`React.AriaRole`	No	aria	`"region"`	Optional ARIA role for the wrapper element. Defaults to "region".
`rounding`	`RoundingType`	No	styling	`configured default rounding (fallback: "medium")`	Optional rounding style for the rendered container. One of: "none" \| "small" \| "medium" \| "large" \| "full"
`shadow`	`ShadowType`	No	styling	`configured default shadow (fallback: "light")`	Optional shadow styling for the rendered container. One of: "none" \| "light" \| "medium" \| "strong" \| "intense"
`tabIndex`	`number`	No	props	`—`	Optional tab index for keyboard focus management.