From 4c59240e6383f34c777247fd14ceed1ec38afe29 Mon Sep 17 00:00:00 2001
From: Imken Luo <me@imken.moe>
Date: Fri, 20 Oct 2023 23:58:02 +0800
Subject: [PATCH] fix: markdown rendering

---
 packages/viewer/package.json                  |  2 +
 packages/viewer/src/app/layout.tsx            |  4 +-
 .../viewer/src/components/replies/Content.tsx | 59 ++++++++++---------
 pnpm-lock.yaml                                | 45 ++++++++++++++
 4 files changed, 81 insertions(+), 29 deletions(-)

diff --git a/packages/viewer/package.json b/packages/viewer/package.json
index 5aedb4b..25d4909 100644
--- a/packages/viewer/package.json
+++ b/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"
diff --git a/packages/viewer/src/app/layout.tsx b/packages/viewer/src/app/layout.tsx
index 3219b33..56e7505 100644
--- a/packages/viewer/src/app/layout.tsx
+++ b/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 />
diff --git a/packages/viewer/src/components/replies/Content.tsx b/packages/viewer/src/components/replies/Content.tsx
index f5479af..db99110 100644
--- a/packages/viewer/src/components/replies/Content.tsx
+++ b/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}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2eeeb56..aabc3b1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -137,12 +137,18 @@ importers:
       react-markdown:
         specifier: ^9.0.0
         version: 9.0.0(@types/react@18.2.22)(react@18.2.0)
+      rehype-highlight:
+        specifier: ^7.0.0
+        version: 7.0.0
       rehype-katex:
         specifier: ^7.0.0
         version: 7.0.0
       remark-gfm:
         specifier: ^4.0.0
         version: 4.0.0
+      remark-luogu-flavor:
+        specifier: ^1.0.0
+        version: 1.0.0
       remark-math:
         specifier: ^6.0.0
         version: 6.0.0
@@ -3012,6 +3018,11 @@ packages:
     engines: {node: '>=12.0.0'}
     dev: false
 
+  /highlight.js@11.9.0:
+    resolution: {integrity: sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==}
+    engines: {node: '>=12.0.0'}
+    dev: false
+
   /html-encoding-sniffer@3.0.0:
     resolution: {integrity: sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==}
     engines: {node: '>=12'}
@@ -3620,6 +3631,14 @@ packages:
     dependencies:
       js-tokens: 4.0.0
 
+  /lowlight@3.1.0:
+    resolution: {integrity: sha512-CEbNVoSikAxwDMDPjXlqlFYiZLkDJHwyGu/MfOsJnF3d7f3tds5J3z8s/l9TMXhzfsJCCJEAsD78842mwmg0PQ==}
+    dependencies:
+      '@types/hast': 3.0.1
+      devlop: 1.1.0
+      highlight.js: 11.9.0
+    dev: false
+
   /lru-cache@6.0.0:
     resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
     engines: {node: '>=10'}
@@ -4800,6 +4819,16 @@ packages:
       set-function-name: 2.0.1
     dev: true
 
+  /rehype-highlight@7.0.0:
+    resolution: {integrity: sha512-QtobgRgYoQaK6p1eSr2SD1i61f7bjF2kZHAQHxeCHAuJf7ZUDMvQ7owDq9YTkmar5m5TSUol+2D3bp3KfJf/oA==}
+    dependencies:
+      '@types/hast': 3.0.1
+      hast-util-to-text: 4.0.0
+      lowlight: 3.1.0
+      unist-util-visit: 5.0.0
+      vfile: 6.0.1
+    dev: false
+
   /rehype-katex@7.0.0:
     resolution: {integrity: sha512-h8FPkGE00r2XKU+/acgqwWUlyzve1IiOKwsEkg4pDL3k48PiE0Pt+/uLtVHDVkN1yA4iurZN6UES8ivHVEQV6Q==}
     dependencies:
@@ -4825,6 +4854,22 @@ packages:
       - supports-color
     dev: false
 
+  /remark-luogu-flavor@1.0.0:
+    resolution: {integrity: sha512-y0aixL3jY2ZtjHtOXZ25xX6FxLUipWAHmf5DJpXtVuUFZdpTvORCNVmSN2wLRC112fstBa8y0KaNjYddP0llHw==}
+    dependencies:
+      mdast-util-gfm-autolink-literal: 2.0.0
+      mdast-util-gfm-footnote: 2.0.0
+      mdast-util-gfm-strikethrough: 2.0.0
+      mdast-util-gfm-table: 2.0.0
+      micromark-extension-gfm-autolink-literal: 2.0.0
+      micromark-extension-gfm-footnote: 2.0.0
+      micromark-extension-gfm-strikethrough: 2.0.0
+      micromark-extension-gfm-table: 2.0.0
+      unist-util-visit: 5.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /remark-math@6.0.0:
     resolution: {integrity: sha512-MMqgnP74Igy+S3WwnhQ7kqGlEerTETXMvJhrUzDikVZ2/uogJCb+WHUg97hK9/jcfc0dkD73s3LN8zU49cTEtA==}
     dependencies: