it actually works (md)

src/components/ui/MarkdownContent.tsx

@@ -12,41 +12,82 @@ export default function MarkdownContent({
   content,
   size = "full",
 }: MarkdownContentProps) {
-  const isCompact = size === "compact";
-  
   return (
     <div
-      className={`
+      className={`max-w-none space-y-3 text-slate-700 ${
-        prose prose-slate max-w-none
+        size === "compact" ? "text-xs" : "text-sm"
-        ${isCompact ? "prose-xs" : "prose-base"}
+      }`}
-        prose-headings:font-bold prose-headings:text-slate-900
+      suppressHydrationWarning
-        prose-h1:text-2xl prose-h1:mt-6 prose-h1:mb-3
-        prose-h2:text-xl prose-h2:mt-5 prose-h2:mb-2
-        prose-h3:text-lg prose-h3:mt-4 prose-h3:mb-2
-        prose-h4:text-base prose-h4:mt-3 prose-h4:mb-1
-        prose-p:text-slate-700 prose-p:leading-relaxed prose-p:my-2
-        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-bold
-        prose-em:text-slate-700 prose-em:italic
-        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-sm 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-pre:my-3
-        prose-blockquote:border-l-4 prose-blockquote:border-blue-300 prose-blockquote:text-slate-600
-        prose-blockquote:italic prose-blockquote:px-4 prose-blockquote:py-1 prose-blockquote:my-2
-        prose-ul:list-disc prose-ul:list-inside prose-ul:text-slate-700 prose-ul:my-2 prose-ul:pl-4
-        prose-ol:list-decimal prose-ol:list-inside prose-ol:text-slate-700 prose-ol:my-2 prose-ol:pl-4
-        prose-li:text-slate-700 prose-li:leading-relaxed prose-li:my-1
-        prose-hr:border-slate-300 prose-hr:my-4
-        prose-table:text-slate-700 prose-table:my-3
-        prose-thead:bg-slate-100 prose-thead:border-slate-300
-        prose-td:px-3 prose-td:py-2 prose-td:border-slate-200
-        prose-th:px-3 prose-th:py-2 prose-th:border-slate-300 prose-th:font-semibold
-        prose-tr:border-slate-200
-        prose-img:rounded-lg prose-img:shadow-md prose-img:my-3
-      `}
     >
-      <ReactMarkdown>{content}</ReactMarkdown>
+      <ReactMarkdown
+        components={{
+          h1: ({ ...props }) => (
+            <h1 className="text-2xl font-bold text-slate-900 mt-6 mb-3" {...props} />
+          ),
+          h2: ({ ...props }) => (
+            <h2 className="text-xl font-bold text-slate-900 mt-5 mb-2" {...props} />
+          ),
+          h3: ({ ...props }) => (
+            <h3 className="text-lg font-bold text-slate-900 mt-4 mb-2" {...props} />
+          ),
+          h4: ({ ...props }) => (
+            <h4 className="text-base font-bold text-slate-900 mt-3 mb-1" {...props} />
+          ),
+          p: ({ ...props }) => (
+            <p className="text-slate-700 leading-relaxed my-2" {...props} />
+          ),
+          a: ({ ...props }) => (
+            <a className="text-blue-600 font-medium underline hover:text-blue-700" {...props} />
+          ),
+          strong: ({ ...props }) => (
+            <strong className="font-bold text-slate-900" {...props} />
+          ),
+          em: ({ ...props }) => (
+            <em className="italic text-slate-600" {...props} />
+          ),
+          code: ({ ...props }) => (
+            <code
+              className="bg-slate-100 px-1.5 py-0.5 rounded text-slate-800 font-mono text-xs"
+              {...props}
+            />
+          ),
+          pre: ({ ...props }) => (
+            <pre className="bg-slate-900 text-slate-100 rounded-lg p-4 overflow-x-auto shadow-sm my-3" {...props} />
+          ),
+          blockquote: ({ ...props }) => (
+            <blockquote className="border-l-4 border-blue-300 text-slate-600 italic px-4 py-1 my-2" {...props} />
+          ),
+          ul: ({ ...props }) => (
+            <ul className="list-disc list-inside text-slate-700 my-2 pl-4 space-y-1" {...props} />
+          ),
+          ol: ({ ...props }) => (
+            <ol className="list-decimal list-inside text-slate-700 my-2 pl-4 space-y-1" {...props} />
+          ),
+          li: ({ ...props }) => (
+            <li className="text-slate-700 leading-relaxed" {...props} />
+          ),
+          hr: ({ ...props }) => (
+            <hr className="border-slate-300 my-4" {...props} />
+          ),
+          table: ({ ...props }) => (
+            <table className="w-full text-slate-700 my-3 border-collapse" {...props} />
+          ),
+          thead: ({ ...props }) => (
+            <thead className="bg-slate-100" {...props} />
+          ),
+          th: ({ ...props }) => (
+            <th className="px-3 py-2 border border-slate-300 font-semibold text-left" {...props} />
+          ),
+          td: ({ ...props }) => (
+            <td className="px-3 py-2 border border-slate-200" {...props} />
+          ),
+          img: ({ ...props }) => (
+            <img className="rounded-lg shadow-md my-3 max-w-full" {...props} />
+          ),
+        }}
+      >
+        {content}
+      </ReactMarkdown>
     </div>
   );
 }