はじめに

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-2
リスト2
リスト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
[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

![分割画像][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');
}
```

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

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]それは注釈だからさ

今日はいい天気¹

注釈はなぜか一番下に表示される²

Qiita、VSCodeの挙動の違い

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

参考

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

今日とは2017/12/06のこと ↩
それは注釈だからさ
　 ↩

MarkDown記法と、QiitaとVSCodeの違い

はじめに

見出し

見出し1

見出し2

見出し3

見出し4

見出し5

見出し6

Alt-H1

Alt-H2

Qiita、VSCodeの挙動の違い

強調表現

Qiita、VSCodeの挙動の違い

打ち消し線

Qiita、VSCodeの挙動の違い

リスト

Qiita、VSCodeの挙動の違い

番号付きリスト

Qiita、VSCodeの挙動の違い

リンク

Qiita、VSCodeの挙動の違い

イメージ(画像)

Qiita、VSCodeの挙動の違い

コード表示

テーブル

Qiita、VSCodeの挙動の違い

水平線

Qiita、VSCodeの挙動の違い

改行

Qiita、VSCodeの挙動の違い

引用

Qiita、VSCodeの挙動の違い

注釈

Qiita、VSCodeの挙動の違い

参考