Skip to main content
Markdown(content: string): Component;

Parameters

content
string
The markdown string to render with full document-style formatting.

Support

Usage

Basic markdown

Markdown("# Hello World\n\nThis is a paragraph.")

Headings and paragraphs

Markdown(`
# Main Title

This is a paragraph with proper spacing.

## Subsection

Another paragraph here.
`)

Lists

Markdown(`
## Shopping List

- Apples
- Oranges
- Bananas

## Todo List

1. Write documentation
2. Review code
3. Deploy updates
`)

Text formatting

Markdown(`
This paragraph includes **bold text**, *italic text*, and ***bold italic text***.

You can also use \`inline code\` and [links](https://example.com).
`)

Code blocks

Markdown(`
Here's a code example:

\`\`\`javascript
function greet(name) {
    console.log("Hello, " + name);
}
\`\`\`
`)

Complex document

Markdown(`
# Article Title

By John Doe | March 15, 2024

## Introduction

This is the introduction paragraph with **important** information.

## Key Points

- First key point
- Second key point with *emphasis*
- Third key point

## Conclusion

Visit [our website](https://example.com) for more information.
`)

Comparison with Text markdown

Unlike Text({ markdown: "..." }) which uses inline formatting, Markdown provides:
  • Proper paragraph spacing
  • Heading margins and hierarchy
  • List formatting suitable for long-form content
  • Document-style layout
// Inline markdown (Text component)
Text({ markdown: "**Bold** text" })

// Document markdown (Markdown component)
Markdown("# Heading\n\n**Bold** text with proper spacing")