Add document2

src/App.tsx

@@ -390,10 +390,10 @@ function WordDictionary({
     <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

@@ -111,6 +111,11 @@ export function ExtractPDF({
 
   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">