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!
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>
+  );
+}