fix: render of markdown preview

src/components/Markdowns/MarkdownView.js

@@ -0,0 +1,42 @@
+import React from "react";
+import ReactMarkdown from "react-markdown";
+import remarkMath from "remark-math";
+import rehypeKatex from "rehype-katex";
+import rehypeRaw from "rehype-raw";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { okaidia } from "react-syntax-highlighter/dist/esm/styles/prism";
+import "katex/dist/katex.min.css";
+import "./MarkdownView.css";
+
+const MarkdownPreview = ({ content, height="auto" }) => {
+    return (
+        <div className="markdown-preview" style={{height}}>
+            <ReactMarkdown
+                children={content}
+                remarkPlugins={[remarkMath]}
+                rehypePlugins={[rehypeKatex, rehypeRaw]}
+                components={{
+                    code({ node, inline, className, children, ...props }) {
+                        const match = /language-(\w+)/.exec(className || "");
+                        return !inline && match ? (
+                            <SyntaxHighlighter
+                                style={okaidia}
+                                language={match[1]}
+                                PreTag="div"
+                                {...props}
+                            >
+                                {String(children).replace(/\n$/, "")}
+                            </SyntaxHighlighter>
+                        ) : (
+                            <code className={className} {...props}>
+                                {children}
+                            </code>
+                        );
+                    },
+                }}
+            />
+        </div>
+    );
+};
+
+export default MarkdownPreview;