標準的なMarkdown記法まとめ

標準的なMarkdown(マークダウン)記法を備忘録も兼ねてまとめました。
GitHub Flavored Markdownなどの拡張記法についてはここで取り扱いません。
Markdownを利用するとブログ記事や資料作成の執筆速度向上、ChatGPTへの条件指定などにも活用できるため、覚えていて損のない記法です。

ちなみに当ブログの記事はMarkdownで記述したものをPHPのパーサーを利用し、HTMLに出力変換しています。

見出し

HTMLのh1～h6タグに相当します。行頭に## ◯◯のように#(シャープ)と半角スペースで適用され、#の数で見出しレベルが決まります。
WordPressではh2以降の見出しが複数あると目次を自動作成する機能もあるため、意識的に使用すると便利である。
※ここでは目次に適用されないようh5, h6の例のみ記載

記述例

##### 見出し：h5
###### 見出し：h6

表示例

見出し：h5

見出し：h6

改行

HTMLのbrタグに相当します。行末に半角スペース2つで適用されます。

記述例

この行末に半角スペース2つを入れる。  
この文章は別の行に表示される。
この文章は改行されない。

表示例

この行末に半角スペース2つを入れる。
この文章は別の行に表示される。 この文章は改行されない。

段落

HTMLのpタグに相当します。文章と文章の間に空行を挟むことで段落を分けることが可能です。

記述例

これは1つ目の段落です。

これは2つ目の段落です。  
改行を挟んでも段落は続きます。

これは3つ目の段落です。

表示例

これは1つ目の段落です。

これは2つ目の段落です。
改行を挟んでも段落は続きます。

これは3つ目の段落です。

番号リスト

HTMLのol,liタグに相当します。1. ◯◯のように半角数字と.(ドット)と半角スペースで適用されます。
行頭にタブや半角スペース4つ以上加えることで、ネストすることが可能です。

記述例

1. 項目1
    1. ネスト項目1-1
    2. ネスト項目1-2
2. 項目2
3. 項目3
    1. ネスト項目3-1
        1. ネスト項目3-1-1

表示例

1. 項目1
   1. ネスト項目1-1
   2. ネスト項目1-2
2. 項目2
3. 項目3
   1. ネスト項目3-1
      1. ネスト項目3-1-1

箇条リスト

HTMLのul,liタグに相当します。- ◯◯のように-(ハイフン), *(アスタリスク), +(プラス)と半角スペースで適用されます。
行頭にタブや半角スペース2つ以上加えることで、ネストすることが可能です。
使用可能な記号が複数ありますが、ChatGPTが生成するMarkdown文章では-(ハイフン)が用いられます。

記述例

- 項目1
    - ネスト項目1-1
    - ネスト項目1-2
* 項目2
+ 項目3
    + ネスト項目3-1
        + ネスト項目3-1-1

表示例

• 項目1
  • ネスト項目1-1
  • ネスト項目1-2
• 項目2
• 項目3
  • ネスト項目3-1
    • ネスト項目3-1-1

斜体／太字

HTMLのemタグやstrongタグに相当します。文中で*◯◯*のように*(アスタリスク), _(アンダースコア)で文字を囲むことで適用され、1重の場合は斜体、2重の場合は太字、3重の場合は両方適用されます。
使用可能な記号が複数ありますが、ChatGPTが生成するMarkdown文章では*(アスタリスク)が用いられます。

記述例

*斜体*  
_斜体_  
**太字**  
__太字__  
***斜体+太字***  
___斜体+太字___

表示例

斜体
斜体
太字
太字
斜体+太字
斜体+太字

打ち消し線

HTMLのdelタグに相当します。文中で~~◯◯~~のように~(チルダ)で文字を囲むことで適用されます。

記述例

~~打ち消し~~

表示例

打ち消し

水平線

HTMLのhrタグに相当します。-(ハイフン), *(アスタリスク), _(アンダースコア)を3つ以上連結すると適用されます。
半角スペースが間に入っても機能するので、視認性向上で利用してもよいでしょう。
使用可能な記号が複数ありますが、ChatGPTが生成するMarkdown文章では*(アスタリスク)3連結が用いられます。

記述例

---
ABC
- - - - -
DEF
***
GHI
___

表示例

---

ABC

---

DEF

---

GHI

---

リンク設定

HTMLのaタグに相当します。またプログラムの変数のように外部リンク定義を使い回すことも可能です。文末に参考元としてまとめて記述すると管理しやすいでしょう。

記述例

[Yahoo! Japan](https://www.yahoo.co.jp/)

[Googleリンク1][Google]

[Googleリンク2][Google]

[Google]: https://www.google.com/
Googleの外部リンク定義は画面上に表示されない。

表示例

Yahoo! Japan

Googleリンク1

Googleリンク2

Googleの外部リンク定義は画面上に表示されない。

引用

HTMLのblockquoteタグに相当します。文中での多重引用も可能ですが、3重から2重のように低層へ戻す際は環境によりレンダリングが変わるため、利用には注意が必要です。

記述例

> 引用文
>> 2重引用文
>>> 3重引用文
>>>> 4重引用文
>>> →これは3重引用文になりません

>> 空行を挟んだこれは2重引用文になります。

表示例

引用文

2重引用文

3重引用文

4重引用文 →これは3重引用文になりません

空行を挟んだこれは2重引用文になります。

テーブル

HTMLのtableタグ一式に相当します。VSCodeで作業する場合は入力補助のプラグイン「Markdown Table」がとても便利です。
セルの区切りとなる|(パイプ)の前後に半角スペースを挿入しないと正常にレンダリングされない点に注意が必要です。

記述例

| 項目1つ目  | 項目2つ目 | 項目3つ目 | 項目4つ目 |
| --------- | :------- | :-------: | -------: |
| デフォルト | 左寄せ   |    中央    |   右寄せ |

表示例

code記法

HTMLのcodeタグおよびpreタグに相当します。`(バッククォート)1つで囲うとインライン要素、3連結で囲うとブロック要素となります。
また、ブロック要素の場合は開始バッククォートの直後に言語を指定することが可能で、highlight.jsなどを用いた装飾に活用できます。

記述例

次のように`sudo vi ファイル名`を使ってPHPファイルを編集します。
```bash
sudo vi test.php
```
```php
<?php
var env = 'staging';
if (env === 'local') {
    phpinfo();
}
exit;
```

表示例

次のようにsudo vi ファイル名を使ってPHPファイルを編集します。

sudo vi test.php

<?php
var env = 'staging';
if (env === 'local') {
    phpinfo();
}
exit;

pre記法

HTMLのpreタグおよびcodeタグに相当します。半角スペース4つまたはタブを文頭に用いることで適用される。
普段はコード記法で十分ですが、コード記法が含まれるMarkdown文章を説明したい場合に活用できます。

記述例

    ## 半角スペースでpre化
    **半角スペースでpre化**
    1. 半角スペースでpre化
        1. 半角スペースでpre化
    ```bash
    sudo vi pre.md
    ```
    コード記法で説明する場合、ここで描画が崩れる。

表示例

## 半角スペースでpre化
**半角スペースでpre化**
1. 半角スペースでpre化
    1. 半角スペースでpre化
```bash
sudo vi pre.md
```
コード記法で説明する場合、ここで描画が崩れる。

以上です。