## はじめに Markdown はゆるめのルールが決められただけのマークアップ言語なので、独自（というか GFM 系の）記法もちょくちょく混ざったりもしていますが、個人的によく使う要素を正しくレンダリングできるかを確認するためだけに作った記事です。 Markdown の Example (Sample) としてお使いください。実際にパースしたい Markdown が 👇 これです。 ````markdown ## 1. 見出し (Headings) # H1 見出し ## H2 見出し ### H3 見出し #### H4 見出し ##### H5 見出し ###### H6 見出し --- ## 2. 強調・文字装飾 * *イタリック* * **ボールド** * ***ボールド + イタリック*** * ~~取り消し線~~ * ==ハイライト（拡張記法）== * 下線（HTML） --- ## 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)

クリックして展開

折りたたみの中身です！ ```json { "message": "Hello" } ```

--- ## 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 併用

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

```` ## 1. 見出し (Headings) # H1 見出し ## H2 見出し ### H3 見出し #### H4 見出し ##### H5 見出し ###### H6 見出し --- ## 2. 強調・文字装飾 * *イタリック* * **ボールド** * ***ボールド + イタリック*** * ~~取り消し線~~ * ==ハイライト（拡張記法）== * 下線（HTML） --- ## 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)

クリックして展開

折りたたみの中身です！ ```json { "message": "Hello" } ```

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