add markdown viewer

This commit is contained in:
Janis
2023-01-15 02:48:17 +01:00
parent 9617dc2ef3
commit a0598484b4
11 changed files with 1263 additions and 122 deletions

View File

@@ -3,32 +3,36 @@ import PropTypes from "prop-types";
import ReactMarkdown from "react-markdown";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import oneDark from "react-syntax-highlighter/dist/esm/styles/prism/one-dark";
import LoadMarkdown from "./articles/[categoryName]/[articleName]/LoadMarkdown";
export default function Markdown({ value }: { value: any }) {
return (
<ReactMarkdown
// eslint-disable-next-line react/no-children-prop
children={value}
components={{
code({ node, inline, className, children, ...props }) {
const match = /language-(\w+)/.exec(className || "");
return !inline && match ? (
<SyntaxHighlighter
// eslint-disable-next-line react/no-children-prop
children={String(children).replace(/\n$/, "")}
style={oneDark}
language={match[1]}
PreTag="div"
{...props}
/>
) : (
<code className={className} {...props}>
{children}
</code>
);
},
}}
/>
<div>
<ReactMarkdown
// eslint-disable-next-line react/no-children-prop
children={value}
components={{
code({ node, inline, className, children, ...props }) {
const match = /language-(\w+)/.exec(className || "");
return !inline && match ? (
<SyntaxHighlighter
// eslint-disable-next-line react/no-children-prop
children={String(children).replace(/\n$/, "")}
style={oneDark}
language={match[1]}
PreTag="div"
{...props}
/>
) : (
<code className={className} {...props}>
{children}
</code>
);
},
}}
/>
<LoadMarkdown />
</div>
);
}