Adjust MarkdownRender

package.json

@@ -29,6 +29,7 @@
     "redux-logger": "^3.0.6",
     "redux-saga": "^1.2.1",
     "rehype-katex": "^7.0.0",
+    "rehype-raw": "^7.0.0",
     "rehype-react": "^8.0.0",
     "remark-math": "^6.0.0",
     "ts-md5": "^1.3.1",

src/components/display/MarkdownRender.tsx

@@ -6,10 +6,10 @@ import copy from "copy-to-clipboard";
 import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism";
 import rehypeReact from "rehype-react";
 import { joinClasses } from "@/utils/common";
+import rehypeRaw from "rehype-raw";
 
 interface MarkdownRenderProps {
   content: string;
-  rehypePlugin?: "rehypeKatex" | "rehypeReact";
 }
 
 const SyntaxHighlighter = lazy(() =>
@@ -19,19 +19,12 @@ const SyntaxHighlighter = lazy(() =>
 );
 
 const MarkdownRender: React.FC<MarkdownRenderProps> = (props) => {
-  const getRehypePlugins = () =>
-    props.rehypePlugin === undefined
-      ? []
-      : props.rehypePlugin === "rehypeKatex"
-        ? [rehypeKatex]
-        : [rehypeReact];
-
   return (
     <ReactMarkdown
       className="prose h-full max-w-full"
       children={props.content}
       remarkPlugins={[remarkMath]}
-      rehypePlugins={getRehypePlugins()}
+      rehypePlugins={[rehypeKatex, rehypeRaw, rehypeReact]}
       components={{
         code(props) {
           const match = /language-(\w+)/.exec(props.className || "");
@@ -45,6 +38,9 @@ const MarkdownRender: React.FC<MarkdownRenderProps> = (props) => {
             </code>
           );
         },
+        hr() {
+          return <hr className="my-4" />;
+        },
       }}
     />
   );

src/pages/problem/Problem.tsx

@@ -43,11 +43,10 @@ const Problem: React.FC = () => {
       )}
 
       <div className="h-fit rounded border border-base-content/10 bg-base-100 p-6">
-        <h1 className="mb-8 text-4xl font-bold">{getProblem()?.title}</h1>
-        <MarkdownRender
-          content={getProblem()?.description || ""}
-          rehypePlugin="rehypeKatex"
-        />
+        <h1 className="mb-8 text-center text-4xl font-bold">
+          {getProblem()?.title}
+        </h1>
+        <MarkdownRender content={getProblem()?.description || ""} />
       </div>
 
       <p className="text-lg font-bold">Your Solution</p>