fix: markdown rendering

packages/viewer/package.json

@@ -22,8 +22,10 @@
     "react-icons": "^4.11.0",
     "react-infinite-scroll-component": "^6.1.0",
     "react-markdown": "^9.0.0",
+    "rehype-highlight": "^7.0.0",
     "rehype-katex": "^7.0.0",
     "remark-gfm": "^4.0.0",
+    "remark-luogu-flavor": "^1.0.0",
     "remark-math": "^6.0.0",
     "socket.io-client": "^4.7.2",
     "swr": "^2.2.2"

packages/viewer/src/app/layout.tsx

@@ -29,7 +29,7 @@ export default function RootLayout({ children }: React.PropsWithChildren) {
         )}
         <NavBar />
         <div className="container-lg" style={{ marginTop: "2rem" }}>
-          <div
+          {/* <div
             className="col-lg-6 col-md-7 col-12 mt-5 mb-4 mx-auto alert alert-warning"
             role="alert"
           >
@@ -42,7 +42,7 @@ export default function RootLayout({ children }: React.PropsWithChildren) {
               升级了讨论区
             </a>
             ，暂未完成相关适配。
-          </div>
+          </div> */}
           {children}
         </div>
         <Footer />

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

@@ -2,7 +2,9 @@
 
 import "katex/dist/katex.min.css";
 import "highlight.js/styles/tokyo-night-dark.css";
-import gfm from "remark-gfm";
+// import gfm from "remark-gfm";
+import remarkLuoguFlavor from "remark-luogu-flavor";
+import rehypeHighlight from "rehype-highlight";
 import { useRef } from "react";
 
 // import { computePosition, shift } from "@floating-ui/dom";
@@ -26,7 +28,7 @@ export default function Content({
   // const userRefs = useRef<Record<number, HTMLDivElement | null>>({});
 
   // useEffect(() => {
-  //   contentRef.current?.querySelectorAll("a[data-uid]").forEach((element) => {
+  //   contentRef.current?.querySelectorAll(".lfm-user-mention").forEach((element) => {
   //     const uid = parseInt(element.getAttribute("data-uid")!, 10);
   //     const tooltip = userRefs.current[uid]!;
   //     if (!tooltip) return;
@@ -48,29 +50,29 @@ export default function Content({
   //       tooltip.style.display = "none";
   //     }
 
-  //     (
-  //       [
-  //         ["mouseenter", showTooltip],
-  //         ["mouseleave", hideTooltip],
-  //         ["focus", showTooltip],
-  //         ["blur", hideTooltip],
-  //         ...(userIdState
-  //           ? [
-  //               [
-  //                 "click",
-  //                 (event: Event) => {
-  //                   event.preventDefault();
-  //                   hideTooltip();
-  //                   if (userIdState[0] !== uid) userIdState[1](uid);
-  //                   else userIdState[1](null);
-  //                 },
-  //               ],
-  //             ]
-  //           : []),
-  //       ] as [string, () => void][]
-  //     ).forEach(([event, listener]) =>
-  //       element.addEventListener(event, listener),
-  //     );
+  //     // (
+  //     //   [
+  //     //     ["mouseenter", showTooltip],
+  //     //     ["mouseleave", hideTooltip],
+  //     //     ["focus", showTooltip],
+  //     //     ["blur", hideTooltip],
+  //     //     ...(userIdState
+  //     //       ? [
+  //     //           [
+  //     //             "click",
+  //     //             (event: Event) => {
+  //     //               event.preventDefault();
+  //     //               hideTooltip();
+  //     //               if (userIdState[0] !== uid) userIdState[1](uid);
+  //     //               else userIdState[1](null);
+  //     //             },
+  //     //           ],
+  //     //         ]
+  //     //       : []),
+  //     //   ] as [string, () => void][]
+  //     // ).forEach(([event, listener]) =>
+  //     //   element.addEventListener(event, listener),
+  //     // );
   //   });
   // });
 
@@ -81,8 +83,11 @@ export default function Content({
         ref={contentRef}
       >
         <Markdown
-          rehypePlugins={[rehypeKatex]}
-          remarkPlugins={[remarkMath, [gfm, { singleTilde: false }]]}
+          rehypePlugins={[rehypeKatex, rehypeHighlight]}
+          remarkPlugins={[
+            remarkMath,
+            [remarkLuoguFlavor, { userLinkPointToLuogu: false }],
+          ]}
           skipHtml
         >
           {content}