LoginSignup
71
84

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@h-reader(Hirofumi Horiuchi)

MarkDown記法と、QiitaとVSCodeの違い

Last updated at Posted at 2017-12-06

はじめに

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
  2. リスト1-2
  3. リスト2
  4. リスト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]それは注釈だからさ

今日はいい天気1

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

Qiita、VSCodeの挙動の違い

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

参考

  1. 今日とは2017/12/06のこと ↩

  2. それは注釈だからさ
    　 ↩

71
84
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
71
84

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?