feat: use @matejmazur/react-katex replace older

Author: CSUwangj

.github/workflows/build.yml

@@ -32,7 +32,7 @@ jobs:
     - name: upload artifact
       uses: actions/upload-artifact@v2
       with:
-        name: CryptoLearnWeb
+        name: CryptoLearnWeb.zip
         path: |
           build/*
           docker/*

package-lock.json

@@ -13,6 +13,7 @@
     "@graphql-codegen/fragment-matcher": "^1.17.8",
     "@graphql-codegen/typescript-operations": "^1.17.8",
     "@graphql-codegen/typescript-react-apollo": "^2.0.6",
+    "@matejmazur/react-katex": "^3.1.3",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
@@ -23,10 +24,10 @@
     "i18next": "^19.7.0",
     "i18next-browser-languagedetector": "^6.0.1",
     "i18next-http-backend": "^1.0.18",
+    "katex": "^0.13.3",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-i18next": "^11.7.2",
-    "react-katex": "^2.0.2",
     "react-markdown": "^4.3.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3",

package.json

@@ -2,7 +2,7 @@ import React from 'react'
 import ReactMarkdown from 'react-markdown'
 import SyntaxHighlighter from 'react-syntax-highlighter'
 import RemarkMathPlugin from 'remark-math'
-import { BlockMath, InlineMath } from 'react-katex'
+import TeX from '@matejmazur/react-katex'
 import AdmonitionsPlugin from "remark-containers"
 import { Callout } from './Callout'
 import { IconName, Intent } from '@blueprintjs/core'
@@ -89,8 +89,8 @@ export const Markdown: React.FC<MarkdownProps> = ({ source }) => {
     renderers={{
       code: CodeBlock,
       inlineCode: InlineCode,
-      math: ({ value }) => <BlockMath>{value}</BlockMath>,
-      inlineMath: ({ value }) => <InlineMath>{value}</InlineMath>,
+      math: ({ value }) => <TeX block>{value}</TeX>,
+      inlineMath: ({ value }) => <TeX>{value}</TeX>,
       none: (props) => <MarkdownCallout intent='none' {...props} />,
       primary: (props) => <MarkdownCallout intent='primary' {...props} />,
       success: (props) => <MarkdownCallout intent='success' {...props} />,