Merge pull request #87 from sikepuri-algorithm/create-latex-playground

chvmvd · web-flow · commit e5ab0121424d · 2022-12-01T16:06:01.000+09:00
Create LaTeX Playground
diff --git a/docs/03extras/05tex/index.mdx b/docs/03extras/05tex/index.mdx
@@ -6,11 +6,29 @@ import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
 import installTexLive from "./install_texlive.mov";
 import typesetTex from "./typeset_tex.mp4";
+import InteractiveCodeEditor from "@site/src/components/InteractiveCodeEditor/InteractiveCodeEditor";
 
 # $\LaTeX$ の導入
 
 なぜか周りに $\LaTeX$ を使っている人が多いので、$\LaTeX$ 環境の構築方法を解説しておきます。
 
+## LaTeX のプレイグラウンド
+
+$\LaTeX$ のプレイグラウンドを作ってみました。機能には制限がありますが、雰囲気は味わえるかと思います。
+
+<InteractiveCodeEditor
+  language="latex"
+  defaultValue={`\
+\\documentclass{article}
+\\begin{document}
+  Hello World!
+  $$
+  a^2 + b^2 = c^2
+  $$
+\\end{document}\
+`}
+></InteractiveCodeEditor>
+
 ## TeXLive のインストール
 
 [Visual Studio Code をインストールの項](/docs/03extras/02vscode/)を参考に VSCode をインストールしておいてください。
diff --git a/src/components/InteractiveCodeEditor/InteractiveCodeEditor.tsx b/src/components/InteractiveCodeEditor/InteractiveCodeEditor.tsx
@@ -14,7 +14,7 @@ export default function InteractiveCodeEditor({
   defaultCSS,
   defaultJavaScript,
 }: {
-  language: "html" | "markdown" | "HTML-CSS-JavaScript";
+  language: "html" | "markdown" | "HTML-CSS-JavaScript" | "latex";
   defaultValue?: string;
   defaultHTML?: string;
   defaultCSS?: string;
@@ -59,6 +59,28 @@ export default function InteractiveCodeEditor({
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.css"/>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/github-markdown-css/2.2.1/github-markdown.css"/>
 `;
+
+  function latexRender(value: 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;
+  }
   return (
     <>
       <div className={styles.playgroundContainer}>
@@ -119,6 +141,8 @@ export default function InteractiveCodeEditor({
                   ? code
                   : language === "markdown"
                   ? markdownDefaultValue + md.render(code)
+                  : language === "latex"
+                  ? latexRender(code)
                   : `<style>${css}</style>${html}<script>${js}</script>`
               }
               title="Live Code"
