Markdown記法のコードまとめ

• 見出し
• 箇条書きリスト
• 番号付きリスト
• 折り畳み
• 空行・改行
• スペース
• コードの挿入
  • ブロック
  • インライン
• リンクの挿入
• 画像の挿入
• テーブルの挿入
• 文字装飾
• 水平線
• エスケープ(Markdownの無効化)
• 引用
• コメントアウト

見出し

シャープを文字の先頭に記述する。# が増えるごとに文字のサイズが小さくなる。
# が3つ目以降は下線が付かない。
シャープと見出し文字の間には半角スペースを1つ入れること。

コード

# 見出し h1
見出し h1
===
## 見出し h2
見出し h2
---
### 見出し h3
#### 見出し h4
##### 見出し h5
###### 見出し h6

表示結果

見出し h1

見出し h1

見出し h2

見出し h2

見出し h3

見出し h4

見出し h5

見出し h6

箇条書きリスト

ハイフン、プラス、アスタリスクのいずれかで箇条書きリストを記述可能。 ハイフン、プラス、アスタリスクと箇条書きの項目の間には半角スペースを1つ入れること。

コード

- リスト1
* リスト2
    + リスト2.1
        - リスト2.1.1
            * リスト2.1.1.1
    - リスト2.2
+ リスト3

表示結果

• リスト1

• リスト2
  • リスト2.1
    • リスト2.1.1
      • リスト2.1.1.1
  • リスト2.2

• リスト3

番号付きリスト

コード

1. テキスト1
2. テキスト2
4. テキスト3
    1. テキスト3.1
    2. テキスト3.2
2. テキスト4

表示結果

1. テキスト1
2. テキスト2
3. テキスト3
   1. テキスト3.1
   2. テキスト3.2
4. テキスト4

折り畳み

コード

<details><summary> 折りたたみ </summary>
本文

- 箇条書き
</details>

表示結果

空行・改行

コード

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

3行目<br>
4行目
<br>
<br>
5行目

表示結果

1行目
2行目

3行目
4行目

5行目

スペース

MarkDownでは4種類の空白がある。

コード

空白なし
スペースキーによる空白␣半角␣␣全角
 &nbspより狭い空白
 半角スペースと同じサイズの空白
 半角スペースより少し広めの空白
 半角スペースよりさらに広めの空白　全角スペースとほぼ同じ幅

表示結果

空白なし
スペースキーによる空白 半角　全角
 &nbspより狭い空白
 半角スペースと同じサイズの空白
 半角スペースより少し広めの空白
 半角スペースよりさらに広めの空白　全角スペースとほぼ同じ幅

コードの挿入

ブロックはまとめて、インラインは文章中にコードを挿入する場合など。
コード表示内ではMarkdownは効かず、空白やタブなどもそのまま表示される。

ブロック

コード

```
コード内容
### 見出し
```

表示結果

コード内容
### 見出し 

インライン

コード

`コード<br> ###見出し`

表示結果
コード<br> ###見出し

リンクの挿入

クリックしたらそのページに飛ぶやつ。
内部リンクは見出し名に # を1つだけつける。

コード

1. 外部リンク(URL) 2. 外部リンク(パス) 3. 内部リンク 4. 画像付きリンク

[Google](http://google.com/)                   
[README](./README.md)
[画像の挿入](#画像の挿入)                       
[![image.jpg](./image.jpg)](#画像の挿入)        

表示結果
Google
README
画像の挿入

画像の挿入

MarkDown記法では画像のサイズや位置を変えられないのでHTMLタグで指定する方法がある。
ただし、つかえない場合もあるので注意。

コード
文法：![代替テキスト](画像のURL "画像タイトル")
2,3行目はHTMLタグ

![image.jpg](./image.jpg)
<img src="./image.jpg" width="100px"/>
<img src="./image.jpg" style="opacity:0.3;"/>

表示結果

テーブルの挿入

入力補完がある？ 見出し行（1行目）と最初のレコード行（3行目）の間に、
|:--|--:|:--:| のような行が入るが、実際には表示されない。
表内で表示される文字の位置に関係している。
-の数は1つでいい。 表内で一部装飾文字系は利用できる。

コード

| header     | ヘッダー     |見出し        |
|:-----------|------------:|:------------:|
|左寄せ      | 右寄せ      | 中央寄せ      |
| column     | column      | column       |
| *column*   | _column_    | **column**   |
| __column__ | `column`    | column       |

表示結果

文字装飾

多いのでテーブルで表す。 最後のカスタムについてはHTMLのタグ。中央寄せなどもできる。

水平線

3つ以上の-,*,_を入力する。 間に半角スペースがあってもよい。

コード

---
***
___
* * * *

表示結果

エスケープ

マークダウン記号の前に \ をつける

コード

\`インライン表示されなくなる`
***太字+斜体***
\***斜体のみ無効***
\*\**太字のみ無効***
\*\*\*太字+斜体***

表示結果
`インライン表示されなくなる`
太字+斜体
*斜体のみ無効*
**太字のみ無効**
***太字+斜体無効***

引用

コード

> 引用文１
> 
> 引用文２

表示結果

引用文１

引用文２

コメントアウト

表示はされないが残しておきたいときに。HTML表記推奨。

コード

<!-- コメントアウトしたい内容 複数行も可 -->

[](
単行のみコメントアウト
)

表示結果
表示されない。Visual Code上ではHTML表記で書いた場合は緑文字になる。

参考

Markdown記法 サンプル集
Qiita マークダウン記法 一覧表・チートシート
Markdownチートシート
Markdown 記法 サンプル 一覧
Markdown記法でコメントアウトする