53 lines
1.8 KiB
TypeScript
53 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import ReactMarkdown from "react-markdown";
|
|
import rehypeHighlight from "rehype-highlight";
|
|
import remarkGfm from "remark-gfm";
|
|
|
|
interface PostContentProps {
|
|
content: string;
|
|
}
|
|
|
|
export function PostContent({ content }: PostContentProps) {
|
|
return (
|
|
<div className="prose prose-lg max-w-none prose-headings:tracking-tight prose-headings:font-bold prose-p:leading-relaxed prose-p:text-neutral-700 prose-a:border-b prose-a:border-black prose-a:no-underline hover:prose-a:border-transparent prose-img:my-8 prose-pre:bg-[#f6f8fa] prose-pre:p-6 prose-code:font-mono prose-code:text-base">
|
|
<ReactMarkdown
|
|
remarkPlugins={[remarkGfm]}
|
|
rehypePlugins={[[rehypeHighlight, { detect: true }]]}
|
|
components={{
|
|
img: ({ src, alt }) => (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img
|
|
src={src}
|
|
alt={alt || ""}
|
|
className="w-full aspect-video object-cover my-8"
|
|
/>
|
|
),
|
|
pre: ({ children }) => (
|
|
<pre className="bg-[#f6f8fa] p-6 font-mono text-base text-black rounded-none border border-neutral-200 whitespace-pre-wrap break-words overflow-hidden">
|
|
{children}
|
|
</pre>
|
|
),
|
|
code: ({ className, children, ...props }) => {
|
|
const isInline = !className;
|
|
if (isInline) {
|
|
return (
|
|
<code className="bg-neutral-100 px-1.5 py-0.5 font-mono text-base text-black" {...props}>
|
|
{children}
|
|
</code>
|
|
);
|
|
}
|
|
return (
|
|
<code className={className} {...props}>
|
|
{children}
|
|
</code>
|
|
);
|
|
},
|
|
}}
|
|
>
|
|
{content}
|
|
</ReactMarkdown>
|
|
</div>
|
|
);
|
|
}
|