Add playground URL

docs/03extras/04website/01html/01html/index.mdx

@@ -30,7 +30,7 @@ import IframeOutput from "@site/src/components/IframeOutput";
 </html>
 ```
 
-自分のパソコン上に `index.html` という名前のファイルを作って上のコードを保存してください。そうしたら、そのファイルをブラウザで開いてください。画面上に `Hello World!` と表示されるはずです。もしくは、このサイトには HTML をブラウザ上で実行できるプレイグラウンドがあるので、それを編集することで実行される内容をリアルタイムで見ることもできます。プレイグラウンドの URL はこちらです。[https://sikepuri-algorithm.github.io/HTMLPlayground](https://sikepuri-algorithm.github.io/HTMLPlayground)
+自分のパソコン上に `index.html` という名前のファイルを作って上のコードを保存してください。そうしたら、そのファイルをブラウザで開いてください。画面上に `Hello World!` と表示されるはずです。もしくは、このサイトには HTML をブラウザ上で実行できるプレイグラウンドがあるので、それを編集することで実行される内容をリアルタイムで見ることもできます。プレイグラウンドの URL は[こちら](/html-playground)です。
 
 <InteractiveCodeEditor language="html">
   {`\

docs/03extras/04website/02docusaurus/01markdown/index.mdx

@@ -32,7 +32,7 @@ Markdown は、文書の書き方です。
 
 Markdown で文章を書いてみましょう。
 
-`index.md` というファイルを作成して VSCode で開いてください。その中に次のコードを書いてみてください。`Ctrl` と `K` を同時に押してから、`V` を押すと、右側にプレビューが表示されます。
+`index.md` というファイルを作成して VSCode で開いてください。その中に次のコードを書いてみてください。`Ctrl` と `K` を同時に押してから、`V` を押すと、右側にプレビューが表示されます。もしくは、[このサイトの Markdown をリアルタイムで編集してプレビューができるプレイグラウンド](/markdown-playground)にコードを書いてみてください。
 
 ```markdown
 **Hello** World!

src/pages/markdown-playground/index.tsx

@@ -0,0 +1,41 @@
+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 mdToHTML from "@site/src/components/mdToHTML";
+
+const defaultMd = `\
+Hello Markdown!
+\
+`;
+
+export default function Home(): JSX.Element {
+  const { siteConfig } = useDocusaurusContext();
+  const [md, setMd] = useState<string>(defaultMd);
+  return (
+    <Layout
+      title={`Hello from ${siteConfig.title}`}
+      description="This is a playground of HTML"
+    >
+      <Box p={2} mt={2}>
+        <Grid container direction="row" spacing={2}>
+          <Grid item xs={6}>
+            <Editor
+              height="80vh"
+              defaultLanguage="html"
+              defaultValue={defaultMd}
+              onChange={(value) => {
+                setMd(value);
+              }}
+            />
+          </Grid>
+          <Grid item xs={6}>
+            <IframeOutput height="80vh">{mdToHTML(md)}</IframeOutput>
+          </Grid>
+        </Grid>
+      </Box>
+    </Layout>
+  );
+}