sikepuri-algorithm · chvmvd · Dec 30, 2022 · Dec 30, 2022
diff --git a/docs/03extras/04website/01html/01html/index.mdx b/docs/03extras/04website/01html/01html/index.mdx
@@ -4,7 +4,7 @@ sidebar_position: 1
 
 import InteractiveCodeEditor from "@site/src/components/InteractiveCodeEditor";
 import Answer from "@site/src/components/Answer";
-import IframeOutput from "@site/src/components/IframeOutput";
+import CustomIframe from "@site/src/components/CustomIframe";
 
 # HTML
 
@@ -518,7 +518,7 @@ HTML では、普通に改行しただけでは改行が出力されないよう
 
 次のように夏目漱石の『吾輩は猫である』を表示する Web サイトを作ってみましょう。
 
-<IframeOutput>{`\
+<CustomIframe>{`\
 <!DOCTYPE html>
 <html lang="ja">
   <head>
@@ -533,7 +533,7 @@ HTML では、普通に改行しただけでは改行が出力されないよう
     <p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙を吹く。どうも咽せぽくて実に弱った。これが人間の飲む煙草というものである事はようやくこの頃知った。</p>
   </body>
 </html>\
-`}</IframeOutput>
+`}</CustomIframe>
 
 <Answer>
 
@@ -566,7 +566,7 @@ HTML では、普通に改行しただけでは改行が出力されないよう
 
 次のような Web サイトを作ってみましょう。
 
-<IframeOutput>{`\
+<CustomIframe>{`\
 <!DOCTYPE html>
 <html lang="ja">
   <head>
@@ -602,7 +602,7 @@ HTML では、普通に改行しただけでは改行が出力されないよう
     </ul>
   </body>
 </html>\
-`}</IframeOutput>
+`}</CustomIframe>
 
 <Answer>
 
@@ -655,7 +655,7 @@ HTML では、普通に改行しただけでは改行が出力されないよう
 次のように、表を作ってみましょう。
 これは、今までの内容だけでは作れません。`<th>` タグについて[MDN](https://developer.mozilla.org/ja/)などで調べてみましょう。
 
-<IframeOutput>{`\
+<CustomIframe>{`\
 <!DOCTYPE html>
 <html lang="ja">
   <head>
@@ -684,7 +684,7 @@ HTML では、普通に改行しただけでは改行が出力されないよう
     </table>
   </body>
 </html>\
-`}</IframeOutput>
+`}</CustomIframe>
 
 <Answer>
 
@@ -729,7 +729,7 @@ HTML では、普通に改行しただけでは改行が出力されないよう
 
 以下のようなお問い合わせフォームを作ってみましょう。これも今までの内容だけではできないので、調べてみましょう。
 
-<IframeOutput>{`\
+<CustomIframe>{`\
 <!DOCTYPE html>
 <html lang="ja">
   <head>
@@ -757,7 +757,7 @@ HTML では、普通に改行しただけでは改行が出力されないよう
     <button type="button">送信</button>
   </body>
 </html>\
-`}</IframeOutput>
+`}</CustomIframe>
 
 <Answer>
 

diff --git a/docs/03extras/04website/01html/02css/index.mdx b/docs/03extras/04website/01html/02css/index.mdx
@@ -4,7 +4,7 @@ sidebar_position: 2
 
 import InteractiveCodeEditor from "@site/src/components/InteractiveCodeEditor";
 import Answer from "@site/src/components/Answer";
-import IframeOutput from "@site/src/components/IframeOutput";
+import CustomIframe from "@site/src/components/CustomIframe";
 
 # CSS
 
@@ -746,7 +746,7 @@ LaTeX での有名な例では、内積を書く時に $(A, B)$ と表示する
 
 次のように CSS の文字だけを強調するページを作ってみましょう。
 
-<IframeOutput>{`\
+<CustomIframe>{`\
 <!DOCTYPE html>
 <html lang="ja">
   <head>
@@ -765,7 +765,7 @@ LaTeX での有名な例では、内積を書く時に $(A, B)$ と表示する
     <p>Hello <em>CSS</em></p>
   </body>
 </html>\
-`}</IframeOutput>
+`}</CustomIframe>
 
 <Answer>
 
@@ -803,7 +803,7 @@ em {
 
 次のようなボタンを作ってみましょう。今までに説明したプロパティだけでは作れないので、調べながら作ってみてください。
 
-<IframeOutput>{`\
+<CustomIframe>{`\
 <!DOCTYPE html>
 <html lang="ja">
   <head>
@@ -827,7 +827,7 @@ em {
     <button type="button" id="button">ボタン</button>
   </body>
 </html>\
-`}</IframeOutput>
+`}</CustomIframe>
 
 <Answer>
 
@@ -870,7 +870,7 @@ em {
 
 次のようにログインページを作ってみましょう。
 
-<IframeOutput>{`\
+<CustomIframe>{`\
 <!DOCTYPE html>
 <html lang="ja">
   <head>
@@ -929,7 +929,7 @@ em {
     </div>
   </body>
 </html>\
-`}</IframeOutput>
+`}</CustomIframe>
 
 <Answer>
 

diff --git a/src/components/IframeOutput/index.tsx → src/components/CustomIframe/index.tsx b/src/components/IframeOutput/index.tsx → src/components/CustomIframe/index.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import BrowserWindow from "@site/src/components/BrowserWindow";
 
-export default function IframeOutput({
+export default function CustomIframe({
   children,
   height,
 }: {

diff --git a/src/components/InteractiveCodeEditor/index.tsx b/src/components/InteractiveCodeEditor/index.tsx
@@ -2,7 +2,7 @@ import React, { Dispatch, SetStateAction, useState } from "react";
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
 import Editor from "@monaco-editor/react";
-import IframeOutput from "@site/src/components/IframeOutput";
+import CustomIframe from "@site/src/components/CustomIframe";
 import mdToHTML from "@site/src/components/mdToHTML";
 import latexToHTML from "@site/src/components/latexToHTML";
 import styles from "./styles.module.css";
@@ -148,7 +148,7 @@ export default function InteractiveCodeEditor({
         </div>
         <div className={styles.playgroundHeader}>結果</div>
         <div className={styles.playgroundPreview}>
-          <IframeOutput>
+          <CustomIframe>
             {language === "html"
               ? code
               : language === "markdown"
@@ -158,7 +158,7 @@ export default function InteractiveCodeEditor({
               : language === "html-css"
               ? `<style>${css}</style>${code}`
               : `<style>${css}</style>${code}<script>${js}</script>`}
-          </IframeOutput>
+          </CustomIframe>
         </div>
       </div>
     </>

diff --git a/src/pages/css-playground/index.tsx b/src/pages/css-playground/index.tsx
@@ -4,7 +4,7 @@ import Layout from "@theme/Layout";
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
 import Editor from "@monaco-editor/react";
-import IframeOutput from "@site/src/components/IframeOutput";
+import CustomIframe from "@site/src/components/CustomIframe";
 import { Grid, Box } from "@mui/material";
 
 const defaultHTML = `\
@@ -63,9 +63,9 @@ export default function Home(): JSX.Element {
             </Tabs>
           </Grid>
           <Grid item xs={6}>
-            <IframeOutput height="80vh">
+            <CustomIframe height="80vh">
               {"<style>" + css + "</style>" + html}
-            </IframeOutput>
+            </CustomIframe>
           </Grid>
         </Grid>
       </Box>

diff --git a/src/pages/html-playground/index.tsx b/src/pages/html-playground/index.tsx
@@ -2,7 +2,7 @@ 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 CustomIframe from "@site/src/components/CustomIframe";
 import { Grid, Box } from "@mui/material";
 
 const defaultHTML = `\
@@ -40,7 +40,7 @@ export default function Home(): JSX.Element {
             />
           </Grid>
           <Grid item xs={6}>
-            <IframeOutput height="80vh">{html}</IframeOutput>
+            <CustomIframe height="80vh">{html}</CustomIframe>
           </Grid>
         </Grid>
       </Box>

diff --git a/src/pages/javascript-playground/index.tsx b/src/pages/javascript-playground/index.tsx
@@ -4,7 +4,7 @@ import Layout from "@theme/Layout";
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
 import Editor from "@monaco-editor/react";
-import IframeOutput from "@site/src/components/IframeOutput";
+import CustomIframe from "@site/src/components/CustomIframe";
 import { Grid, Box } from "@mui/material";
 
 const defaultHTML = `\
@@ -73,15 +73,15 @@ export default function Home(): JSX.Element {
             </Tabs>
           </Grid>
           <Grid item xs={6}>
-            <IframeOutput height="80vh">
+            <CustomIframe height="80vh">
               {"<style>" +
                 css +
                 "</style>" +
                 html +
                 "<script>" +
                 js +
                 "</script>"}
-            </IframeOutput>
+            </CustomIframe>
           </Grid>
         </Grid>
       </Box>

diff --git a/src/pages/latex-playground/index.tsx b/src/pages/latex-playground/index.tsx
@@ -2,7 +2,7 @@ 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 CustomIframe from "@site/src/components/CustomIframe";
 import { Grid, Box } from "@mui/material";
 import latexToHTML from "@site/src/components/latexToHTML";
 
@@ -38,7 +38,7 @@ export default function Home(): JSX.Element {
             />
           </Grid>
           <Grid item xs={6}>
-            <IframeOutput height="80vh">{latexToHTML(latex)}</IframeOutput>
+            <CustomIframe height="80vh">{latexToHTML(latex)}</CustomIframe>
           </Grid>
         </Grid>
       </Box>

diff --git a/src/pages/markdown-playground/index.tsx b/src/pages/markdown-playground/index.tsx
@@ -2,7 +2,7 @@ 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 CustomIframe from "@site/src/components/CustomIframe";
 import { Grid, Box } from "@mui/material";
 import mdToHTML from "@site/src/components/mdToHTML";
 
@@ -32,7 +32,7 @@ export default function Home(): JSX.Element {
             />
           </Grid>
           <Grid item xs={6}>
-            <IframeOutput height="80vh">{mdToHTML(md)}</IframeOutput>
+            <CustomIframe height="80vh">{mdToHTML(md)}</CustomIframe>
           </Grid>
         </Grid>
       </Box>