tyay math
This commit is contained in:
parent
3bdfdf799e
commit
80dffd913e
|
|
@ -1,23 +1,14 @@
|
||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import MathMLPreview from "./MathMLPreview";
|
import { MathConverter } from "./MathConverter";
|
||||||
import { Field, Form, Formik } from "formik";
|
|
||||||
import Test from "./Test";
|
|
||||||
import MarkdownPreview from '@uiw/react-markdown-preview';
|
|
||||||
import { BlockMath } from "react-katex";
|
|
||||||
|
|
||||||
const Dummy = () => {
|
const Dummy = () => {
|
||||||
const [t] = useTranslation();
|
const [t] = useTranslation();
|
||||||
const [markdown, setMarkdown] = useState<string>(' \nV_{sphere} = \\frac{4}{3}\\pi r^3\n');
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="DummyHomePage">
|
<div className="DummyHomePage">
|
||||||
|
|
||||||
<MarkdownPreview style={{background:"transparent" ,color:"black"}} source={"This is an <u>underlined</u> text."} />
|
<MathConverter />
|
||||||
<BlockMath>
|
|
||||||
{markdown}
|
|
||||||
</BlockMath>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
56
src/Pages/Home/MathConverter.tsx
Normal file
56
src/Pages/Home/MathConverter.tsx
Normal file
|
|
@ -0,0 +1,56 @@
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import { MathJax, MathJaxContext } from 'better-react-mathjax';
|
||||||
|
|
||||||
|
const convertToLatex = (input: string): string => {
|
||||||
|
// Replace fractions
|
||||||
|
let latex = input.replace(/(\d+)\/(\d+)/g, '\\frac{$1}{$2}');
|
||||||
|
latex = latex.replace(/\(([^()]+)\)\/\(([^()]+)\)/g, '\\frac{($1)}{($2)}');
|
||||||
|
latex = latex.replace(/([^\s()]+)\s*\/\s*([^\s()]+)/g, '\\frac{$1}{$2}');
|
||||||
|
|
||||||
|
// Handle exponentiation
|
||||||
|
latex = latex.replace(/(\w+)\^(\(.+?\)|\w+)/g, '$1^{ $2 }');
|
||||||
|
latex = latex.replace(/(\w+)\s*\^(\w+)/g, '$1^{ $2 }');
|
||||||
|
|
||||||
|
// Handle square roots
|
||||||
|
latex = latex.replace(/sqrt\(([^()]+)\)/g, '\\sqrt{$1}');
|
||||||
|
|
||||||
|
// Replace subscripts
|
||||||
|
latex = latex.replace(/_(\w+)/g, '_{ $1 }');
|
||||||
|
latex = latex.replace(/_([\w+]+)/g, '_{ $1 }');
|
||||||
|
|
||||||
|
// Add spacing for equations
|
||||||
|
latex = latex.replace(/=/g, ' = ');
|
||||||
|
|
||||||
|
return latex;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const MathConverter: React.FC = () => {
|
||||||
|
const config = {
|
||||||
|
loader: { load: ["input/asciimath"] }
|
||||||
|
};
|
||||||
|
|
||||||
|
const [inputText, setInputText] = useState<string>('u_(n+1)=e.sqrt(u_n)');
|
||||||
|
const [convertedLatex, setConvertedLatex] = useState<string>('');
|
||||||
|
|
||||||
|
const handleClick = () => {
|
||||||
|
const latex = convertToLatex(inputText);
|
||||||
|
setConvertedLatex(latex);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<MathJaxContext config={config}>
|
||||||
|
<div>
|
||||||
|
<h2>LaTeX Preview</h2>
|
||||||
|
<textarea
|
||||||
|
value={inputText}
|
||||||
|
onChange={(e) => setInputText(e.target.value)}
|
||||||
|
rows={10}
|
||||||
|
cols={50}
|
||||||
|
/>
|
||||||
|
<h3>Converted LaTeX:</h3>
|
||||||
|
<MathJax inline={false}>{`$$${convertedLatex}$$`}</MathJax>
|
||||||
|
<button onClick={handleClick}>Convert to LaTeX</button>
|
||||||
|
</div>
|
||||||
|
</MathJaxContext>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -31,6 +31,7 @@
|
||||||
.PageTitle {
|
.PageTitle {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
|
flex-wrap: wrap;
|
||||||
margin-block: 10px;
|
margin-block: 10px;
|
||||||
|
|
||||||
.PageTitleItems {
|
.PageTitleItems {
|
||||||
|
|
|
||||||
|
|
@ -73,13 +73,13 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.katex .msupsub{
|
// .katex .msupsub{
|
||||||
text-align: end !important;
|
// text-align: end !important;
|
||||||
}
|
// }
|
||||||
.mtight{
|
// .mtight{
|
||||||
|
|
||||||
font-size: 10px !important;
|
// font-size: 10px !important;
|
||||||
}
|
// }
|
||||||
.katex .delimcenter, .katex .op-symbol{
|
// .katex .delimcenter, .katex .op-symbol{
|
||||||
display: none;
|
// display: none;
|
||||||
}
|
// }
|
||||||
Loading…
Reference in New Issue
Block a user