Merge pull request #155 from chvmvd/add-latex-playground

chvmvd · web-flow · commit 4bddb0e97cd8 · 2022-12-30T11:05:29.000+09:00
Add LaTeX playground
diff --git a/src/components/InteractiveCodeEditor/index.tsx b/src/components/InteractiveCodeEditor/index.tsx
@@ -4,30 +4,9 @@ import TabItem from "@theme/TabItem";
 import Editor from "@monaco-editor/react";
 import IframeOutput from "@site/src/components/IframeOutput";
 import mdToHTML from "@site/src/components/mdToHTML";
+import latexToHTML from "@site/src/components/latexToHTML";
 import styles from "./styles.module.css";
 
-function latexRenderer(value: string): string {
-  const header = `\
-  <!DOCTYPE html>
-  <html lang="ja">
-    <head>
-      <meta charset="UTF-8" />
-      <script type="module">
-        import { LaTeXJSComponent } from "https://cdn.jsdelivr.net/npm/latex.js/dist/latex.mjs";
-        customElements.define("latex-js", LaTeXJSComponent);
-      </script>
-    </head>
-    <body>
-      <latex-js baseURL="https://cdn.jsdelivr.net/npm/latex.js/dist/">\
-`;
-  const footer = `\
-      </latex-js>
-    </body>
-  </html>\
-`;
-  return header + value + footer;
-}
-
 function HtmlCssJavascriptEditor({
   defaultHTML,
   setHTML,
@@ -175,7 +154,7 @@ export default function InteractiveCodeEditor({
               : language === "markdown"
               ? mdToHTML(code)
               : language === "latex"
-              ? latexRenderer(code)
+              ? latexToHTML(code)
               : language === "html-css"
               ? `<style>${css}</style>${code}`
               : `<style>${css}</style>${code}<script>${js}</script>`}
diff --git a/src/components/latexToHTML/index.tsx b/src/components/latexToHTML/index.tsx
@@ -0,0 +1,21 @@
+export default function latexToHTML(value: string): string {
+  const header = `\
+  <!DOCTYPE html>
+  <html lang="ja">
+    <head>
+      <meta charset="UTF-8" />
+      <script type="module">
+        import { LaTeXJSComponent } from "https://cdn.jsdelivr.net/npm/latex.js/dist/latex.mjs";
+        customElements.define("latex-js", LaTeXJSComponent);
+      </script>
+    </head>
+    <body>
+      <latex-js baseURL="https://cdn.jsdelivr.net/npm/latex.js/dist/">\
+`;
+  const footer = `\
+      </latex-js>
+    </body>
+  </html>\
+`;
+  return header + value + footer;
+}
diff --git a/src/pages/latex-playground/index.tsx b/src/pages/latex-playground/index.tsx
@@ -0,0 +1,47 @@
+import React, { useState } from "react";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import Layout from "@theme/Layout";
+import Editor from "@monaco-editor/react";
+import IframeOutput from "@site/src/components/IframeOutput";
+import { Grid, Box } from "@mui/material";
+import latexToHTML from "@site/src/components/latexToHTML";
+
+const defaultLatex = `\
+\\documentclass{article}
+\\begin{document}
+  Hello World!
+  \\[
+    a^2 + b^2 = c^2
+  \\]
+\\end{document}
+\
+`;
+
+export default function Home(): JSX.Element {
+  const { siteConfig } = useDocusaurusContext();
+  const [latex, setLatex] = useState<string>(defaultLatex);
+  return (
+    <Layout
+      title={`Hello from ${siteConfig.title}`}
+      description="This is a playground of LaTeX"
+    >
+      <Box p={2} mt={2}>
+        <Grid container direction="row" spacing={2}>
+          <Grid item xs={6}>
+            <Editor
+              height="80vh"
+              defaultLanguage="html"
+              defaultValue={defaultLatex}
+              onChange={(value) => {
+                setLatex(value);
+              }}
+            />
+          </Grid>
+          <Grid item xs={6}>
+            <IframeOutput height="80vh">{latexToHTML(latex)}</IframeOutput>
+          </Grid>
+        </Grid>
+      </Box>
+    </Layout>
+  );
+}
