chore(viewer): temporarily address markdown renderer issue (#8)

Author: immccn123

.vscode/settings.json

@@ -1,9 +1,4 @@
 {
   "eslint.packageManager": "pnpm",
-  "eslint.workingDirectories": [".", "./packages/viewer"],
-  "workbench.colorCustomizations": {
-    "activityBar.background": "#FFFFFF",
-    "titleBar.activeBackground": "#FFFFFF",
-    "titleBar.activeForeground": "#191919"
-  }
+  "eslint.workingDirectories": [".", "./packages/viewer"]
 }

packages/viewer/package.json

@@ -21,10 +21,9 @@
     "react-dom": "^18.2.0",
     "react-icons": "^4.11.0",
     "react-infinite-scroll-component": "^6.1.0",
-    "react-markdown": "^8.0.0",
+    "react-markdown": "^9.0.0",
     "rehype-highlight": "^6.0.0",
-    "rehype-katex": "^6.0.0",
-    "remark-gfm": "^3.0.0",
+    "rehype-katex": "^7.0.0",
     "remark-luogu-flavor": "^1.0.0",
     "remark-math": "^6.0.0",
     "socket.io-client": "^4.7.2",

packages/viewer/src/components/replies/Content.tsx

@@ -3,7 +3,7 @@
 import "katex/dist/katex.min.css";
 import "highlight.js/styles/tokyo-night-dark.css";
 import remarkLuoguFlavor from "remark-luogu-flavor";
-import rehypeHighlight from "rehype-highlight";
+// import rehypeHighlight from "rehype-highlight";
 import { MutableRefObject, useEffect, useRef, useState } from "react";
 
 import { computePosition, shift } from "@floating-ui/dom";
@@ -168,7 +168,8 @@ export default function Content({
         ref={contentRef}
       >
         <Markdown
-          rehypePlugins={[rehypeKatex, rehypeHighlight]}
+          // TODO: upgrade the version of rehypeHighlight
+          rehypePlugins={[rehypeKatex /* , rehypeHighlight */]}
           remarkPlugins={[
             [remarkMath, {}],
             [remarkLuoguFlavor, { userLinkPointToLuogu: false }],