Markdown

A component for rendering Markdown content with support for GitHub Flavored Markdown (GFM) and custom component styling.

Examples

Basic Markdown

Render basic Markdown with support for bold, italics, lists, code blocks and more.

Markdown Example

This is a bold text and this is an italic text.

Lists

Unordered List

Item 1
Item 2
Item 3

Ordered List

First item
Second item
Third item

Links and Images

Visit Prompt Kit

Code

Inline code example.

javascript

// Code block examplefunction greet(name) {  return `Hello, ${name}!`;}

Markdown with Custom Components

You can customize how different Markdown elements are rendered by providing custom components.

Custom Components Example

Styled Headings

This is a custom styled H3

Custom Blockquotes

This is a custom styled blockquote with multiple lines of text.

Custom Lists

First item with custom styling
Second item with custom styling
Third item with custom styling

Installation

Copy and paste the following code into your project.

pnpm dlx shadcn-svelte@latest add https://ai-elements.vercel.app/r/prompt-kit-markdown.json

Component API

Markdown

Prop	Type	Default	Description
`content`	`string`	-	Markdown content to render
`className`	`string`	-	Additional CSS classes
`...props`	`HTMLAttributes<HTMLDivElement>`	-	All other div props are supported

Supported Markdown Features

The Markdown component uses svelte-streamdown with remark-gfm to support GitHub Flavored Markdown, which includes:

Tables
Strikethrough
Tasklists
Literal URLs
Footnotes

Additionally, the component includes built-in code block highlighting through syntax highlighting support.

Performance Optimization

The Markdown component employs advanced memoization techniques to optimize rendering performance, especially in streaming AI response scenarios. This approach is crucial when rendering chat interfaces where new tokens are continuously streamed.

How Memoization Works

Our implementation:

Splits Markdown content into discrete semantic blocks
Memoizes each block individually
Only re-renders blocks that have actually changed when new content arrives
Preserves already rendered blocks to prevent unnecessary re-parsing and re-rendering

This pattern significantly improves performance in chat applications by preventing the entire message history from re-rendering with each new token, which becomes increasingly important as conversations grow longer.

Styling with Tailwind Typography

For the best typography styling experience, we recommend using the @tailwindcss/typography plugin. This plugin provides a set of prose classes that add beautiful typographic defaults to your markdown content.

When using the Markdown component with Tailwind Typography, you can apply the prose class to get beautiful default styling.