基礎的なMarkdownの使い方

【学習記録用】
Markdown語法 チートシートを元にしています。

##  1. コードの挿入
### コードブロック
「Ryby」で記述したコードをファイル名「.rb」として投稿したいときは、 **バッククオート（`）** か **チルダ（~）** を使用するとシンタックスハイライト(可読性をつけるために色をつけること)が適用される。コードブロック内でコードブロックを書きたい場合は異なる記号を使うことで書ける。
```markdown:書きかた
```ruby.rb
puts "Hello World"
```
**見え方**
```markdown:ruby
puts "Hello World"
```
#### Diffと他のシンスタックを同時に使う場合
Qiitaでサポートしている各シンタックス(構文)に、新たに **diff_*** という名前をつけることでDiff(比較対象となる2つ（以上）の物の違うところ)を追加することができる。
 `-` 、`+`を行の先頭に書くことでDiffを表現することができる。
~~~md:書きかた
```diff_ruby:
- puts 'Hello'
+ puts 'World'
```
~~~

**見え方**
```diff_ruby:
- puts 'Hello'
+ puts 'World'
```


####  コードスパン
コードをインライン表示することも可能
```markdown:書きかた
`今日は晴れです`
```
**見え方**
`今日は晴れです`
#### コードスパン内でバッククオートを使う
開始・終了のバッククオートを`n+1個`で囲む
```markdown：書きかた
`` `バッククオート` `` や ``` ``2連続バッククオート`` ``` も記述できます。
```

**見え方**

`` `バッククオート` `` や ``` ``2連続バッククオート`` ``` も記述できます。

#### コードスパンの中身がCSSの `<color>` 型
コードスパンの中身が CSS の <color> 型の RGB 16進数表記、 rgb()、 rgba()、 hsl()、 hsla() の場合、横にその色が表示される
```markdown:書きかた
`#ffce44`
`rgb(255,0,0)`
`rgba(0,255,0,0.4)`
`hsl(100, 10%, 10%)`
`hsla(100, 24%, 40%, 0.5)`
```

**見え方**
`#ffce44`
`rgb(255,0,0)`
`rgba(0,255,0,0.4)`
`hsl(100, 10%, 10%)`
`hsla(100, 24%, 40%, 0.5)`

##  2.テキストの装飾
#### 見出し
```markdown:書きかた
#    h1タグです
##   h2タグです
###  h3タグです
```
**見え方**
#  　　h1タグです
## 　　h2タグです
### 　　　h3タグです

目次は記事内の見出しを元に自動で作成される

####  斜体、太字、訂正線
```markdown:書きかた
*斜体*です     _斜体_です 
**太字**です     __太字__です
***斜体＋太字***です  ___斜体＋太字___です
~~訂正線~~です
*と_のどちらでも可能
```
**見え方**
:::note warn
警告
前後に 半角スペース か 改行文字 を入れてくれる必要あり
:::

*斜体*です(HTMLのemタグになる。　Qiitaでは *italic type* )
**太字**です(HTMLのstrongタグになる。Qiitaでは**太字**)
***斜体＋太字***です
 ※斜体と太字は組み合わせることが可能
~~訂正線~~です（）

####  改行と段落
```markdown:改行のやりかた
改行
改行
```
スペース２つ分空ける

```markdown:段落のやり方
段落

段落
```
改行を２回押すことでできる

####  折りたたみ
HTMLの詳細折りたたみ要素を使えます。
追加情報としたい内容を、detailsタグで囲みます。そして、要約として表示したい文章をsummaryタグで記載します。
~~~ markdown:書きかた
<details><summary>サンプルコード</summary>

(上に空行が必要)
```rb
puts 'Hello, World'
</details>
~~~

**見え方**
<details><summary>サンプルコード</summary>

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

####  補足説明
目立つように補足説明をしたい場合、補足したい内容を`:::note info`と `:::` で囲む。
補足したい内容と`:::note info` と `:::` はそれぞれ別の行にする必要あり。
noteの後の`info`は省略可能。
また、noteの後に`warn`を付けると**警告メッセージ**、`alart`を付けると**より強い警告メッセージ**になる

```markdown:書きかた
:::note info
インフォメーション

:::note warn
警告
◯◯に注意してください

:::note alart
より強い警告
◯◯しないでください
```
**見え方** 

:::note info
インフォメーション
:::

:::note warn
警告
◯◯に注意してください
:::

:::note alert
より強い警告
◯◯しないでください
:::

#### note語法でサポートしているMarkdown語法
- リスト
- 太字
- 訂正線
- コードスパン
- リンク
- 画像
- コードブロック


##  3.Lists -リスト
#### 箇条書きリスト
文頭に`*` `+` `-`　のいずれか + `スペース`を入れると箇条書きリストになる
ネストを入れることも可能
```markdown:書きかた
- 1行目
- ２行目
    -ネスト 
```
**結果**
- 1行目
- ２行目
    - ネスト 
####  番号付きリスト
文頭に`数字.`　+ `スペース`を入れると番号付きリストになる
ネストする時には `段落と同じ数のスペース`が必要

```markdown:書きかた
1. 犬
1. 猫
1. うさぎ
```
**見え方**
1. 犬
1. 猫
1. うさぎ


```markdown:2)の応用編
2. りんご
2. みかん
2. もも
```
**見え方**
2. りんご
2. みかん
2. もも

#### 説明リスト
HTMLの`<dl>`タグをそのまま使うことで実現

#### Markdown語法とHTMLタグの対応
  修飾　　　　 　|　　Markdown　　　|　　HTML
---------|-------------|-------
|ボルドー  |   `** **` 　　　　| `<strong></strong>`
|イタリック　　　| `_ _ `     　　| `<em></em>`
|コード　　　　 　　|<code>``</code>|`<code></code>` 
|リンク　　　　　　　　|`[text](url)`| `<a href="url">text</a>` 

#### チェックボックス
順序なしリストの記述の後ろに`[ ]`　+ `スペース`を入れるとチェックボックスが生成される。
すでにチェックが入った状態のボックスを生成する場合は`[x]`を入力する。
```markdown:書きかた
- [ ]  やること１
- [x] やること２
```
**見え方**
- [ ]  やること１
- [x] やること２


##  4.引用
```markdown:書きかた
>文頭に>を置くことで引用ができる
>複数行にまたがる場合、改行のたびにこの記号を置く
> **引用の上下にはリストと同じく空行がないと正しく表示されない**
> 引用の中に別のMarkdownを使用することもできる
> 
> > これは多重引用(ネスト)
```
**見え方**
>文頭に>を置くことで引用ができる
>複数行にまたがる場合、改行のたびにこの記号を置く
> **引用の上下にはリストと同じく空行がないと正しく表示されない**
> 引用の中に別のMarkdownを使用することもできる
> 
> > これは多重引用(ネスト)

##  5.Links- リンク
タイトル付きのリンクを投稿できる(タイトルは、リンク上にマウスホバーすることで表示される)
```markdown:書きかた
[サイト名等の文字を入力] (url)

ex)
[Qiita](http://qiita.com "Qiita Home")
```
**見え方**
[Qiita](http://qiita.com "Qiita Home")

複数箇所への同じリンクの書き方も可能
```markdown:書きかた
[ここ][link-1]と[この ][link-1]リンクは同じになる
[kink-1]という書き方もある
[kink-1]:http://qiita.com/
```
**見え方**
[ここ][link-1] と [この][link-1] リンクは同じになります。
[link-1] という書き方もできます。

[link-1]: http://qiita.com/


##  6.Images-画像埋め込み
:::note warn
FirefoxではGIFアニメーションが動作しない場合がある
:::
 ```markdown:書きかた
##  タイトルありの画像を埋め込む
![ait](url "画像のタイトル")

## タイトル無しの画像を埋め込む
![ait](url）
```
**見え方**
![Qiita](https://qiita-image-store.s3.amazonaws.com/0/45617/015bd058-7ea0-e6a5-b9cb-36a4fb38e59c.png "Qiita")

HTMLで入力すると画像サイズの調整などができる
```markdown:書きかた
<img width="50" src="画像url">
```
**見え方**
<img width="50" src="https://qiita-image-store.s3.amazonaws.com/0/45617/015bd058-7ea0-e6a5-b9cb-36a4fb38e59c.png">



##  7.水平線
３つ以上の `-` `*` `_` だけの行は水平線（罫線）となる
```markdown:書きかた
全て水平線として扱われる
***
___
---
```

##  8.テーブル
テーブルには`自動入力`と`手動入力`がある
#### 自動入力
```markdown:書きかた
3x２と入力すると自動で作成
xはエックスでOK
```
**見え方**
| 1 | 2 | 3 |
|:-:|:-:|:-:|
|   |   |   |
|   |   |   |

#### 手動入力
```markdown:書きかた
|名前 ｜年齢|
|:---|--:|
|aさん|20|
|bさん|30|
```
**見え方**
|名前 |年齢 |
|:--:|:---:|
|aさん | 20 |
|bさん | 30 |

```
| 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      |

##  9.数式の挿入
コードブロックの言語指定に`math`を指定することでTeX記法を用いて数式を記述することができる
```markdown:書きかた
x^2 + y^2 = 1 をインライン表示すると $x^2 + y^2 = 1$ になる
```
**見え方**
$x^2 + y^2 = 1$ 

:::note warn
インライン数式の中でコントロールシンボル（\{のような、バックスラッシュの後に記号が続くもの）を使うと、後述のバックスラッシュによるMarkdownのエスケープと衝突してしまう
```markdown:example
$a = \{1, 2, 3\}
```
```markdown:対処法
バックスラッシュを２つ使用する
$a = \\{1, 2, 3\\}$
```
:::

##  10.脚注
本文中に`[^1]`や`[^example]`のように文字列を記述することで、脚注へのリンクを表す。
注釈内容は、同じく本文中に `[^1]: ...` というように記述する。
```markdown:書きかた
脚注の書きかた[^1]
[^1]:脚注のリンク先
```
**見え方**
脚注の書きかた[^1]
[^1]:脚注のリンク先

##  絵文字
`:`で囲って、絵文字を埋め込むことができる(絵文字ボタンからの使用も可能)
```markdown:書き方
\:grin:
```
**見え方**
:grin:

## 11.リンクカード
URLをリンクカードとして表示できる機能。URLの前後に空行が必要となる。
```markdown:書きかた
（空行）
url
(空行)
```
## 12.ダイアグラム
以下の方法で文章内に図を表示することができる。

#### PlantUMLを使用する
コードブロックの言語名をplantumlとすることで、PlantUMLによるダイアグラムを表示することができる
```markdown:書きかた
```plantuml
A->B : request
B->A : response
```

**見え方**
```plantuml
A->B : request
B->A : response
```
### Mermaidを使用する
コードブロックの言語名を`mermaid`とすることで、Mermaidによるダイアグラムを表示する。
```markdown:書きかた
```mermaid
graph TD;
  A-->B;
  B-->C;
  C-->D;
```
**見え方**
```mermaid   
graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;
```
:::note warn
Mermaidのアップデートによっては、表示が変更されたり、適切に表示がされなくなる可能性がある
:::

### 制限事項
1.図にクリックイベントを設定できるInteraction機能は、セキュリティ上の観点から無効
2.コードブロックあたりの文字数を`2000文字`まで
3.コードブロックあたりの`&`の数を`10`まで

##  13.コンテンツの埋め込み
以下のサービスの埋め込みスクリプト/Embedタグが利用可能
- [Twitter](https://twitter.com)
- [CodeSandbox](https://codesandbox.io/)
- [CodePen](https://codepen.io/)
- [GitHub Gist](https://gist.github.com/)
- [Asciinema](https://asciinema.org/)
- [Figma](https://www.figma.com/ja/)
- [Speaker Deck](https://speakerdeck.com/)
- [SlideShare](https://www.slideshare.net/)
- [Google Slide](https://www.google.com/intl/ja_jp/slides/about/)
- [Docswell](https://www.docswell.com/)
- [YouTube](https://www.youtube.com/)

詳細の確認↓

https://qiita.com/Qiita/items/612e2e149b9f9451c144

## 14.目次(TOC)の自動挿入
目次は記事内の見出しを元に自動生成し、右に自動挿入される