MarkdownView.tsx (1454B)
1 import React from 'react' 2 import Markdown from 'react-markdown' 3 4 export function MarkdownView({ children, className }: { children?: string | null | undefined, className?: string }) { 5 return ( 6 <Markdown components={{ 7 h1: ({node, ...props}) => <h1 className="opacity-90 font-bold text-6xl mb-6" {...props} />, 8 h2: ({node, ...props}) => <h2 className="opacity-90 font-bold text-4xl mb-4" {...props} />, 9 h3: ({node, ...props}) => <h3 className="opacity-90 font-bold text-2xl" {...props} />, 10 ul: ({node, ...props}) => <ul className="opacity-80 list-disc list-inside mb-5" {...props} />, 11 ol: ({node, ...props}) => <ol className="opacity-80 list-decimal list-inside mb-5" {...props} />, 12 li: ({node, ...props}) => <li className="opacity-80 m-1" {...props} />, 13 em: ({node, ...props}) => <i className="italic" {...props} />, 14 strong: ({node, ...props}) => <strong className="font-bold text-white" {...props} />, 15 p: ({node, ...props}) => <p className="opacity-80 mb-4" {...props} />, 16 a: ({node, ...props}) => <a className="text-damuspink-600 underline" {...props} />, 17 pre: ({node, ...props}) => <pre className="my-2 bg-white/10 overflow-scroll p-3 rounded-lg font-mono" {...props} />, 18 code: ({node, ...props}) => { 19 return (<code className="my-2 bg-white/10 overflow-scroll p-1 font-mono rounded-sm" {...props} />) 20 }, 21 }} className={className}>{children}</Markdown> 22 ) 23 }