From 1bdf85b07bb2cef3c661acac09ebcfedb4157d46 Mon Sep 17 00:00:00 2001
From: chvmvd <chvmvd@users.noreply.github.com>
Date: Thu, 29 Dec 2022 17:06:19 +0900
Subject: [PATCH 1/2] Add markdown-playground

---
 src/pages/markdown-playground/index.tsx | 41 +++++++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 src/pages/markdown-playground/index.tsx

diff --git a/src/pages/markdown-playground/index.tsx b/src/pages/markdown-playground/index.tsx
new file mode 100644
index 000000000..f9eccf1a7
--- /dev/null
+++ b/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>
+  );
+}

From b390cb4bce2ba6dd5434368d36674f2539507b6e Mon Sep 17 00:00:00 2001
From: chvmvd <chvmvd@users.noreply.github.com>
Date: Thu, 29 Dec 2022 17:08:06 +0900
Subject: [PATCH 2/2] Add playground url

---
 docs/03extras/04website/01html/01html/index.mdx           | 2 +-
 docs/03extras/04website/02docusaurus/01markdown/index.mdx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/03extras/04website/01html/01html/index.mdx b/docs/03extras/04website/01html/01html/index.mdx
index ce3d2bd3f..7d7a17120 100644
--- a/docs/03extras/04website/01html/01html/index.mdx
+++ b/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">
   {`\
diff --git a/docs/03extras/04website/02docusaurus/01markdown/index.mdx b/docs/03extras/04website/02docusaurus/01markdown/index.mdx
index 329865b2c..a39e1953a 100644
--- a/docs/03extras/04website/02docusaurus/01markdown/index.mdx
+++ b/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!