From 9a6380f44a179dc3a2f34950b5b4b4ce5c018f46 Mon Sep 17 00:00:00 2001
From: zxa666 <zxadeguge@gmail.com>
Date: Mon, 9 Sep 2024 11:19:25 +0800
Subject: [PATCH] award/model new feature:latex fomula input

---
 package.json           |  2 ++
 src/contents/model.tsx | 19 ++++++++++++++++++-
 yarn.lock              | 19 +++++++++++++++++++
 3 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 63cdbd4..219e6f0 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.2",
     "react-dom": "^18.2.0",
+    "react-mathjax": "^1.0.1",
     "react-router-dom": "^6.23.0",
     "react-scroll": "^1.9.0"
   },
@@ -23,6 +24,7 @@
     "@types/node": "^20.12.10",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
+    "@types/react-mathjax": "^1.0.4",
     "@types/react-scroll": "^1.8.10",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
diff --git a/src/contents/model.tsx b/src/contents/model.tsx
index 09aada4..ea243f8 100644
--- a/src/contents/model.tsx
+++ b/src/contents/model.tsx
@@ -1,6 +1,12 @@
 import { Nav } from 'react-bootstrap';
 import { Link,Element } from 'react-scroll';
 import React,{useEffect,useState} from 'react';
+import MathJax from 'react-mathjax';
+
+
+const tex = `f(x) = \\int_{-\\infty}^\\infty
+    \\hat f(\\xi)\\,e^{2 \\pi i \\xi x}
+    \\,d\\xi`
 
 
 // sidenavbar begin
@@ -87,7 +93,18 @@ export function Model() {
               <h4 className="center-text">Section 3</h4>
               <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh  uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
               <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh  uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
-              
+
+              <MathJax.Provider>
+                <div className='indent'>
+                  {/* 行内编辑数学公式，相比于下面那个方便一些。去掉inline的话效果就和下面那个一样了。 */}
+                    This is an inline math formula: <MathJax.Node inline formula={`f(x) = \\int_{-\\infty}^\\infty
+                                                                                  \\hat f(\\xi)\\,e^{2 \\pi i \\xi x}
+                                                                                  \\,d\\xi`} />
+                    And a block one:
+                  {/* 数学公式编辑在此文件的顶部，使用latex语法 */}
+                    <MathJax.Node formula={tex} />
+                </div>
+              </MathJax.Provider>
               </div>
 
               </Element>
diff --git a/yarn.lock b/yarn.lock
index ef65099..69887ef 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -628,6 +628,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-mathjax@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@types/react-mathjax/-/react-mathjax-1.0.4.tgz#b6c75bdf700704c511f3bf21727e5db73799271c"
+  integrity sha512-gxtONNuQUZhNOKeQGxLGxeeqvPc2gBGMFB8t+7WnXQBHQdp+MEhd1Ycnvxjycnxsko87k/0sYooVgLBsIWU6VQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-scroll@^1.8.10":
   version "1.8.10"
   resolved "https://registry.yarnpkg.com/@types/react-scroll/-/react-scroll-1.8.10.tgz#585a5c4bd0654434f3e55a08e94ed2e048bae7c7"
@@ -1387,6 +1394,11 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
+load-script@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4"
+  integrity sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA==
+
 locate-path@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-6.0.0.tgz#55321eb309febbc59c4801d931a72452a681d286"
@@ -1629,6 +1641,13 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
+react-mathjax@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/react-mathjax/-/react-mathjax-1.0.1.tgz#a8c282e75d277a201632dfd07edf41edda372b4b"
+  integrity sha512-+mjFcciZY3GQoqiQm3aRTyDjgBKuoaXpY+SCONX00jScuPpTKwnASeFMS5+pbTIzDf5zPT2Y9ZZfQ9U/d4CKtQ==
+  dependencies:
+    load-script "^1.0.0"
+
 react-refresh@^0.14.0:
   version "0.14.2"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.2.tgz#3833da01ce32da470f1f936b9d477da5c7028bf9"
-- 
GitLab