Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit e2f010c

Browse files
authored
Merge pull request #182 from iilj/dev/#180_katex
Resolves #180, install katex
2 parents 119b2dc + 77aba2a commit e2f010c

File tree

4 files changed

+66
-2
lines changed

4 files changed

+66
-2
lines changed

‎package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
"react-bootstrap-table": "^4.3.1",
3030
"react-datepicker": "^2.14.1",
3131
"react-dom": "^16.12.0",
32+
"react-katex": "^3.0.1",
3233
"react-router": "^6.0.0-alpha.5",
3334
"react-router-dom": "^6.0.0-alpha.5",
3435
"react-scripts": "4.0.1",
@@ -63,6 +64,7 @@
6364
]
6465
},
6566
"devDependencies": {
67+
"@types/react-katex": "^3.0.4",
6668
"@typescript-eslint/eslint-plugin": "^4.11.1",
6769
"@typescript-eslint/parser": "^4.11.1",
6870
"eslint": "^7.16.0",
@@ -76,4 +78,4 @@
7678
"prettier-eslint": "^12.0.0",
7779
"prettier-eslint-cli": "^5.0.0"
7880
}
79-
}
81+
}

‎src/components/ProblemLink.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { ProblemNo, ProblemLevel } from '../interfaces/Problem';
77
import { Difficulty } from '../interfaces/Difficulty';
88
import { DifficultyCircle } from './DifficultyCircle';
99
import { NewTabLink } from './NewTabLink';
10+
import { TexRenderer } from './TexRenderer';
1011

1112
export const ProblemLinkColorModes = ['None', 'Level', 'Difficulty'] as const;
1213
export type ProblemLinkColorMode = typeof ProblemLinkColorModes[number];
@@ -63,7 +64,7 @@ export const ProblemLink: React.FC<Props> = (props) => {
6364
className={className}
6465
title={problemTitle}
6566
>
66-
{problemTitle}
67+
<TexRenderertext={problemTitle}/>
6768
</NewTabLink>
6869
</>
6970
);

‎src/components/TexRenderer.tsx

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React from 'react';
2+
import { InlineMath } from 'react-katex';
3+
import 'katex/dist/katex.min.css';
4+
5+
interface Props {
6+
text: string;
7+
}
8+
9+
export const TexRenderer: React.FC<Props> = (props) => {
10+
const { text } = props;
11+
const parts = text.split(/(\$.*?\$)/g).filter(Boolean);
12+
13+
return (
14+
<span>
15+
{parts.map((part, index) => {
16+
if (part.startsWith('$') && part.endsWith('$')) {
17+
const math = part.slice(1, -1);
18+
return (
19+
<InlineMath
20+
key={index}
21+
math={math}
22+
renderError={(error) => (
23+
<span style={{ color: 'red' }}>
24+
Error: {math}: {error}
25+
</span> // エラー時の表示
26+
)}
27+
/>
28+
);
29+
} else {
30+
return <span key={index}>{part}</span>;
31+
}
32+
})}
33+
</span>
34+
);
35+
};

‎yarn.lock

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2014,6 +2014,13 @@
20142014
dependencies:
20152015
"@types/react" "^16"
20162016

2017+
"@types/react-katex@^3.0.4":
2018+
version "3.0.4"
2019+
resolved "https://registry.yarnpkg.com/@types/react-katex/-/react-katex-3.0.4.tgz#2b60eebf76938bb385337fd850d99cc53ad6ef67"
2020+
integrity sha512-aLkykKzSKLpXI6REJ3uClao6P47HAFfR1gcHOZwDeTuALsyjgMhz+oynLV4gX0kiJVnvHrBKF/TLXqyNTpHDUg==
2021+
dependencies:
2022+
"@types/react" "*"
2023+
20172024
"@types/react-router-dom@^5.1.5":
20182025
version "5.1.8"
20192026
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:
38053812
resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
38063813
integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
38073814

3815+
commander@^8.3.0:
3816+
version "8.3.0"
3817+
resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
3818+
integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==
3819+
38083820
common-tags@^1.4.0, common-tags@^1.8.0:
38093821
version "1.8.0"
38103822
resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.0.tgz#8e3153e542d4a39e9b10554434afaaf98956a937"
@@ -7706,6 +7718,13 @@ jsonfile@^6.0.1:
77067718
array-includes "^3.1.2"
77077719
object.assign "^4.1.2"
77087720

7721+
katex@^0.16.0:
7722+
version "0.16.21"
7723+
resolved "https://registry.yarnpkg.com/katex/-/katex-0.16.21.tgz#8f63c659e931b210139691f2cc7bb35166b792a3"
7724+
integrity sha512-XvqR7FgOHtWupfMiigNzmh+MgUVmDGU2kXZm899ZkPfcuoPuFxyHmXsgATDpFZDAXCI8tvinaVcDo8PIIJSo4A==
7725+
dependencies:
7726+
commander "^8.3.0"
7727+
77097728
killable@^1.0.1:
77107729
version "1.0.1"
77117730
resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.1.tgz#4c8ce441187a061c7474fb87ca08e2a638194892"
@@ -10234,6 +10253,13 @@ react-is@^17.0.1:
1023410253
resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
1023510254
integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
1023610255

10256+
react-katex@^3.0.1:
10257+
version "3.0.1"
10258+
resolved "https://registry.yarnpkg.com/react-katex/-/react-katex-3.0.1.tgz#262b44f49c5fa727f1d13cbab595f791318e5083"
10259+
integrity sha512-wIUW1fU5dHlkKvq4POfDkHruQsYp3fM8xNb/jnc8dnQ+nNCnaj0sx5pw7E6UyuEdLRyFKK0HZjmXBo+AtXXy0A==
10260+
dependencies:
10261+
katex "^0.16.0"
10262+
1023710263
react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4:
1023810264
version "3.0.4"
1023910265
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /