asepharyana
8906ed55a0
CI / typecheck + build (turbo) (push) Canceled after 0s
react-markdown without remark-gfm doesn't parse GitHub Flavored Markdown tables — the pipe characters were rendered as plain text instead of <table> HTML. Fix: install remark-gfm@4 and pass it to ReactMarkdown remarkPlugins. Also add overflow-x-auto wrapper for table responsiveness.
37 lines
1.5 KiB
TypeScript
37 lines
1.5 KiB
TypeScript
import ReactMarkdown from "react-markdown";
|
|
import remarkGfm from "remark-gfm";
|
|
import rehypeSlug from "rehype-slug";
|
|
|
|
export default function Markdown({ source }: { source: string }) {
|
|
return (
|
|
<div
|
|
className="prose prose-lg max-w-none
|
|
prose-headings:text-[#f7f8f8] prose-headings:font-light prose-headings:mb-4
|
|
prose-p:text-[#d0d6e0] prose-p:mb-4
|
|
prose-a:text-[#7170ff] prose-a:no-underline hover:prose-a:text-[#828fff]
|
|
prose-code:text-[#d0d6e0] prose-code:bg-[#191a1b] prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none
|
|
prose-pre:bg-[#191a1b] prose-pre:border prose-pre:border-[#23252a] prose-pre:rounded-lg
|
|
prose-pre code:bg-transparent prose-pre code:p-0 prose-pre code:text-sm
|
|
prose-blockquote:border-l-[#23252a] prose-blockquote:text-[#a0a4a8]
|
|
prose-ul:text-[#d0d6e0] prose-ol:text-[#d0d6e0]
|
|
prose-table:border-collapse [&>_table]:overflow-x-auto
|
|
prose-th:bg-[#191a1b] prose-th:text-[#f7f8f8] prose-th:font-medium
|
|
prose-td:border-[#1f2022] prose-th:border-[#1f2022]"
|
|
>
|
|
<ReactMarkdown
|
|
remarkPlugins={[remarkGfm]}
|
|
rehypePlugins={[rehypeSlug]}
|
|
components={{
|
|
table: ({ node, ...props }) => (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full border-collapse" {...props} />
|
|
</div>
|
|
),
|
|
}}
|
|
>
|
|
{source}
|
|
</ReactMarkdown>
|
|
</div>
|
|
);
|
|
}
|