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": "^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",
|
||||||
|
|
|
@ -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>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
|
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;
|
@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 { 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>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue