From 77aba2abaf103eaec4c25203f6fda287c1724941 Mon Sep 17 00:00:00 2001
From: iilj <u.eeoou@gmail.com>
Date: Mon, 10 Mar 2025 00:34:20 +0900
Subject: [PATCH] Resolves #180, install katex

---
 package.json                   |  4 +++-
 src/components/ProblemLink.tsx |  3 ++-
 src/components/TexRenderer.tsx | 35 ++++++++++++++++++++++++++++++++++
 yarn.lock                      | 26 +++++++++++++++++++++++++
 4 files changed, 66 insertions(+), 2 deletions(-)
 create mode 100644 src/components/TexRenderer.tsx

diff --git a/package.json b/package.json
index 765db19..964b5ee 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "react-bootstrap-table": "^4.3.1",
     "react-datepicker": "^2.14.1",
     "react-dom": "^16.12.0",
+    "react-katex": "^3.0.1",
     "react-router": "^6.0.0-alpha.5",
     "react-router-dom": "^6.0.0-alpha.5",
     "react-scripts": "4.0.1",
@@ -63,6 +64,7 @@
     ]
   },
   "devDependencies": {
+    "@types/react-katex": "^3.0.4",
     "@typescript-eslint/eslint-plugin": "^4.11.1",
     "@typescript-eslint/parser": "^4.11.1",
     "eslint": "^7.16.0",
@@ -76,4 +78,4 @@
     "prettier-eslint": "^12.0.0",
     "prettier-eslint-cli": "^5.0.0"
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/ProblemLink.tsx b/src/components/ProblemLink.tsx
index 625496a..400f1a1 100644
--- a/src/components/ProblemLink.tsx
+++ b/src/components/ProblemLink.tsx
@@ -7,6 +7,7 @@ import { ProblemNo, ProblemLevel } from '../interfaces/Problem';
 import { Difficulty } from '../interfaces/Difficulty';
 import { DifficultyCircle } from './DifficultyCircle';
 import { NewTabLink } from './NewTabLink';
+import { TexRenderer } from './TexRenderer';
 
 export const ProblemLinkColorModes = ['None', 'Level', 'Difficulty'] as const;
 export type ProblemLinkColorMode = typeof ProblemLinkColorModes[number];
@@ -63,7 +64,7 @@ export const ProblemLink: React.FC<Props> = (props) => {
         className={className}
         title={problemTitle}
       >
-        {problemTitle}
+        <TexRenderer text={problemTitle} />
       </NewTabLink>
     </>
   );
diff --git a/src/components/TexRenderer.tsx b/src/components/TexRenderer.tsx
new file mode 100644
index 0000000..2521ae9
--- /dev/null
+++ b/src/components/TexRenderer.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { InlineMath } from 'react-katex';
+import 'katex/dist/katex.min.css';
+
+interface Props {
+  text: string;
+}
+
+export const TexRenderer: React.FC<Props> = (props) => {
+  const { text } = props;
+  const parts = text.split(/(\$.*?\$)/g).filter(Boolean);
+
+  return (
+    <span>
+      {parts.map((part, index) => {
+        if (part.startsWith('$') && part.endsWith('$')) {
+          const math = part.slice(1, -1);
+          return (
+            <InlineMath
+              key={index}
+              math={math}
+              renderError={(error) => (
+                <span style={{ color: 'red' }}>
+                  Error: {math}: {error}
+                </span> // エラー時の表示
+              )}
+            />
+          );
+        } else {
+          return <span key={index}>{part}</span>;
+        }
+      })}
+    </span>
+  );
+};
diff --git a/yarn.lock b/yarn.lock
index 2616ae1..38d13ab 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2014,6 +2014,13 @@
   dependencies:
     "@types/react" "^16"
 
+"@types/react-katex@^3.0.4":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/react-katex/-/react-katex-3.0.4.tgz#2b60eebf76938bb385337fd850d99cc53ad6ef67"
+  integrity sha512-aLkykKzSKLpXI6REJ3uClao6P47HAFfR1gcHOZwDeTuALsyjgMhz+oynLV4gX0kiJVnvHrBKF/TLXqyNTpHDUg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-router-dom@^5.1.5":
   version "5.1.8"
   resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.1.8.tgz#bf3e1c8149b3d62eaa206d58599de82df0241192"
@@ -3805,6 +3812,11 @@ commander@^4.1.1:
   resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
   integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
 
+commander@^8.3.0:
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
+  integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==
+
 common-tags@^1.4.0, common-tags@^1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.0.tgz#8e3153e542d4a39e9b10554434afaaf98956a937"
@@ -7706,6 +7718,13 @@ jsonfile@^6.0.1:
     array-includes "^3.1.2"
     object.assign "^4.1.2"
 
+katex@^0.16.0:
+  version "0.16.21"
+  resolved "https://registry.yarnpkg.com/katex/-/katex-0.16.21.tgz#8f63c659e931b210139691f2cc7bb35166b792a3"
+  integrity sha512-XvqR7FgOHtWupfMiigNzmh+MgUVmDGU2kXZm899ZkPfcuoPuFxyHmXsgATDpFZDAXCI8tvinaVcDo8PIIJSo4A==
+  dependencies:
+    commander "^8.3.0"
+
 killable@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.1.tgz#4c8ce441187a061c7474fb87ca08e2a638194892"
@@ -10234,6 +10253,13 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+react-katex@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/react-katex/-/react-katex-3.0.1.tgz#262b44f49c5fa727f1d13cbab595f791318e5083"
+  integrity sha512-wIUW1fU5dHlkKvq4POfDkHruQsYp3fM8xNb/jnc8dnQ+nNCnaj0sx5pw7E6UyuEdLRyFKK0HZjmXBo+AtXXy0A==
+  dependencies:
+    katex "^0.16.0"
+
 react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"