| 10 | } |
| 11 | |
| 12 | export function MarkdownContent({ content, className }: MarkdownContentProps) { |
| 13 | return ( |
| 14 | <div |
| 15 | className={cn( |
| 16 | "prose prose-sm prose-invert max-w-none", |
| 17 | "prose-p:leading-relaxed prose-p:my-1", |
| 18 | "prose-pre:bg-surface-900 prose-pre:border prose-pre:border-surface-700", |
| 19 | "prose-code:text-brand-300 prose-code:bg-surface-900 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:text-xs", |
| 20 | "prose-pre:code:bg-transparent prose-pre:code:text-surface-100 prose-pre:code:p-0", |
| 21 | "prose-ul:my-1 prose-ol:my-1 prose-li:my-0.5", |
| 22 | "prose-headings:text-surface-100 prose-headings:font-semibold", |
| 23 | "prose-a:text-brand-400 prose-a:no-underline hover:prose-a:underline", |
| 24 | "prose-blockquote:border-brand-500 prose-blockquote:text-surface-300", |
| 25 | "prose-hr:border-surface-700", |
| 26 | className |
| 27 | )} |
| 28 | > |
| 29 | <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown> |
| 30 | </div> |
| 31 | ); |
| 32 | } |