Markdown の網羅的な表示サンプルと構文仕様です。レンダリング後の表示結果と実際の書き方を対比しながら確認できるよう、セクションごとに解説しています。
巻末には、ワンクリックでコピーできる完全な Markdown ソースコードも掲載しています。
📚 Markdown 総合構文サンプル
1. 見出し (Headers)
Markdown は # の個数によって 1〜6 レベルの見出しを表現します。
見出し 1 (H1)
見出し 2 (H2)
見出し 3 (H3)
見出し 4 (H4)
見出し 5 (H5)
見出し 6 (H6)
書式:
# 見出し1,## 見出し2…###### 見出し6
2. テキスト装飾 (Text Formatting)
インラインテキストの装飾：
- 太字テキスト
- 斜体テキスト
- 太字かつ斜体
取り消し線インラインコード- 下線（HTMLタグ）
- ハイライト強調（対応エディタのみ）
書式:
**太字**,*斜体*,***太字斜体***,~~取り消し線~~,`インラインコード`,<u>下線</u>,==ハイライト==
3. リスト (Lists)
箇条書きリスト
- りんご
- バナナ
- ネストされた品種 1
- ネストされた品種 2
- みかん
番号付きリスト
- ステップ 1：エディタを開く
- ステップ 2：Markdown を入力する
- ステップ 3：HTML または PDF として出力
タスクリスト
- 完了したタスク
- 未完了のタスク
- 追加の予定事項
書式:
- 箇条書き:
- 項目または* 項目- 番号付き:
1. 項目,2. 項目- タスク:
- [ ] 未完了,- [x] 完了
4. 引用 (Blockquotes)
これは通常の引用ブロックです。 複数行にわたって記述できます。
これはネストされた引用です。 マトリョーシカのように入れ子にできます。
引用内に他の要素を含めることも可能です：
- リスト項目
インラインコード- 太字テキスト
書式:
>で引用、>>でネスト引用。
5. コードブロック (Code Blocks)
インラインコードはバッククォートを使用：console.log("Hello World");
複数行コードブロックはバッククォート3つを使用し、言語名を指定してシンタックスハイライトを有効化します：
def fibonacci(n):
"""フィボナッチ数列の計算"""
if n <= 1:
return n
return fibonacci(n - 1) + fibonacci(n - 2)
# 最初の10個を表示
for i in range(10):
print(fibonacci(i), end=" ")
print()// JavaScript 例
const greet = (name) => {
console.log(`Hello, ${name}!`);
};
greet("Markdown");書式:
で閉じます。言語名</code> で開始し、<code>
6. リンクと画像 (Links & Images)
- 通常リンク: GitHub を開く
- タイトル付きリンク: Google を開く
- 画像:
- リンク付き画像:
書式:
- リンク:
[リンク文字](URL "任意タイトル")- 画像:
- クリッカブル画像:
[](遷移先URL)
7. テーブル (Tables)
| 左寄せ (Left) | 中央揃え (Center) | 右寄せ (Right) | デフォルト (Default) |
|---|---|---|---|
| セル 1 | セル 2 | セル 3 | セル 4 |
| 太字 | 斜体 | コード | |
| 長いテキストは幅に応じて折り返されます | データ | 100 | 200 |
書式: 列を
|で区切り、ヘッダーを-で区切ります。:---（左）、:---:（中央）、---:（右）。
8. 水平線 (Horizontal Rules)
3つ以上の -、*、または _ を配置して区切り線を引きます：
9. 拡張構文 (Extended Syntax)
(注意：Typora、Obsidian、GitHub、Notion などの拡張対応エディタが必要です)
📌 脚注 (Footnotes)
📐 数式 (Math / KaTeX)
インライン数式：質量とエネルギーの等価性 。
ブロック数式：
📊 ダイアグラム (Mermaid)
graph TD
A[開始] --> B{Markdown を理解した?}
B -->|はい| C[執筆を始める!]
B -->|いいえ| D[本ガイドを読む]
D --> B
C --> E[完了]
😀 Emoji
Unicode 絵文字または短縮コード： 🎉 🚀 💡 ✅ ❌
📥 付録：完全な Markdown ソースコード
以下のブロックをコピーして、ご自身の Markdown エディタでレンダリングをお試しください。
# 📚 Markdown 総合サンプル
## 1. 見出し
# H1
## H2
### H3
---
## 2. 装飾
- **太字**
- _斜体_
- `コード`
---
## 3. リスト
- りんご
- バナナ
1. 最初
2. 次
- [x] 完了
- [ ] 未完了
---
## 4. 引用
> 引用文
>
> > ネスト引用
---
## 5. コード
```python
def hello():
print("Hello Markdown")
```
---
## 6. リンクと画像
- [GitHub](https://github.com)
- 
---
## 7. テーブル
| 左 | 中央 | 右 |
| :-- | :--: | --: |
| 1 | 2 | 3 |
---
## 8. 水平線
---
---
## 9. 拡張構文
### 📌 脚注
脚注のテスト[^1]。
[^1]: 脚注の内容。
### 📐 数式
$$
E = mc^2
$$
### 📊 Mermaid
```mermaid
graph TD
A[開始] --> B[完了]
```
### 😀 Emoji
🎉 🚀 💡エディタへ貼り付けて表示を確認してください。