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-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",

View file

@ -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-----
@ -44,10 +44,13 @@ 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>
}
/>

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;
}
.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 { 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>
)}

View file

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

View file

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

View file

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