Spaces:
Running
Running
File size: 2,869 Bytes
d3c7f96 c38a89e d3c7f96 c38a89e d3c7f96 c38a89e d3c7f96 c38a89e d3c7f96 c38a89e d3c7f96 c38a89e d3c7f96 c38a89e d3c7f96 c38a89e d3c7f96 c38a89e d3c7f96 c38a89e d3c7f96 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
const PLUGINS = [remarkGfm];
const COMPONENTS = {
p: ({ children }) => <p className="mb-3 last:mb-0">{children}</p>,
strong: ({ children }) => <strong className="font-semibold text-[var(--color-text)]">{children}</strong>,
em: ({ children }) => <em className="italic">{children}</em>,
h1: ({ children }) => <h1 className="text-xl font-bold mb-2 mt-4">{children}</h1>,
h2: ({ children }) => <h2 className="text-lg font-bold mb-2 mt-3">{children}</h2>,
h3: ({ children }) => <h3 className="text-base font-bold mb-1 mt-2">{children}</h3>,
ul: ({ children }) => <ul className="list-disc pl-5 mb-3 space-y-1">{children}</ul>,
ol: ({ children }) => <ol className="list-decimal pl-5 mb-3 space-y-1">{children}</ol>,
li: ({ children }) => <li className="leading-relaxed">{children}</li>,
a: ({ href, children }) => (
<a href={href} target="_blank" rel="noopener noreferrer" className="text-[var(--color-blue)] hover:underline">
{children}
</a>
),
blockquote: ({ children }) => (
<blockquote className="border-l-2 border-[var(--color-blue)]/40 pl-3 my-2 text-[var(--color-text-secondary)]">
{children}
</blockquote>
),
code: ({ inline, className, children }) => {
if (inline) {
return (
<code className="px-1.5 py-0.5 bg-[var(--color-surface-high)] rounded text-[13px] font-mono text-[var(--color-blue)]">
{children}
</code>
);
}
const lang = className?.replace("language-", "") || "";
return (
<div className="my-3 rounded-xl overflow-hidden border border-[var(--color-outline)]">
{lang && (
<div className="px-3 py-1.5 bg-[var(--color-surface-high)] text-[10px] font-mono text-[var(--color-text-secondary)] uppercase tracking-wider border-b border-[var(--color-outline)]">
{lang}
</div>
)}
<pre className="p-3 bg-[var(--color-surface)] overflow-x-auto">
<code className="text-[13px] font-mono leading-relaxed text-[var(--color-text)]">
{children}
</code>
</pre>
</div>
);
},
table: ({ children }) => (
<div className="my-3 overflow-x-auto">
<table className="w-full text-sm border-collapse">{children}</table>
</div>
),
th: ({ children }) => (
<th className="text-left px-3 py-2 bg-[var(--color-surface)] border border-[var(--color-outline)] font-medium">
{children}
</th>
),
td: ({ children }) => (
<td className="px-3 py-2 border border-[var(--color-outline)]">{children}</td>
),
hr: () => <hr className="my-4 border-[var(--color-outline)]" />,
};
export default function Markdown({ children }) {
return (
<ReactMarkdown remarkPlugins={PLUGINS} components={COMPONENTS}>
{children}
</ReactMarkdown>
);
}
|