Merge pull request #80 from sikepuri-algorithm/add-docusaurus-example

chvmvd · web-flow · commit 5f3e08dc356d · 2022-11-28T01:51:08.000+09:00
diff --git a/docs/03extras/04website/02docusaurus/index.mdx b/docs/03extras/04website/02docusaurus/index.mdx
@@ -84,18 +84,22 @@ import LifeGame from "@site/src/components/LifeGame/LifeGame";
 
 <InteractiveCodeEditor
   language="markdown"
-  defaultValue={`- アイテム 1
+  defaultValue={`\
+- アイテム 1
 - アイテム 2
-- アイテム 3`}
+- アイテム 3\
+`}
 />
 
 6. 番号付き箇条書きは次のようにして書けます。
 
 <InteractiveCodeEditor
   language="markdown"
-  defaultValue={`1. アイテム 1
+  defaultValue={`\
+1. アイテム 1
 1. アイテム 2
-1. アイテム 3`}
+1. アイテム 3\
+`}
 />
 
 7. バッククォート（ `` ` `` ）で囲むことでインラインコードを表示することができます。
@@ -106,9 +110,11 @@ import LifeGame from "@site/src/components/LifeGame/LifeGame";
 
 <InteractiveCodeEditor
   language="markdown"
-  defaultValue={`\`\`\`python
+  defaultValue={`\
+\`\`\`python
 print("Hello World!")
-\`\`\``}
+\`\`\`\
+`}
 />
 
 9. リンクは次のようにして表すことができます。
diff --git a/docs/03extras/04website/index.mdx b/docs/03extras/04website/index.mdx
@@ -19,7 +19,7 @@ Web サイトは、HTML を用いて作るのが一般的です。以下に HTML
 
 <InteractiveCodeEditor
   language="html"
-  defaultValue={`
+  defaultValue={`\
 <!DOCTYPE html>
 <html lang="ja">
   <head>
@@ -30,7 +30,7 @@ Web サイトは、HTML を用いて作るのが一般的です。以下に HTML
   <body>
     <p>Hello World!</p>
   </body>
-</html>
+</html>\
 `}
 />
 
@@ -96,3 +96,11 @@ minusButton.onclick = () => {
 以降の手順に沿うことで、このシケプリと全く同じようなものを作成することができます。
 
 <DocCardList />
+
+完成品は以下のようになります。
+
+<iframe
+  width="100%"
+  height="400vw"
+  src="https://docusaurus-sample.onrender.com/docs/intro"
+></iframe>
