it actually works (md)
This commit is contained in:
@@ -12,41 +12,82 @@ export default function MarkdownContent({
|
||||
content,
|
||||
size = "full",
|
||||
}: MarkdownContentProps) {
|
||||
const isCompact = size === "compact";
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`
|
||||
prose prose-slate max-w-none
|
||||
${isCompact ? "prose-xs" : "prose-base"}
|
||||
prose-headings:font-bold prose-headings:text-slate-900
|
||||
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
|
||||
`}
|
||||
className={`max-w-none space-y-3 text-slate-700 ${
|
||||
size === "compact" ? "text-xs" : "text-sm"
|
||||
}`}
|
||||
suppressHydrationWarning
|
||||
>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user