feat: matjax support

This commit is contained in:
Artemy 2023-04-01 20:57:46 +03:00
parent eb3fcec357
commit 866181e48a
9 changed files with 1598 additions and 32 deletions

1584
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -13,7 +13,9 @@
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-markdown": "^8.0.3", "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": { "devDependencies": {
"@types/react": "^18.0.17", "@types/react": "^18.0.17",

View file

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

View file

@ -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;

View file

@ -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; @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; }
} }

View file

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

View file

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

View file

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

View file

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