feat: matjax support

package.json

@@ -13,7 +13,9 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-markdown": "^8.0.3",
-    "react-router-dom": "^6.4.2"
+    "react-router-dom": "^6.4.2",
+    "rehype-mathjax": "^4.0.2",
+    "remark-math": "^5.1.1"
   },
   "devDependencies": {
     "@types/react": "^18.0.17",

src/App.jsx

@@ -9,7 +9,7 @@ import Notes from "./pages/notes";
 import PubNote from "./pages/pubNote";
 import PubError from "./pages/pubError";
 import PubNoteSafe from "./pages/pubNoteSafe";
-import ReactMarkdown from "react-markdown";
+import RenderMarkdown from "./components/markdown";
 
 function App() {
   Storage.prototype.setObj = function (key, obj) {
@@ -35,7 +35,7 @@ function App() {
             path="/about"
             element={
               <div className="col-span-4 md">
-                <ReactMarkdown>
+                <RenderMarkdown>
                   {`## Anopaper - сервис анонимных записок
                   \rAnoPaper позволяет анонимно сохранять и публиковать заметки.  
                   \r-----
@@ -43,11 +43,14 @@ function App() {
                   
                   \r* Заметки поддерживают формат markdown. Например запись:  \`### Заголовок 3-го уровня\` будет выглядеть так:  
                   \r> ### Заголовок 3-го уровня
+
+                  \r*Так же поддерживается синтаксис mathjax* Например запись: \`$\\sum_{i=1}^n i^2$\` будет выглядеть так: $\\sum_{i=1}^n i^2$
+             
                
                   \r* Публичные заметки доступны только по ссылке.
                   \r* При переходе по ссылке заметка исчезает, прочесть ее можно только один раз.
                   \r* Не публичные заметки сохраняются локально и не отправляются на сервер.`}
-                </ReactMarkdown>
+                </RenderMarkdown>
               </div>
             }
           />

src/components/markdown.jsx

@@ -0,0 +1,15 @@
+import rehypeMathjax from "rehype-mathjax";
+import remarkMath from "remark-math";
+import ReactMarkdown from "react-markdown";
+
+function RenderMarkdown(props) {
+  return (
+    <ReactMarkdown
+      children={props.children}
+      remarkPlugins={[remarkMath]}
+      rehypePlugins={[rehypeMathjax]}
+    />
+  );
+}
+
+export default RenderMarkdown;

src/index.css

@@ -65,5 +65,5 @@
     @apply w-96 ease-[cubic-bezier(.69,.58,.32,1.69)] hover:scale-105 rounded-2xl hover:drop-shadow-2xl transition duration-500 lg:ml-5;
   }
 
-  .md p { display: inline; }
+  .md p, .math-inline { display: inline-block; }
 }

src/pages/create.jsx

@@ -2,7 +2,7 @@ import { Button, IconWithText } from "../components/button";
 import { ChevronDoubleRightIcon } from "@heroicons/react/24/outline";
 import { CheckBox } from "../components/checkbox";
 import { useState } from "react";
-import ReactMarkdown from "react-markdown";
+import RenderMarkdown from "../components/markdown";
 
 function CreateNote() {
   const [preview, setPreview] = useState(false);
@@ -54,7 +54,7 @@ function CreateNote() {
 
       {preview && (
         <div className="w-full md break-words">
-          <ReactMarkdown>{text}</ReactMarkdown>
+          <RenderMarkdown>{text}</RenderMarkdown>
         </div>
       )}
 

src/pages/note.jsx

@@ -1,4 +1,4 @@
-import ReactMarkdown from "react-markdown";
+import RenderMarkdown from "../components/markdown";
 import { useParams } from "react-router-dom";
 import printDate from "../components/utils";
 import { ChevronDoubleLeftIcon, TrashIcon } from "@heroicons/react/24/outline";
@@ -32,7 +32,7 @@ function Note() {
             </div>
           </div>
           <div className="w-full md break-words">
-            <ReactMarkdown>{note.text}</ReactMarkdown>
+            <RenderMarkdown>{note.text}</RenderMarkdown>
           </div>
         </div>
         <div className="grid grid-cols-1">

src/pages/pubNote.jsx

@@ -1,4 +1,4 @@
-import ReactMarkdown from "react-markdown";
+import RenderMarkdown from "../components/markdown";
 import { useState } from "react";
 import { useParams } from "react-router-dom";
 import printDate from "../components/utils";
@@ -55,7 +55,7 @@ function PubNote() {
           </div>
         </div>
         <div className="w-full md break-words">
-          <ReactMarkdown>{note?.text || "Загрузка..."}</ReactMarkdown>
+          <RenderMarkdown>{note?.text || "Загрузка..."}</RenderMarkdown>
         </div>
       </div>
     </div>

src/pages/pubNoteSafe.jsx

@@ -1,4 +1,4 @@
-import ReactMarkdown from "react-markdown";
+import RenderMarkdown from "../components/markdown";
 import { useState } from "react";
 import { useParams } from "react-router-dom";
 import printDate from "../components/utils";
@@ -74,7 +74,7 @@ function PubNoteSafe() {
           </div>
         </div>
         <div className="w-full md break-words">
-          <ReactMarkdown>{note?.text || "Загрузка..."}</ReactMarkdown>
+          <RenderMarkdown>{note?.text || "Загрузка..."}</RenderMarkdown>
         </div>
       </div>
     </div>