markdown better

src/components/ui/MarkdownContent.tsx

@@ -15,13 +15,28 @@ export default function MarkdownContent({
   return (
     <div
       className={`
-        prose max-w-none text-slate-700
+        prose prose-slate max-w-none
         ${size === "compact" ? "prose-xs" : "prose-sm"}
-        prose-headings:text-slate-900
-        prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline
-        prose-code:bg-slate-100 prose-code:px-1 prose-code:py-0.5 prose-code:rounded
-        prose-code:text-slate-800 prose-code:font-mono prose-code:text-xs
-        prose-pre:bg-slate-100 prose-pre:border prose-pre:border-slate-200
+        prose-headings:font-semibold prose-headings:text-slate-900
+        prose-h1:text-lg prose-h2:text-base prose-h3:text-sm
+        prose-p:text-slate-700 prose-p:leading-relaxed
+        prose-a:text-blue-600 prose-a:font-medium prose-a:no-underline hover:prose-a:underline
+        prose-strong:text-slate-900 prose-strong:font-semibold
+        prose-em:text-slate-700
+        prose-code:bg-slate-100 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded
+        prose-code:text-slate-800 prose-code:font-mono prose-code:text-xs prose-code:before:content-none prose-code:after:content-none
+        prose-pre:bg-slate-900 prose-pre:text-slate-100 prose-pre:border-0 prose-pre:rounded-lg prose-pre:p-4 prose-pre:overflow-x-auto
+        prose-pre:shadow-sm
+        prose-blockquote:border-l-4 prose-blockquote:border-blue-300 prose-blockquote:text-slate-700
+        prose-blockquote:italic prose-blockquote:px-4 prose-blockquote:py-1
+        prose-ul:text-slate-700 prose-ul:space-y-1
+        prose-ol:text-slate-700 prose-ol:space-y-1
+        prose-li:text-slate-700 prose-li:leading-relaxed
+        prose-hr:border-slate-200
+        prose-table:text-slate-700
+        prose-thead:bg-slate-50 prose-thead:border-slate-200
+        prose-tr:border-slate-200
+        prose-img:rounded-lg prose-img:shadow-sm
       `}
     >
       <ReactMarkdown>{content}</ReactMarkdown>