Markdown

Render markdown content with XSS protection. Supports headings, bold, italic, and lists.

Installation

typescript

import { Markdown } from '@happyvertical/smrt-svelte';

Render markdown content with automatic styling.

This is a paragraph with emphasis and strong text.

svelte

<Markdown content={markdownText} />

Support for H1, H2, and H3 headings.

svelte

<Markdown content={`# Heading 1
## Heading 2
### Heading 3`} />

Bold and italic text formatting.

This text has bold words and italic words.

You can also combine bold and nested italic text.

svelte

<Markdown content="**bold** and *italic*" />

Unordered list support.

svelte

<Markdown content={`- First item
- Second item
- Third item`} />

The Markdown component automatically escapes HTML to prevent XSS attacks. User-provided content is safe to render.

svelte

<Markdown content="<script>alert('xss')</script>" />

Prop	Type	Default	Description
`content` *	`string`	-	Markdown content to render

typescript

import { Markdown } from '@happyvertical/smrt-svelte';

interface Props {
  content: string;
}