diff --git a/docs/03extras/04website/02docusaurus/index.mdx b/docs/03extras/04website/02docusaurus/index.mdx index 0911c8b5e..8ed754fd9 100644 --- a/docs/03extras/04website/02docusaurus/index.mdx +++ b/docs/03extras/04website/02docusaurus/index.mdx @@ -2,7 +2,7 @@ sidebar_position: 2 --- -import BrowserWindow from "@site/src/components/BrowserWindow"; +import InteractiveCodeEditor from "@site/src/components/InteractiveCodeEditor/InteractiveCodeEditor"; import installDocusaurus from "./install_docusaurus.mp4"; import editDocusaurus from "./edit_docusaurus.mp4"; import LifeGame from "@site/src/components/LifeGame/LifeGame"; @@ -60,155 +60,81 @@ import LifeGame from "@site/src/components/LifeGame/LifeGame"; 1. `#` と書くことで見出しを書くことができます。 - ```markdown - # レベル 1 の見出し - ``` - - - - # レベル 1 の見出し - - + 2. `##` は `#` の一個下の見出しです。 - ```markdown - ## レベル 2 の見出し - ``` - - - - ## レベル 2 の見出し - - + 3. `**` で強調することができます。 - ```markdown - **強調** - ``` - - - - **強調** - - + 4. `>` とすることで引用することができます。 - ```markdown - > 引用 - ``` - - - - > 引用 - - + 引用"} /> 5. 箇条書きは次のようにして書けます。 - ```markdown - - アイテム 1 - - アイテム 2 - - アイテム 3 - ``` - - - -
    -
  • アイテム 1
    • -
  • アイテム 2
    • -
  • アイテム 3
    • -
- - + 6. 番号付き箇条書きは次のようにして書けます。 - ```markdown - 1. アイテム 1 - 1. アイテム 2 - 1. アイテム 3 - ``` - - - -
    -
  1. アイテム 1
    2. -
  2. アイテム 2
    3. -
  3. アイテム 3
    4. -
- - + 7. バッククォート（ `` ` `` ）で囲むことでインラインコードを表示することができます。 - ```markdown - `コードテキスト` - ``` - - - - `コードテキスト` - - + 8. バッククォート 3 つで、コードブロックを表示することができます。 - ````markdown - ```python - print("Hello World!") - ``` - ```` - - - - ```python - print("Hello World!") - ``` - - + 9. リンクは次のようにして表すことができます。 - ```markdown - [Introduction to Algorithms](https://sikepuri-algorithm.github.io/) - ``` - - - - [Introduction to Algorithms](https://sikepuri-algorithm.github.io/) - - + 10. 画像は次のようにして表示することができます。もちろん相対パスも使えます。 - ```markdown - ![Introduction to Algorithms](https://sikepuri-algorithm.github.io/img/logo.svg) - ``` - - - -
- - ![Introduction toAlgorithms](https://sikepuri-algorithm.github.io/img/logo.svg) - -
- - + 11. 実は、Markdown の中には HTML も書くことができます。 - ```markdown - - ``` - - - - - - +ボタン'} +/> ::: diff --git a/package-lock.json b/package-lock.json index 50ba4791c..b49148644 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,10 +14,12 @@ "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.5", "@mdx-js/react": "^1.6.22", + "@monaco-editor/react": "^4.4.6", "@mui/icons-material": "^5.10.15", "@mui/material": "^5.10.15", "clsx": "^1.2.1", "hast-util-is-element": "^1.1.0", + "markdown-it": "^13.0.1", "prism-react-renderer": "^1.3.5", "react": "^17.0.2", "react-dom": "^17.0.2", @@ -3217,6 +3219,31 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/@monaco-editor/loader": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.3.2.tgz", + "integrity": "sha512-BTDbpHl3e47r3AAtpfVFTlAi7WXv4UQ/xZmz8atKl4q7epQV5e7+JbigFDViWF71VBi4IIBdcWP57Hj+OWuc9g==", + "dependencies": { + "state-local": "^1.0.6" + }, + "peerDependencies": { + "monaco-editor": ">= 0.21.0 < 1" + } + }, + "node_modules/@monaco-editor/react": { + "version": "4.4.6", + "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.4.6.tgz", + "integrity": "sha512-Gr3uz3LYf33wlFE3eRnta4RxP5FSNxiIV9ENn2D2/rN8KgGAD8ecvcITRtsbbyuOuNkwbuHYxfeaz2Vr+CtyFA==", + "dependencies": { + "@monaco-editor/loader": "^1.3.2", + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "monaco-editor": ">= 0.25.0 < 1", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/@mui/base": { "version": "5.0.0-alpha.107", "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.107.tgz", @@ -9666,6 +9693,14 @@ "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" }, + "node_modules/linkify-it": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-4.0.1.tgz", + "integrity": "sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==", + "dependencies": { + "uc.micro": "^1.0.1" + } + }, "node_modules/loader-runner": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz", @@ -9833,6 +9868,32 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/markdown-it": { + "version": "13.0.1", + "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-13.0.1.tgz", + "integrity": "sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q==", + "dependencies": { + "argparse": "^2.0.1", + "entities": "~3.0.1", + "linkify-it": "^4.0.1", + "mdurl": "^1.0.1", + "uc.micro": "^1.0.5" + }, + "bin": { + "markdown-it": "bin/markdown-it.js" + } + }, + "node_modules/markdown-it/node_modules/entities": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz", + "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==", + "engines": { + "node": ">=0.12" + }, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, "node_modules/markdown-table": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-2.0.0.tgz", @@ -10348,6 +10409,12 @@ "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz", "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==" }, + "node_modules/monaco-editor": { + "version": "0.34.1", + "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.34.1.tgz", + "integrity": "sha512-FKc80TyiMaruhJKKPz5SpJPIjL+dflGvz4CpuThaPMc94AyN7SeC9HQ8hrvaxX7EyHdJcUY5i4D0gNyJj1vSZQ==", + "peer": true + }, "node_modules/mrmime": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz", @@ -13599,6 +13666,11 @@ "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==", "deprecated": "Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility" }, + "node_modules/state-local": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz", + "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==" + }, "node_modules/state-toggle": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/state-toggle/-/state-toggle-1.0.3.tgz", @@ -14254,6 +14326,11 @@ "node": "*" } }, + "node_modules/uc.micro": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz", + "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==" + }, "node_modules/unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", @@ -17825,6 +17902,23 @@ "resolved": "https://registry.npmjs.org/@mdx-js/util/-/util-1.6.22.tgz", "integrity": "sha512-H1rQc1ZOHANWBvPcW+JpGwr+juXSxM8Q8YCkm3GhZd8REu1fHR3z99CErO1p9pkcfcxZnMdIZdIsXkOHY0NilA==" }, + "@monaco-editor/loader": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.3.2.tgz", + "integrity": "sha512-BTDbpHl3e47r3AAtpfVFTlAi7WXv4UQ/xZmz8atKl4q7epQV5e7+JbigFDViWF71VBi4IIBdcWP57Hj+OWuc9g==", + "requires": { + "state-local": "^1.0.6" + } + }, + "@monaco-editor/react": { + "version": "4.4.6", + "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.4.6.tgz", + "integrity": "sha512-Gr3uz3LYf33wlFE3eRnta4RxP5FSNxiIV9ENn2D2/rN8KgGAD8ecvcITRtsbbyuOuNkwbuHYxfeaz2Vr+CtyFA==", + "requires": { + "@monaco-editor/loader": "^1.3.2", + "prop-types": "^15.7.2" + } + }, "@mui/base": { "version": "5.0.0-alpha.107", "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.107.tgz", @@ -22448,6 +22542,14 @@ "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" }, + "linkify-it": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-4.0.1.tgz", + "integrity": "sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==", + "requires": { + "uc.micro": "^1.0.1" + } + }, "loader-runner": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz", @@ -22578,6 +22680,25 @@ "resolved": "https://registry.npmjs.org/markdown-escapes/-/markdown-escapes-1.0.4.tgz", "integrity": "sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg==" }, + "markdown-it": { + "version": "13.0.1", + "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-13.0.1.tgz", + "integrity": "sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q==", + "requires": { + "argparse": "^2.0.1", + "entities": "~3.0.1", + "linkify-it": "^4.0.1", + "mdurl": "^1.0.1", + "uc.micro": "^1.0.5" + }, + "dependencies": { + "entities": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz", + "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==" + } + } + }, "markdown-table": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-2.0.0.tgz", @@ -22940,6 +23061,12 @@ "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz", "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==" }, + "monaco-editor": { + "version": "0.34.1", + "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.34.1.tgz", + "integrity": "sha512-FKc80TyiMaruhJKKPz5SpJPIjL+dflGvz4CpuThaPMc94AyN7SeC9HQ8hrvaxX7EyHdJcUY5i4D0gNyJj1vSZQ==", + "peer": true + }, "mrmime": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz", @@ -25304,6 +25431,11 @@ "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz", "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==" }, + "state-local": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz", + "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==" + }, "state-toggle": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/state-toggle/-/state-toggle-1.0.3.tgz", @@ -25752,6 +25884,11 @@ "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.32.tgz", "integrity": "sha512-f9BESNVhzlhEFf2CHMSj40NWOjYPl1YKYbrvIr/hFTDEmLq7SRbWvm7FcdcpCYT95zrOhC7gZSxjdnnTpBcwVw==" }, + "uc.micro": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz", + "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==" + }, "unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", diff --git a/package.json b/package.json index 34a3c69cf..4dedaa366 100644 --- a/package.json +++ b/package.json @@ -23,10 +23,12 @@ "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.5", "@mdx-js/react": "^1.6.22", + "@monaco-editor/react": "^4.4.6", "@mui/icons-material": "^5.10.15", "@mui/material": "^5.10.15", "clsx": "^1.2.1", "hast-util-is-element": "^1.1.0", + "markdown-it": "^13.0.1", "prism-react-renderer": "^1.3.5", "react": "^17.0.2", "react-dom": "^17.0.2", diff --git a/src/components/InteractiveCodeEditor/InteractiveCodeEditor.tsx b/src/components/InteractiveCodeEditor/InteractiveCodeEditor.tsx new file mode 100644 index 000000000..b08d69152 --- /dev/null +++ b/src/components/InteractiveCodeEditor/InteractiveCodeEditor.tsx @@ -0,0 +1,75 @@ +import React, { useState } from "react"; +import Editor from "@monaco-editor/react"; +import MarkdownIt from "markdown-it"; +import BrowserWindow from "@site/src/components/BrowserWindow"; +import styles from "./styles.module.css"; + +export default function InteractiveCodeEditor({ + language, + defaultValue, +}: { + language: "html" | "markdown"; + defaultValue: string; +}) { + const [code, setCode] = useState(defaultValue); + const md = new MarkdownIt({ html: true, linkify: true, typographer: true }); + const css = ` + +`; + return ( + <> +
+
ライブエディター
+
+ { + setCode(value); + }} + /> +
+
結果
+
+ + + +
+
+ + ); +} diff --git a/src/components/InteractiveCodeEditor/styles.module.css b/src/components/InteractiveCodeEditor/styles.module.css new file mode 100644 index 000000000..a823576a0 --- /dev/null +++ b/src/components/InteractiveCodeEditor/styles.module.css @@ -0,0 +1,44 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +.playgroundContainer { + margin-bottom: var(--ifm-leading); + border-radius: var(--ifm-global-radius); + box-shadow: var(--ifm-global-shadow-lw); + overflow: hidden; +} + +.playgroundHeader { + letter-spacing: 0.08rem; + padding: 0.75rem; + text-transform: uppercase; + font-weight: bold; + background: var(--ifm-color-emphasis-200); + color: var(--ifm-color-content); + font-size: var(--ifm-code-font-size); +} + +.playgroundHeader:first-of-type { + background: var(--ifm-color-emphasis-600); + color: var(--ifm-color-content-inverse); +} + +.playgroundEditor { + font: var(--ifm-code-font-size) / var(--ifm-pre-line-height) + var(--ifm-font-family-monospace) !important; + /* rtl:ignore */ + direction: ltr; +} + +.playgroundPreview { + padding: 1rem; + background-color: var(--ifm-pre-background); +} + +.errorFallback { + padding: 0.55rem; +}