Add document2

src/App.tsx

@@ -67,7 +67,7 @@
       let md = replaceExternalSyntax(markdown.replace(/!define[\s\S]*$/m, ""));
       try {
         md = replaceExternalSyntax(md);
       } catch (e: any) {
         md = e.toString();
       }
       MDToHTML(md.replaceAll(opts.prefix, "##").replaceAll(opts.suffix, ""))
@@ -390,10 +390,10 @@
     <ul>
       {sortedEntries.map(([key, value], index) => (
         <li key={index}>
+          <button onClick={() => onRemove(key, value)}>Remove</button>
           <Tippy content={parse(value)} className="markdown_tippy">
             <span>{key}</span>
           </Tippy>
-          <button onClick={() => onRemove(key, value)}>Remove</button>
         </li>
       ))}
     </ul>

src/AppRoutes.tsx

@@ -5,6 +5,8 @@ import App from "./App.tsx";
 import Home from "./Home.tsx";
 import UserGuide from "./UserGuide/UserGuide.tsx";
 import UserGuide_2 from "./UserGuide/UserGuide_2.tsx";
+import UserGuide_3 from "./UserGuide/UserGuide_3.tsx";
+import UserGuide_4 from "./UserGuide/UserGuide_4.tsx";
 
 const AppRouter = () => {
   return (
@@ -14,6 +16,8 @@ const AppRouter = () => {
         <Route path="/App" element={<App />} />
         <Route path="/UserGuide/1" element={<UserGuide />} />
         <Route path="/UserGuide/2" element={<UserGuide_2 />} />
+        <Route path="/UserGuide/3" element={<UserGuide_3 />} />
+        <Route path="/UserGuide/4" element={<UserGuide_4 />} />
       </Routes>
     </BrowserRouter>
   );

src/Home.tsx

@@ -1,16 +1,23 @@
 function Home() {
   return (
-    <div>
-      <h1>Mathdownへようこそ</h1>
-      <ul>
-        <li>
-          <a href="/App">アプリを開く</a>
-        </li>
-        <li>
-          <a href="/UserGuide/1">使い方</a>
-        </li>
-      </ul>
-    </div>
+    <>
+      <div className="App">
+        <a href="/home">
+          <img src="../docs/logo.png" width="12.5%" height="12.5%" />
+        </a>
+      </div>
+      <div>
+        <h1>Mathdownへようこそ</h1>
+        <ul>
+          <li>
+            <a href="/App">アプリを開く</a>
+          </li>
+          <li>
+            <a href="/UserGuide/1">使い方</a>
+          </li>
+        </ul>
+      </div>
+    </>
   );
 }
 

src/UserGuide/UserGuide.tsx

@@ -1,11 +1,20 @@
 function UserGuide() {
   return (
-    <div>
-      <h1>使い方</h1>
-      <p>
-        <a href="/UserGuide/1">{"<"}</a>1/2<a href="/UserGuide/2">{">"}</a>
-      </p>
-    </div>
+    <>
+      <div className="App">
+        <a href="/home">
+          <img src="../docs/logo.png" width="12.5%" height="12.5%" />
+        </a>
+      </div>
+      <div>
+        <h1>使い方</h1>
+        <p>
+          <a href="/UserGuide/1">{"<"}</a>1/2<a href="/UserGuide/2">{">"}</a>
+        </p>
+        ここでは、Mathdownの大まかな機能を説明します。
+        通常のMarkdownエディター（Markdownをよく知らない方はこちら）と同様に、編集画面と閲覧画面とがあります。それに加え、Mathdownでは、用語を追加する辞書機能と、編集したものをローカル保存する保存機能とがあります。
+      </div>
+    </>
   );
 }
 

src/UserGuide/UserGuide_2.tsx

@@ -1,11 +1,19 @@
 function UserGuide_2() {
   return (
-    <div>
-      <h1>使い方</h1>
-      <p>
-        <a href="/UserGuide/1">{"<"}</a>2/2<a href="/UserGuide/1">{">"}</a>
-      </p>
-    </div>
+    <>
+      <div className="App">
+        <a href="/home">
+          <img src="../docs/logo.png" width="12.5%" height="12.5%" />
+        </a>
+      </div>
+      <div>
+        <h1>使い方</h1>
+        <p>
+          <a href="/UserGuide/1">{"<"}</a>2/2<a href="/UserGuide/3">{">"}</a>
+        </p>
+        編集画面に入力すると、閲覧画面にMarkdown書式で即時反映されます。「編集画面の非表示」ボタンをクリックすると、閲覧画面のみ表示できます。編集したものを保存したいときは「保存」を押します。過去に保存したファイルを再度編集する場合は「ファイルを選択」を押します。
+      </div>
+    </>
   );
 }
 

src/UserGuide/UserGuide_3.tsx

@@ -0,0 +1,21 @@
+function UserGuide_3() {
+  return (
+    <>
+      <div className="App">
+        <a href="/home">
+          <img src="../docs/logo.png" width="12.5%" height="12.5%" />
+        </a>
+      </div>
+      <div>
+        <h1>使い方</h1>
+        <p>
+          <a href="/UserGuide/1">{"<"}</a>3/4<a href="/UserGuide/1">{">"}</a>
+        </p>
+        Mathdownは用語確認や用語追跡に特化したツールです。
+        「!define」の後ろに追加したい用語とその用語の定義・説明を入力し、「追加」ボタンを押すことで、用語を追加できます。追加した用語は、閲覧画面や「用語リスト」内で確認でき、用語をホバーすることで定義や説明も参照できます。
+      </div>
+    </>
+  );
+}
+
+export default UserGuide_3;

src/UserGuide/UserGuide_4.tsx

@@ -0,0 +1,21 @@
+function UserGuide_4() {
+  return (
+    <>
+      <div className="App">
+        <a href="/home">
+          <img src="../docs/logo.png" width="12.5%" height="12.5%" />
+        </a>
+      </div>
+      <div>
+        <h1>使い方</h1>
+        <p>
+          <a href="/UserGuide/1">{"<"}</a>4/4<a href="/UserGuide/1">{">"}</a>
+        </p>
+        Mathdownは基本的に板書支援ツールですが、ChatGPTを使えば、PDF形式で配布されることの多い講義資料のメモツールとしても使えます。
+        ChatGPTにPDFの講義資料をアップロードし、以下の適切なコマンドを入力すると、人工知能が資料の内容をMarkdownに変換してくれます（ただ画像が多いといろいろ厳しいかも...）
+      </div>
+    </>
+  );
+}
+
+export default UserGuide_4;

src/extractPDF.tsx

@@ -22,7 +22,7 @@
 import Textarea from "@mui/joy/Textarea";
 
 type optsObject = { prefix: string; suffix: string };
 type pdfType = { numPages: number; getPage: (arg0: number) => any }; // React-pdfで取得されるPDFには、合計ページ数を指す`numPage`属性と、それぞれのページの（文字列などの）情報を含む`getPages`を含む。
 // 使用法
 // const page = await pdf.getPage(5); // 5ページ目の情報取得
 // const textContent = await page.getTextContent(); // getTextContent属性で文字列取得。
@@ -41,7 +41,7 @@
   const [explanation, setExplanation] = useState<string>(""); // ユーザー入力の部分。今は暫定的にテキストエリアを置いている。
 
   const array: number[] = [1, 2, 3, 4, 5, 6, 7, 8];
   const reactArray: any = array.map((index) => {
     // ページ数をどうにか見える化したい。
     return (
       <Page
@@ -77,7 +77,7 @@
 
   // pdfから文字を抜き出す非同期関数
   async function extractTextFromPDF(pdf: pdfType) {
     const resultContent: any[] = [];
     const getPageText = async (pageNum: number) => {
       const page = await pdf.getPage(pageNum);
       const textContent = await page.getTextContent(); // console.log(textContent.items); をしてみると良い。
@@ -111,6 +111,11 @@
 
   return (
     <>
+      <div className="App">
+        <a href="/home">
+          <img src="../docs/logo.png" width="12.5%" height="12.5%" />
+        </a>
+      </div>
       <h2>PDFの解説表示</h2>
       <div className="flex">
         <div className="explanation">