mirror of
https://github.com/artegoser/AnoPaper.git
synced 2024-11-05 20:43:57 +03:00
feat: matjax support
This commit is contained in:
parent
eb3fcec357
commit
866181e48a
9 changed files with 1598 additions and 32 deletions
1584
package-lock.json
generated
1584
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
@ -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",
|
||||
|
|
|
@ -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>
|
||||
}
|
||||
/>
|
||||
|
|
15
src/components/markdown.jsx
Normal file
15
src/components/markdown.jsx
Normal 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;
|
|
@ -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; }
|
||||
}
|
|
@ -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>
|
||||
)}
|
||||
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue