Markdown記法　〜練習〜　（自分用）

# Markdown記法　練習
## 目次

`出力`
1. コードの挿入
2. diffの追加
3. 色の視覚化
* テキストの装飾
* 見出し


```:書き方
<dl>
 　 <dt>装飾</dt>
      <dd>・<strong>強調</strong></dd>
      <dd>・Italic</dd>
      <dd>・打ち消し線</dd>
      <dd>・折り畳み</dd>
</dl>


* 画像
  * 引用
    * リンク 

```
`出力`
<dl>
 　 <dt>装飾</dt>
   <dd>・<strong>強調</strong></dd>
    <dd>・Italic</dd>
    <dd>・打ち消し線</dd>
    <dd>・折り畳み</dd>
</dl>


* 画像
  * 引用
    * リンク 　　　 

-テーブル



:::note alert
  順序なしリストにする場合 * + -の後には スペースが必要
:::

***

## コードの挿入
:::note
「```」or 「~~~」で囲んだ部分はコードブロックになる
:::
`入力`
```` :書き方
``` ruby:test.rb
puts 'Hello,World!'
```
````

`出力`
``` ruby:test.rb
puts 'Hello, World!'

```
### diffの追加
diff_名前　とすることで追加可能、-, + でdiffを表現
``` diff_ruby:test.rb
+puts 'Hello, World!'
+puts 'abc'
-puts 'こんにちは'
-puts 'あいうえお'
```
### 色の視覚化
The background color is `#ffce44`
`rgb(255,0,0)`
`rgba(0,255,0,0.4)`
`hsl(100, 10%, 10%)`
`hsla(100, 24%, 40%, 0.5)`

## テキストの装飾
### 見出し
`入力`
```` :書き方
# h1
## h2
  :
######h6
````

`出力`
# h1タグ
## h2タグ
### h3タグ
#### h4タグ
##### h5タグ
###### h6タグ

### 装飾
`入力`
```` :書き方
強調：　  **文字**
italic:  *文字*
打ち消し線: ~~文字~~
折り畳み:

<details><summary>サンプルコード</summary>

```rb
puts 'Hello, World'
```
</details>

````

`出力`

強調：　  **文字**
italic:  *文字*
打ち消し線: ~~文字~~
<details><summary>サンプルコード</summary>

```rb
puts 'Hello, World'
```
</details>

:::note warn
前後に半角スペースか改行文字を入れる
:::

### チェックボックス
`入力`
```` :書き方
- [x] Progate html&css
- [ ] Progate Ruby
- [ ]  Ruby on rails
- [ ] React
- [x] Node.js
````

`出力`
- [x] Progate html&css
- [ ] Progate Ruby
- [ ]  Ruby on rails
- [ ] React
- [x] Node.js

### 引用
```:書き方
> 文頭に>を置くことで引用になる
> >クライアントとサーバーという言葉は「client」「server」が語源
> 
> > > Web Client→ Web Serverへの要求をリクエスト
> > > > Web Server→ Web Clientへの応答をレスポンス


```
> 文頭に>を置くことで引用になる
> >クライアントとサーバーという言葉は「client」「server」が語源
> 
> > > Web Client→ Web Serverへの要求をリクエスト
> > > > Web Server→ Web Clientへの応答をレスポンス


### Link
```:書き方
1.[Qiita](http://qiita.com "Qiita Home")
2.[trend] と [timeline] リンク。

[trend]: https://qiita.com/trend
[timeline]: https://qiita.com/timeline

```
`出力`
1.[Qiita](http://qiita.com "Qiita Home")
2.[trend] と [timeline] リンク。

[trend]: https://qiita.com/trend
[timeline]: https://qiita.com/timeline

### 画像
```:書き方
![Qiita](https://qiita-image-store.s3.amazonaws.com/0/45617/015bd058-7ea0-e6a5-b9cb-36a4fb38e59c.png "Qiita")

```
`出力`
![Qiita](https://qiita-image-store.s3.amazonaws.com/0/45617/015bd058-7ea0-e6a5-b9cb-36a4fb38e59c.png "Qiita")

htmlでの入力だと画像サイズ変更可能

### テーブル

```:書き方
| Left align | Right align | Center align |
|:-----------|------------:|:------------:|
| This       | This        | This         |
| column     | column      | column       |
| will       | will        | will         |
| be         | be          | be           |
| left       | right       | center       |
| aligned    | aligned     | aligned      |

```

`出力`
| Left align | Right align | Center align |
|:-----------|------------:|:------------:|
| This       | This        | This         |
| column     | column      | column       |
| will       | will        | will         |
| be         | be          | be           |
| left       | right       | center       |
| aligned    | aligned     | aligned      |

3x2と記入することでテーブルを自動入力することも可能
xはエックスである。