MarkDown記法と、QiitaとVSCodeの違い

# はじめに
MarkDownを様々な場所で書くことが増えてきました。
私の場合は、VSCodeでもMarkDownを書いて、プレビューで見たりしますが、
Qiita、VSCodeでは若干表示に違いが(というか一方では思った通り表示されない)ことが時々あるため、チートシートついでにQiita、VSCodeでの違いをまとめました。
※VSCodeでのMarkDown表現は初期の状態です。

# 見出し
先頭に`#(半角スペース)`をつけ、見出しを書きます。
`##`と重ねていくと見出し2、見出し3...となっていきます。
別の書き方として、文字列の下に`=`をつけると見出し1に、文字列の下に`-`をつけると見出し2となります。(`=`、`-`の個数は自由)

```
# 見出し1
## 見出し
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6
Alt-H1
======
Alt-H2
-----
```

># 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6
Alt-H1
=
Alt-H2
-

### Qiita、VSCodeの挙動の違い
Qiitaは気を利かせてくれて、`#`の後に半角スペースがなくても見出し扱いとなります。
ただし、VSCodeでは忖度されませんので、半角スペースを忘れないように普段からつけることをお勧めします。


# 強調表現
`*`または`_`で文字列を囲むと強調表現ができます。
`*`,`_`でイタリック。
`**`,`__`でボールド。
`***`,`___`でイタリックとボールド。

```
これは *italic* これも _italic_ 
これは **bold** これも __bold__
これは ***Italic & bold*** これも ___Italic & bold___
```

>これは *italic* これも _italic_ 
これは **bold** これも __bold__
これは ***Italic & bold*** これも ___Italic & bold___

### Qiita、VSCodeの挙動の違い
強調表現については特に違いはなさそうです。
個人的には`*`の方が好きです。


# 打ち消し線
`~~`で文字列を囲むと打ち消し線を表示できます。

```
これが~~打ち消し線~~です。
```

>これが~~打ち消し線~~です。

### Qiita、VSCodeの挙動の違い
打ち消し線もQiita、VSCodeで特に違いはありません。


# リスト
`*`,`-`,`+`のいずれかの後に半角スペースをつけるとリストができます。
最初のうちは半角スペースを入れ忘れることがよくあります。
また、インデントを入れるとリストもインデントが可能です。
リストのマークも変わって別のリストだとわかるようになります。

```
* リスト1
    * リスト1-1
    * リスト1-2
        * リスト1-2-1
            * リスト1-2-1-1
- リスト2
+ リスト3
```

>* リスト1
 * リスト1-1
 * リスト1-2
     * リスト1-2-1
         * リスト1-2-1-1
- リスト2
+ リスト3

### Qiita、VSCodeの挙動の違い
Qiitaでは最初のインデントは半角スペース1以上でインデントされます。
2回目のインデントは行頭からスペース5以上が必要です。
3回目のインデント以降は半角スペース9以上でインデントされます。
2回目以降は行頭から`n * 2 + 1`のインデントが必要なようですね。
基本的には半角スペース4でインデントをベースとしているからかと思います。
VSCodeでは、初回、2回目以降ともに前のリストから半角スペース2以上でインデントされます。


# 番号付きリスト
先ほどのリストを番号つきでリスト化します。
先頭に`1.`をつけます。
自動でカウントするため、すべて`1.`でOKです。

```
1. リスト1
    1. リスト1-1
    1. リスト1-2
1. リスト2
1. リスト3
```

>1. リスト1
 1. リスト1-1
 1. リスト1-2
1. リスト2
1. リスト3

### Qiita、VSCodeの挙動の違い
Qiitaに関しては、上記リストと同じ挙動です。
インデントは半角スペース4が基本ですね。
VSCodeですが、半角スペース4でインデントされます。
通常のリストは半角スペース2でインデントされるのになぜでしょう。

これらを踏まえると、リストのインデントは半角スペース4にしておくとよさそうです。

# リンク
通常にURLを書く、`<URL>`とすることでリンクとして表示されます。
URLのリンク先を文字列で書く場合、`[表示文字列](URL)`でリンクを表現できます。
また、リンクを変数のように後述したりできます。
`[表示文字列][変数名]`とリンクを記述する場所に書き
`[変数名]: URL`でリンク先を別の場所に記載できます。
複数の場所で同じリンク先を示す場合などに便利かと思います。

```
https://qiita.com/
<https://qiita.com/>
[Qiita](https://qiita.com/)
[Goolgeリンク][google]
　[google]: https://www.google.co.jp/
```

>https://qiita.com/
<https://qiita.com/>
[Qiita](https://qiita.com/)
[Goolgeリンク][google]
[google]: https://www.google.co.jp/

### Qiita、VSCodeの挙動の違い
Qiitaは上記表現がすべて使えますが、VSCodeでは
`[Goolgeリンク][google]  [google]: https://www.google.co.jp/`の
記法はプレビューでは表示されません。残念ですが。


# イメージ(画像)
`![代替テキスト](画像のURL) "ツールチップ"` でイメージ画像を貼り付けできます。
ツールチップは省略可能です。
また、リンク同様に画像のURLを変数のように後述できます。
`![代替テキスト][変数名] "ツールチップ"`
`[変数名]: URL` と分割して記述できます。

```
![プロフィール画像](https://avatars6.githubusercontent.com/u/25548016?v=3 "github prifile image")

![存在しない画像](http://hogehoge-notfound.com/notfound-image.jpg  "no-image")

![分割画像][profile-image]
　[profile-image]: https://avatars6.githubusercontent.com/u/25548016?v=3
```

>![プロフィール画像](https://avatars6.githubusercontent.com/u/25548016?v=3 "github prifile image")

>![存在しない画像](http://hogehoge-notfound.com/notfound-image.jpg  "no-image")

>![分割画像][profile-image]
[profile-image]: https://avatars6.githubusercontent.com/u/25548016?v=3

### Qiita、VSCodeの挙動の違い
リンクと同様で、Qiitaではすべて利用できますが、
VSCodeでは`![分割画像][profile-image][profile-image]: https://hoge.com/hoge.jpg` の記法は利用できません。


# コード表示
`` ` `` で囲むとインラインコードの表示ができます。
```` ``` ````で囲むとブロックコードの表示ができます。
ブロックコードの場合、最初の行にソースコードの種類を記載することで、シンタックスハイライトが反映されます。
ブロックコードを書く場合は、ブロックコードの上下1行は空白行をつけるようにしましょう。

```
この部分が`インラインコード`です。
```
    ```javascript
    function test() {
        console.log('Hello world');
    }
    ```


>この部分が`インラインコード`です。

>```javascript
function test() {
    console.log('Hello world');
}
```

### Qiita、VSCodeの挙動の違い
Qiita、VSCodeではどちらの書き方もできますが、
Qiitaでは上記に加えてソースコード名も記載できます。

    ```javascript:test.js
    function test() {
        console.log('Hello world');
    }
    ```

>
```javascript:test.js
function test() {
    console.log('Hello world');
}
```

# テーブル
以下のような書き方でテーブルも表記できます。
一番上の行がヘッダ、2番目の行で左寄せ、中央寄せ、右寄せを指定できます。
3行目以降がデータです。
2行目の`:`の位置で寄せが決まりますが、`:`を書かない場合は左寄せになります。

```
|商品|種別|金額|
|:---|:--:|---:|
|ボンゴレビアンコ|パスタ|800|
|マルゲリータ|ピザ|1000|
|白ワイン|ドリンク|500|
```

>|商品|種別|金額|
|-----|:--:|---:|
|ボンゴレビアンコ|パスタ|1200|
|マルゲリータ|ピザ|900|
|白ワイン|ドリンク|500|

### Qiita、VSCodeの挙動の違い
ここは特に差はありません。あえて言えばテーブルデザインの差くらいです。
そういえばMarkDownのテーブルって行や列の結合ができませんね。
元ファイルが見にくくなるからかもしれませんが。


# 水平線
`---`または`***`または`___`で水平線を引くことができます。
どれでも同じ水平線ですのでお好みでどうぞ。

```
---
***
___
```

>---
***
___

### Qiita、VSCodeの挙動の違い
水平線についても、Qiita、VSCodeで差はありません。


# 改行
改行は行末に`半角スペース2つ`または`1行空白`をいれることで改行できます。
Qiitaは上記に加えて、通常の改行も改行扱いとします。


```
1行目(半角スペース2つ)
2行目

3行目
3行目-2 (Qiitaは改行、VSCodeは改行されない)

4行目

5行目 (Qiitaは改行して1行空く、VSCodeは改行のみ)
```

>1行目
2行目
3行目
3行目-2 (Qiitaは改行、VSCodeは改行されない)
4行目

>5行目

### Qiita、VSCodeの挙動の違い
上記のとおり、QiitaとVSCodeでは改行した際の扱いが違います。
Qiitaはブログ記事を書いて発信がメインなので、改行が素直に表現されるのはいいことだと思います。
VSCodeについては純粋にMarkDownの仕様に沿っている感じですね。


# 引用
`>`をつけることで、引用を表現できます。
`>>`と重ねると多重引用も可能です。
また、行間が空いていない場合は、最初の行に`>`をつけるだけで
まとめて引用することが可能です。

```
>通常の引用

>>多重引用

>1つでまとめて引用
 この行も引用される。
```

>通常の引用

>>多重引用

>1つでまとめて引用
 この行も引用される。

### Qiita、VSCodeの挙動の違い
Qiita、VSCodeのどちらも同じ機能が利用できますが、
Qiitaは上記の例のように、最初の引用と最後の引用までがつながって表示されます。
分割したい場合は、間に引用されていない文字入力が必要です。
VSCodeの場合は、通常引用、多重引用で線が分割されて表示されます。


# 注釈
`内容[^注釈名]` で注釈を入れることができます。
注釈内容は`[^注釈名]: 注釈内容`というように記載します。
注釈内容は、どこに書いても記事の一番下に表示されます。
注釈名は数字だけでなく文字でもOKです。
ただし、文字で書いても表示時は数値に置き換えられます。

```
今日はいい天気[^1]
[^1]: 今日とは2017/12/06のこと

注釈はなぜか一番下に表示される[^test]
[^test]それは注釈だからさ
```

>今日はいい天気[^1]
[^1]: 今日とは2017/12/06のこと

>注釈はなぜか一番下に表示される[^test]
[^test]: それは注釈だからさ
　

### Qiita、VSCodeの挙動の違い
Qiitaは上記のとおりですが、VSCodeではデフォルトのMarkDownプレビューで注釈を扱えません。
残念ですがあきらめるか、プラグインを探すかになります。


# 参考
- Markdown Cheatsheet  
https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet