Markdown 記法一覧

よく使う or たまに使う Markdown 記法を正しくレンダリングできるか確認するよ。

2025年11月19日
#Markdown
Markdown 記法一覧

はじめに

Markdown はゆるめのルールが決められただけのマークアップ言語なので、独自（というか GFM 系の）記法もちょくちょく混ざったりもしていますが、個人的によく使う要素を正しくレンダリングできるかを確認するためだけに作った記事です。 Markdown の Example (Sample) としてお使いください。

実際にパースしたい Markdown が 👇 これです。

## 1. 見出し (Headings)


# H1 見出し


## H2 見出し


### H3 見出し


#### H4 見出し


##### H5 見出し


###### H6 見出し


---


## 2. 強調・文字装飾


* *イタリック*
* **ボールド**
* ***ボールド + イタリック***
* ~~取り消し線~~
* ==ハイライト（拡張記法）==
* <u>下線（HTML）</u>


---


## 3. 引用 (Blockquote)


> これは引用です
>
> > 入れ子の引用です
> >
> > > さらに深い引用


---


## 4. リスト


### ● 箇条書き (Unordered list)


* りんご


  * 青りんご


    * もっと青いりんご
* みかん
* バナナ


### ● 番号付きリスト (Ordered list)


1. 開始
2. 進行
3. 完了


### ● チェックリスト


* [x] 完了した項目
* [ ] 未完了


---


## 5. コード


### ● インラインコード


`inline code`


### ● 通常のコードブロック


```python:main.py
import random


words = ["猫", "量子", "コーヒー", "宇宙", "プログラマー", "夢"]
verbs = ["が跳ねる", "が震える", "が歌う", "が崩壊する", "が覚醒する"]
ends  = ["朝だった", "真夜中だった", "無重力で", "そして世界は笑った"]


def poem():
    return f"{random.choice(words)}{random.choice(verbs)}、{random.choice(ends)}。"


for _ in range(5):
    print(poem())
```


---


## 6. Diff コードブロック


```diff
diff --git a/app.js b/app.js
--- a/app.js
+++ b/app.js
@@ -1,4 +1,4 @@
-console.log("Hello");
+console.log("Hello, Markdown!");
```


---


## 7. テーブル


| 名前 | 年齢 | 備考    |
| -- | -: | ----- |
| 山田 | 20 | 学生    |
| 佐藤 | 34 | エンジニア |
| 鈴木 | 28 | デザイナー |


---


## 8. 画像


Markdown:


```
![サンプル画像](https://placehold.jp/30/dd6699/ffffff/300x150.png?text=placeholder+image)
```




実際の表示：


![サンプル画像](https://placehold.jp/30/dd6699/ffffff/300x150.png?text=placeholder+image)


---


## 9. リンク


[Google](https://google.com)


自動 URL → [https://example.com](https://example.com)


---


## 10. 脚注（Footnotes）


これは脚注付きの文です[^1]。


[^1]: 脚注の中身です。


---


## 11. タスクリスト (GitHub Flavored Markdown)


* [ ] Task 1
* [x] Task 2 (完了)




---


## 12. 折りたたみ (Details)


<details>
<summary>クリックして展開</summary>


折りたたみの中身です！


```json
{
  "message": "Hello"
}
```


</details>


---


## 13. 定義リスト (Definition List)


Term 1
: これは定義です。


Term 2
: 別の定義。


---


## 14. 水平線


---


## 15. 絵文字


😀 🎉 🚀 ✨


---


## 16. Mermaid（図表）


### フローチャート


```mermaid
flowchart TD
    A[Start] --> B{条件?}
    B -->|Yes| C[処理 1]
    B -->|No| D[処理 2]
    C --> E[End]
    D --> E[End]
```


### シーケンス図


```mermaid
sequenceDiagram
    participant User
    participant Server
    User->>Server: Request
    Server-->>User: Response
```


### ガントチャート


```mermaid
gantt
    title プロジェクト進行
    dateFormat  YYYY-MM-DD
    section 準備
    企画        :done,    des1, 2024-01-01,2024-01-05
    section 開発
    実装        :active,  des2, 2024-01-06, 10d
```


---


## 17. MathJax / LaTeX（GitHub など対応環境のみ）


インライン：
`$E = mc^2$` → $E = mc^2$


ブロック：


```math
\int_{0}^{\infty} e^{-x} dx = 1
```


---




## 18. HTML 併用


<div style="border:1px solid #ccc; padding:10px; margin-bottom: 10px;">
HTML で囲ったボックス
<b>太字も可能</b>
</div>




<div align="center">
  <img src="https://placehold.jp/150x150.png" width="30%" />
</div>

1. 見出し (Headings)

H1 見出し

H2 見出し

H3 見出し

H4 見出し

H5 見出し
H6 見出し

2. 強調・文字装飾

  • イタリック
  • ボールド
  • ボールド + イタリック
  • 取り消し線
  • ==ハイライト（拡張記法）==
  • 下線（HTML）

3. 引用 (Blockquote)

これは引用です

入れ子の引用です

さらに深い引用

4. リスト

● 箇条書き (Unordered list)

  • りんご

    • 青りんご

      • もっと青いりんご

  • みかん

  • バナナ

● 番号付きリスト (Ordered list)

  1. 開始
  2. 進行
  3. 完了

● チェックリスト

  • 完了した項目
  • 未完了

5. コード

● インラインコード

inline code

● 通常のコードブロック

main.py
import random


words = ["猫", "量子", "コーヒー", "宇宙", "プログラマー", "夢"]
verbs = ["が跳ねる", "が震える", "が歌う", "が崩壊する", "が覚醒する"]
ends  = ["朝だった", "真夜中だった", "無重力で", "そして世界は笑った"]


def poem():
    return f"{random.choice(words)}{random.choice(verbs)}、{random.choice(ends)}。"


for _ in range(5):
    print(poem())

6. Diff コードブロック

diff --git a/app.js b/app.js
--- a/app.js
+++ b/app.js
@@ -1,4 +1,4 @@
-console.log("Hello");
+console.log("Hello, Markdown!");

7. テーブル

名前年齢備考
山田20学生
佐藤34エンジニア
鈴木28デザイナー

8. 画像

Markdown:

![サンプル画像](https://placehold.jp/30/dd6699/ffffff/300x150.png?text=placeholder+image)

実際の表示：

サンプル画像

9. リンク

Google

自動 URL → https://example.com

10. 脚注（Footnotes）

これは脚注付きの文です1。

11. タスクリスト (GitHub Flavored Markdown)

  • Task 1
  • Task 2 (完了)

12. 折りたたみ (Details)

クリックして展開 折りたたみの中身です！ ```json { "message": "Hello" } ```

13. 定義リスト (Definition List)

Term 1 : これは定義です。

Term 2 : 別の定義。

14. 水平線

15. 絵文字

😀 🎉 🚀 ✨

16. Mermaid（図表）

フローチャート

シーケンス図

ガントチャート

17. MathJax / LaTeX（GitHub など対応環境のみ）

インライン： $E = mc^2$ → E=mc2E = mc^2

ブロック：

∫0∞e−xdx=1\int_{0}^{\infty} e^{-x} dx = 1

18. HTML 併用

HTML で囲ったボックス 太字も可能

Footnotes

  1. 脚注の中身です。 ↩