markdown renderer
high-fidelity markdown with code blocks, youtube embeds, and zoomable images.
examples
headings & text
Heading 1
Heading 2
Heading 3
Regular paragraph with bold, italic, and strikethrough text.
This is a blockquote with some important information.
code blocks
Inline code looks like this.
1interface User {2 id: string;3 name: string;4 email: string;5}6 7async function getUser(id: string): Promise<User> {8 const response = await fetch(`/api/users/${id}`);9 return response.json();10}lists
Unordered List:
- First item
- Second item
- Nested item
- Another nested item
- Third item
Ordered List:
- Step one
- Step two
- Step three
tables
| Feature | Status | Notes |
|---|---|---|
| Markdown | ✅ | Full GFM support |
| Code blocks | ✅ | Syntax highlighting |
| Tables | ✅ | With styling |
| Images | ✅ | Zoomable |
links & media
compact mode
smaller text for chat interfaces
Compact mode uses smaller text sizes, perfect for chat interfaces with inline code support.
standalone components
these components can be installed separately for use outside of the markdown renderer.
code block
syntax-highlighted code with copy button
npx shadcn@latest add https://ui.inference.sh/r/code-block.jsonpython
1def fibonacci(n):2 """Calculate the nth Fibonacci number."""3 if n <= 1:4 return n5 return fibonacci(n - 1) + fibonacci(n - 2)67# Example usage8for i in range(10):9 print(f"F({i}) = {fibonacci(i)}")youtube embed
responsive video embed
npx shadcn@latest add https://ui.inference.sh/r/youtube-embed.jsonzoomable image
click to zoom with lightbox
npx shadcn@latest add https://ui.inference.sh/r/zoomable-image.jsonclick the image to zoom
installation
bash
1npx shadcn@latest add https://ui.inference.sh/r/markdown.jsonusage
tsx
1import { MarkdownRenderer } from '@/components/markdown-renderer'23export function MyComponent() {4 const content = `5# Hello World67This is **bold** and *italic* text.89\`\`\`typescript10const greeting = 'Hello!'11\`\`\`12`1314 return <MarkdownRenderer content={content} />15}