はじめに
Markdown はゆるめのルールが決められただけのマークアップ言語なので、独自(というか GFM 系の)記法もちょくちょく混ざったりもしていますが、個人的によく使う要素を正しくレンダリングできるかを確認するためだけに作った記事です。 Markdown の Example (Sample) としてお使いください。
実際にパースしたい Markdown が 👇 これです。
>_ MARKDOWN
## 1. 見出し (Headings)
# H1 見出し <!-- omit in toc -->
## H2 見出し <!-- omit in toc -->
### H3 見出し <!-- omit in toc -->
#### H4 見出し <!-- omit in toc -->
##### 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:
```

```
実際の表示:

---
## 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)
- 開始
- 進行
- 完了
● チェックリスト
- 完了した項目
- 未完了
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:

実際の表示:

9. リンク
自動 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$ →
ブロック:
18. HTML 併用
HTML で囲ったボックス
太字も可能
Footnotes
-
脚注の中身です。 ↩
