diff --git a/docs/03extras/05tex/index.mdx b/docs/03extras/05tex/index.mdx
index 6a4bc3738..c25c95d7d 100644
--- 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$ のプレイグラウンドを作ってみました。機能には制限がありますが、雰囲気は味わえるかと思います。
+
+
+
## TeXLive のインストール
[Visual Studio Code をインストールの項](/docs/03extras/02vscode/)を参考に VSCode をインストールしておいてください。
diff --git a/src/components/InteractiveCodeEditor/InteractiveCodeEditor.tsx b/src/components/InteractiveCodeEditor/InteractiveCodeEditor.tsx
index 89541a8b2..4647be7a9 100644
--- 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({
`;
+
+ function latexRender(value: string) {
+ const header = `\
+
+
+
+
+
+
+
+ \
+ `;
+ const footer = `\
+
+
+ \
+ `;
+ return header + value + footer;
+ }
return (
<>
@@ -119,6 +141,8 @@ export default function InteractiveCodeEditor({
? code
: language === "markdown"
? markdownDefaultValue + md.render(code)
+ : language === "latex"
+ ? latexRender(code)
: `${html}`
}
title="Live Code"