Markdown Chatbot

Markdown Syntax Highlighting Streaming

Transform plain AI responses into beautifully formatted content with syntax-highlighted code, lists, tables, and more.

Overview

Most AI responses contain markdown - code blocks, bullet points, headers. Raw markdown is hard to read. This recipe uses svelte-streamdown to render streaming markdown with Shiki-powered syntax highlighting that works perfectly in both light and dark modes.

Demo

Ask for code examples to see syntax highlighting in action!

Try: "Show me a TypeScript function with error handling"

Server Endpoint

Guide the AI to use markdown formatting with a system prompt:

src/routes/api/chat/+server.ts

The Markdown Component

svelte-streamdown handles streaming markdown gracefully, rendering partial content as it arrives:

markdown.svelte

Rendering Messages

Render user messages as plain text and assistant messages as markdown:

+page.svelte

Key Features

Streaming Support

Unlike regular markdown renderers, svelte-streamdown handles partial markdown gracefully - no flickering or broken rendering mid-stream.

Syntax Highlighting

Shiki provides beautiful syntax highlighting for 100+ languages. Themes adapt automatically to light/dark mode.

Prose Styling

Tailwind's prose classes style headings, lists, links, and more. Use dark:prose-invert for dark mode.