添加查看题解md源码功能；使用洛谷同款markdown渲染器

Author: Mr-Python-in-China

.vscode/launch.json

@@ -1,12 +1,18 @@
 {
   "configurations": [
     {
-      "name": "Launch Edge",
+      "name": "debug main",
       "request": "launch",
       "type": "msedge",
       "url": "https://mr-python-in-china.github.io/lg-admin-extend/",
-      "webRoot": "${workspaceFolder}",
       "preLaunchTask": "debug"
+    },
+    {
+      "name": "test articleViewer",
+      "request": "launch",
+      "type": "msedge",
+      "url": "http://localhost:22552/",
+      "preLaunchTask": "test:articleViewer"
     }
   ]
 }

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "commentTranslate.hover.enabled": false
+}

.vscode/tasks.json

@@ -27,6 +27,13 @@
           }
         }
       ]
+    },
+    {
+      "label": "test:articleViewer",
+      "isBackground": true,
+      "type": "npm",
+      "script": "test:articleViewer",
+      "problemMatcher": "$ts-webpack-watch"
     }
   ]
 }

README.md

@@ -1 +1,7 @@
 # lg-admin-extend
+
+# LICENSE
+
+本项目主体使用 LGPL 协议。详见根目录下的 LISENSE 文件。
+
+特别的，由于项目的特殊性，部分代码的实现参考了洛谷前端代码。此部分代码归洛谷所有，我不保留任何权利。这些文件的头部有类似 `Copyright © 2024 by Luogu` 的标识。还请使用时特别留意。

package.json

@@ -16,25 +16,39 @@
     "build-with-bundle-analyzer": "webpack --mode production --env analyze",
     "prettier:check": "prettier -c .",
     "prettier:write": "prettier -w .",
-    "lint:fix": "eslint --fix"
+    "lint:fix": "eslint --fix",
+    "test:articleViewer": "webpack serve -c test/articleViewer/webpack.config.js"
   },
   "dependencies": {
     "@fluentui/react-components": "^9.53.0",
     "@fluentui/react-icons": "^2.0.249",
     "@mr.python/axios-userscript-adapter": "^1.0.0",
-    "@vscode/markdown-it-katex": "^1.1.0",
     "axios": "^1.7.2",
     "dayjs": "^1.11.11",
+    "hast-util-to-jsx-runtime": "^2.3.0",
+    "highlight.js": "^11.10.0",
+    "katex": "^0.16.11",
     "lodash": "^4.17.21",
-    "markdown-it": "^14.1.0",
-    "markdown-it-highlightjs": "^4.1.0",
+    "mdast-util-math": "^3.0.0",
+    "micromark-factory-space": "^2.0.0",
+    "micromark-util-character": "^2.1.0",
+    "parse-path": "^7.0.0",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "rehype-highlight": "^7.0.0",
+    "rehype-katex": "^7.0.0",
+    "rehype-react": "^8.0.0",
+    "rehype-stringify": "^10.0.0",
+    "remark-gfm": "^4.0.0",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.0",
+    "unified": "^11.0.5"
   },
   "devDependencies": {
     "@eslint/js": "^9.4.0",
+    "@types/katex": "^0",
     "@types/lodash": "^4",
-    "@types/markdown-it": "^14",
+    "@types/parse-path": "^7",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18",
     "@types/serviceworker": "^0.0.86",
@@ -44,12 +58,14 @@
     "css-minimizer-webpack-plugin": "^7.0.0",
     "eslint": "8.56.0",
     "eslint-plugin-react": "^7.34.2",
+    "html-webpack-plugin": "^5.6.0",
     "http-server": "^14.1.1",
     "mini-css-extract-plugin": "^2.9.0",
     "postcss": "^8.4.38",
     "postcss-loader": "^8.1.1",
     "postcss-preset-env": "^9.5.14",
     "prettier": "^3.3.0",
+    "remark-math": "^6.0.0",
     "terser-webpack-plugin": "^5.3.10",
     "ts-loader": "^9.5.1",
     "typescript": "^5.4.5",

src/app/features/article/articleViewer.css

@@ -0,0 +1,17 @@
+.articleViewer img {
+  max-width: 100%;
+}
+.articleViewer pre {
+  font-size: 0.875em;
+  background-color: #fafafa;
+  border: 1px solid #e8e8e8;
+  border-radius: 2px;
+}
+.articleViewer pre > code.hljs {
+  background-color: unset;
+}
+.articleViewer blockquote {
+  padding: 10px 20px;
+  margin: 0 0 20px;
+  border-left: 5px solid #eee;
+}

src/app/features/article/articleViewer.ts

@@ -0,0 +1,18 @@
+import getProcessor from './getProcessor';
+
+import './articleViewer.css';
+import 'katex/dist/katex.css';
+import 'highlight.js/styles/base16/tomorrow.css';
+import { memo } from 'react';
+
+const processor = getProcessor();
+
+const ArticleViewer = memo(function ({
+  children: markdown
+}: {
+  children: string;
+}) {
+  return processor.processSync(markdown).result;
+});
+
+export default ArticleViewer;

src/app/features/article/articleViewer.tsx

@@ -0,0 +1,100 @@
+/*
+ * Copyright © 2024 by Luogu
+ */
+
+import remarkGfm from 'remark-gfm';
+import remarkParse from 'remark-parse';
+import remarkMath from './remarkMath.js';
+import remarkRehype from 'remark-rehype';
+import { unified } from 'unified';
+import rehypeKatex from 'rehype-katex';
+import rehypeHighlight from 'rehype-highlight';
+import rehypeReact from 'rehype-react';
+import { visit } from 'unist-util-visit';
+import parsePath from 'parse-path';
+import * as props from 'react/jsx-runtime';
+
+const rehypeReactConfig: import('hast-util-to-jsx-runtime').Options = {
+  Fragment: 'article',
+  // @ts-expect-error
+  jsx: props.jsx,
+  // @ts-expect-error
+  jsxs: props.jsxs
+};
+
+export default function getProcessor() {
+  return unified()
+    .use(remarkParse)
+    .use(remarkGfm)
+    .use(remarkMath)
+    .use(remarkRehype)
+    .use(rehypeKatex)
+    .use(hastBilibili)
+    .use(rehypeHighlight)
+    .use(rehypeReact, rehypeReactConfig)
+    .freeze();
+}
+
+function hastBilibili() {
+  return (tree: import('hast').Root) =>
+    visit(tree, 'element', function (element) {
+      if (element.tagName !== 'img' || !element.properties) return;
+      const src = element.properties.src;
+      if (typeof src !== 'string') return;
+      if (!src.startsWith('bilibili:')) return;
+      const parsedUrl = parsePath(src);
+      if ((parsedUrl.protocol as string) !== 'bilibili') return;
+      const query = parsedUrl.query;
+      const r: {
+        aid?: string;
+        bvid?: string;
+        page?: string;
+        danmaku: string;
+        autoplay: string;
+        playlist: string;
+        high_quality: string;
+      } = {
+        danmaku: '0',
+        autoplay: '0',
+        playlist: '0',
+        high_quality: '1'
+      };
+      const pathname = parsedUrl.pathname;
+      const match = pathname.match(/^(av)?(\d+)$/);
+      if (match) r.aid = match[2];
+      else if (pathname.toLowerCase().startsWith('bv')) r.bvid = pathname;
+      else r.bvid = 'bv' + pathname;
+
+      const page = Number(query.t || '');
+      if (page) r.page = String(page);
+
+      element.tagName = 'div';
+      element.properties.style = 'position: relative; padding-bottom: 62.5%';
+
+      element.children = [
+        {
+          type: 'element',
+          tagName: 'iframe',
+          properties: {
+            src:
+              'https://www.bilibili.com/blackboard/webplayer/embed-old.html?' +
+              Object.entries(r)
+                .filter(([_, value]) => value !== undefined)
+                .map(
+                  ([key, value]) =>
+                    `${encodeURIComponent(String(key))}=${encodeURIComponent(String(value))}`
+                )
+                .join('&'),
+            scrolling: 'no',
+            border: 0,
+            frameborder: 'no',
+            framespacing: 0,
+            allowfullscreen: true,
+            style:
+              'position: absolute; top: 0; left: 0; width: 100%; height: 100%;'
+          },
+          children: []
+        }
+      ];
+    });
+}

src/app/features/article/getProcessor.ts

@@ -1,6 +1,6 @@
 import { SolutionAdminInfo } from '../../../interface';
 import React, { useEffect, useRef, useState } from 'react';
-import { ArctleViewer } from './articleViewer';
+import ArticleViewer from './articleViewer';
 import {
   Button,
   Field,
@@ -13,8 +13,7 @@ import {
   InfoLabel,
   Popover,
   PopoverTrigger,
-  PopoverSurface,
-  Label
+  PopoverSurface
 } from '@fluentui/react-components';
 import { getArticle, submitArticleCheckResult } from '../../../fetch';
 import { ErrorDiv, InputDateTime, UserName } from '../../utils';
@@ -23,6 +22,7 @@ import emptyQueueImage from 'assets/emptyQueue.webp';
 import './style.css';
 import { useNotUndefinedContext } from '../../../notUndefinedContext';
 import { MyInfoContext } from '../../contexts';
+import { isCancel } from 'axios';
 
 export default function Article() {
   const [status, setStatus] = useState<{
@@ -34,6 +34,7 @@ export default function Article() {
   const [skipBefore, setSkipBefore] = useState<number>(0);
   const [otherRefuseCommit, setOtherRefuseCommit] = useState('');
   const [showAdminInfo, setShowAdminInfo] = useState(true);
+  const [viewSourceCode, setViewSourceCode] = useState(false);
   const myProfile = useNotUndefinedContext(MyInfoContext);
 
   let refuseCommit = otherRefuseCommit;
@@ -42,18 +43,19 @@ export default function Article() {
       refuseCommit += `。审核管理员：${myProfile.name}，对审核结果有疑问请私信交流`;
 
   useEffect(() => {
-    let ignore = false;
-    getArticle(skipBefore / 1000)
+    const cancel = new AbortController();
+    getArticle(skipBefore / 1000, { signal: cancel.signal })
       .then(v => {
-        if (!ignore)
-          setStatus({ details: v }),
-            v.article && setSkipBefore(v.article.promoteResult.updateAt * 1000);
+        console.log(v);
+        setStatus({ details: v }),
+          v.article && setSkipBefore(v.article.promoteResult.updateAt * 1000);
       })
       .catch(e => {
-        if (!ignore)
-          console.error('Error in feature Article', e), setFetchError(e);
+        console.log(e);
+        if (isCancel(e)) return;
+        console.error('Error in feature Article', e), setFetchError(e);
       });
-    return () => void (ignore = true);
+    return () => void cancel.abort();
   }, []);
   function updateArticle() {
     setStatus(null);
@@ -79,9 +81,20 @@ export default function Article() {
     <div className="articleFeature">
       {details ? (
         details.article ? (
-          <ArctleViewer className="articleViewer">
-            {details.article.content}
-          </ArctleViewer>
+          <>
+            <pre
+              className="articleViewer"
+              style={{ display: viewSourceCode ? 'block' : 'none' }}
+            >
+              <code>{details.article.content}</code>
+            </pre>
+            <div
+              className="articleViewer"
+              style={{ display: viewSourceCode ? 'none' : 'block' }}
+            >
+              <ArticleViewer>{details.article.content}</ArticleViewer>
+            </div>
+          </>
         ) : (
           <div className={'articleViewer articleQueueEmpty'}>
             <img src={emptyQueueImage} width={300} />
@@ -147,6 +160,11 @@ export default function Article() {
         ) : undefined}
       </div>
       <div className="articleOperator">
+        <Switch
+          label="显示 MarkDown 源代码"
+          checked={viewSourceCode}
+          onChange={(e, x) => setViewSourceCode(x.checked)}
+        />
         <Field label="其他原因：">
           <Textarea
             className="otherReasons"
@@ -157,7 +175,7 @@ export default function Article() {
         <Switch
           label="显示审核员身份"
           checked={showAdminInfo}
-          onChange={(e, x) => setShowAdminInfo(!!x.checked)}
+          onChange={(e, x) => setShowAdminInfo(x.checked)}
         />
         <Field label="预览：">
           <Text as="span" className="viewOperatorCommit">