mirror of
https://github.com/supabase/supabase.git
synced 2026-09-07 02:20:52 +08:00
e79f0d1dd1
## What kind of change does this PR introduce? Add `Markdown` component - as a ui-pattern - docs in design-system <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Introduced a Markdown UI pattern with full documentation and a docs sidebar entry. * Markdown component supports composable renderers, optional lazy syntax highlighting, and customizable element overrides. * Added many interactive examples (full demo, headings, paragraphs, lists, links, inline code, blockquotes, code blocks, tables, images, horizontal rules) plus Quote and Avatar demos. * **Documentation** * New MDX guide detailing usage, props, and customization previews. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46325?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai -->
52 lines
996 B
TypeScript
52 lines
996 B
TypeScript
import { Markdown } from 'ui-patterns/Markdown'
|
||
|
||
export default function MarkdownFullExample() {
|
||
const content = `# Main Heading
|
||
|
||
This is a paragraph with some **bold text**, *italic text*, and \`inline code\`.
|
||
|
||
## Subheading
|
||
|
||
You can use [links](https://supabase.com) in your content.
|
||
|
||
### Code Example
|
||
|
||
\`\`\`javascript
|
||
const greeting = 'Hello, Markdown!'
|
||
console.log(greeting)
|
||
\`\`\`
|
||
|
||
### Lists
|
||
|
||
**Unordered list:**
|
||
- First item
|
||
- Second item
|
||
- Nested item
|
||
- Another nested item
|
||
- Third item
|
||
|
||
**Ordered list:**
|
||
1. First step
|
||
2. Second step
|
||
3. Third step
|
||
|
||
### Blockquote
|
||
|
||
> This is a blockquote. It can span multiple lines and is useful for emphasizing important information or highlighting quotes.
|
||
|
||
### Horizontal Rule
|
||
|
||
---
|
||
|
||
### Table
|
||
|
||
| Feature | Support | Status |
|
||
|---------|---------|--------|
|
||
| Headings | h1–h6 | ✓ |
|
||
| Lists | Unordered & Ordered | ✓ |
|
||
| Code | Inline & Blocks | ✓ |
|
||
| Tables | GitHub Flavored | ✓ |`
|
||
|
||
return <Markdown codeBlock>{content}</Markdown>
|
||
}
|