Skip to content

Create InteractiveCodeEditor #77

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Nov 27, 2022
Merged

Create InteractiveCodeEditor #77

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
947f6c1
introduce monaco editor
chvmvd Nov 26, 2022
35f7402
introduce markdown-it
chvmvd Nov 27, 2022
8189174
create InteractiveCodeEditor component
chvmvd Nov 27, 2022
83367bc
use InteractiveCodeEditor component
chvmvd Nov 27, 2022
6f72699
use template literals
chvmvd Nov 27, 2022
18b7a71
add title in iframe
chvmvd Nov 27, 2022
8fe8d50
change size InteractiveCodeEditor
chvmvd Nov 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
166 changes: 46 additions & 120 deletions docs/03extras/04website/02docusaurus/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -60,155 +60,81 @@ import LifeGame from "@site/src/components/LifeGame/LifeGame";

1. `#` と書くことで見出しを書くことができます。

```markdown
# レベル 1 の見出し
```

<BrowserWindow>

# レベル 1 の見出し

</BrowserWindow>
<InteractiveCodeEditor
language="markdown"
defaultValue={"# レベル 1 の見出し"}
/>

2. `##` は `#` の一個下の見出しです。

```markdown
## レベル 2 の見出し
```

<BrowserWindow>

## レベル 2 の見出し

</BrowserWindow>
<InteractiveCodeEditor
language="markdown"
defaultValue={"## レベル 2 の見出し"}
/>

3. `**` で強調することができます。

```markdown
**強調**
```

<BrowserWindow>

**強調**

</BrowserWindow>
<InteractiveCodeEditor language="markdown" defaultValue={"**強調**"} />

4. `>` とすることで引用することができます。

```markdown
> 引用
```

<BrowserWindow>

> 引用

</BrowserWindow>
<InteractiveCodeEditor language="markdown" defaultValue={"> 引用"} />

5. 箇条書きは次のようにして書けます。

```markdown
- アイテム 1
- アイテム 2
- アイテム 3
```

<BrowserWindow>

<ul style={{ listStyleType: "disc" }}>
<li>アイテム 1</li>
<li>アイテム 2</li>
<li>アイテム 3</li>
</ul>

</BrowserWindow>
<InteractiveCodeEditor
language="markdown"
defaultValue={`- アイテム 1
- アイテム 2
- アイテム 3`}
/>

6. 番号付き箇条書きは次のようにして書けます。

```markdown
1. アイテム 1
1. アイテム 2
1. アイテム 3
```

<BrowserWindow>

<ol style={{ listStyleType: "decimal" }}>
<li>アイテム 1</li>
<li>アイテム 2</li>
<li>アイテム 3</li>
</ol>

</BrowserWindow>
<InteractiveCodeEditor
language="markdown"
defaultValue={`1. アイテム 1
1. アイテム 2
1. アイテム 3`}
/>

7. バッククォート（ `` ` `` ）で囲むことでインラインコードを表示することができます。

```markdown
`コードテキスト`
```

<BrowserWindow>

`コードテキスト`

</BrowserWindow>
<InteractiveCodeEditor language="markdown" defaultValue={"`コードテキスト`"} />

8. バッククォート 3 つで、コードブロックを表示することができます。

````markdown
```python
print("Hello World!")
```
````

<BrowserWindow>

```python
print("Hello World!")
```

</BrowserWindow>
<InteractiveCodeEditor
language="markdown"
defaultValue={`\`\`\`python
print("Hello World!")
\`\`\``}
/>

9. リンクは次のようにして表すことができます。

```markdown
[Introduction to Algorithms](https://sikepuri-algorithm.github.io/)
```

<BrowserWindow>

[Introduction to Algorithms](https://sikepuri-algorithm.github.io/)

</BrowserWindow>
<InteractiveCodeEditor
language="markdown"
defaultValue={
"[Introduction to Algorithms](https://sikepuri-algorithm.github.io/)"
}
/>

10. 画像は次のようにして表示することができます。もちろん相対パスも使えます。

```markdown
![Introduction to Algorithms](https://sikepuri-algorithm.github.io/img/logo.svg)
```

<BrowserWindow>

<div style={{maxWidth:"200px"}}>

![Introduction toAlgorithms](https://sikepuri-algorithm.github.io/img/logo.svg)

</div>

</BrowserWindow>
<InteractiveCodeEditor
language="markdown"
defaultValue={
"![Introduction to Algorithms](https://sikepuri-algorithm.github.io/img/favicon.ico)"
}
/>

11. 実は、Markdown の中には HTML も書くことができます。

```markdown
<button type="button">ボタン</button>
```

<BrowserWindow>

<button type="button">ボタン</button>

</BrowserWindow>
<InteractiveCodeEditor
language="markdown"
defaultValue={'<button type="button">ボタン</button>'}
/>

:::

Expand Down
Loading