Markdown 記法サンプル · MDViewer

このページでは MDViewer が描画できるものをひととおり示します。描画のチェックリストとして使ってください。以下のどのブロックも、記号のままではなく組版された姿で表示されるはずです。

ヒント

このファイルをローカルに保存し、トップページのリーダーで開くと、まったく同じ描画結果が得られます。

1. テキストとインライン書式

通常の段落です。太字、斜体、太字斜体、~~取り消し線~~、下線付きの挿入、ハイライト、インラインコード。

下付きと上付き：H₂O、E = mc²、42^nd 番目の項目。

インラインリンク CommonMark 仕様、自動リンク https://developer.mozilla.org/ 、サイト内リンク。

略語はホバーで正式名称が出ます：HTML と CSS はフロントエンドの基礎です。

*[HTML]: HyperText Markup Language *[CSS]: Cascading Style Sheets

絵文字：🚀 ✨ 📚 ✅ ⚠️

行末に半角スペース 2 つで強制改行：この行は上の行と同じ段落です。

Markdown のソースを表示 Markdown のソースを隠す

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


通常の段落です。**太字**、*斜体*、***太字斜体***、~~取り消し線~~、++下線付きの挿入++、==ハイライト==、`インラインコード`。

下付きと上付き：H~2~O、E = mc^2^、42^nd^ 番目の項目。

インラインリンク [CommonMark 仕様](https://commonmark.org/)、自動リンク <https://developer.mozilla.org/>、[サイト内リンク](../quick-start/)。

略語はホバーで正式名称が出ます：HTML と CSS はフロントエンドの基礎です。

*[HTML]: HyperText Markup Language
*[CSS]: Cascading Style Sheets

絵文字：:rocket: :sparkles: :books: :white_check_mark: :warning:

行末に半角スペース 2 つで強制改行：
この行は上の行と同じ段落です。

2. 見出しレベル

見出しには自動でアンカーが付き、右のアウトラインから移動できます。ホバーすると見出しの末尾に # リンクが現れます。

見出しレベル 3

見出しレベル 4

見出しレベル 5

見出しレベル 6

3. リスト

箇条書き

1 つ目
2 つ目
- ネスト 2 階層目
  - ネスト 3 階層目
3 つ目

Markdown のソースを表示 Markdown のソースを隠す

1
2
3
4
5


- 1 つ目
- 2 つ目
  - ネスト 2 階層目
    - ネスト 3 階層目
- 3 つ目

番号付きリスト

内容を用意する
Markdown で書く
1. 本文を下書きする
2. 書きながらプレビューする
公開する

Markdown のソースを表示 Markdown のソースを隠す

1
2
3
4
5


1. 内容を用意する
2. Markdown で書く
   1. 本文を下書きする
   2. 書きながらプレビューする
3. 公開する

タスクリスト

GFM のタスクリストに対応
完了項目には取り消し線
未完了の項目
ネストにも対応
- 子項目もチェックできる
- 未完了の子項目

Markdown のソースを表示 Markdown のソースを隠す

1
2
3
4
5
6


- [x] GFM のタスクリストに対応
- [x] 完了項目には取り消し線
- [ ] 未完了の項目
- [ ] ネストにも対応
  - [x] 子項目もチェックできる
  - [ ] 未完了の子項目

定義リスト

Mermaid: 図をテキストで記述する記法。フローチャートやシーケンス図などに描画されます。
Markdown: プレーンテキストで組版構造を表す軽量マークアップ言語。
KaTeX: TeX 数式をブラウザで高速に組版するライブラリ。

Markdown のソースを表示 Markdown のソースを隠す

1
2
3
4
5
6
7
8


Mermaid
: 図をテキストで記述する記法。フローチャートやシーケンス図などに描画されます。

Markdown
: プレーンテキストで組版構造を表す軽量マークアップ言語。

KaTeX
: TeX 数式をブラウザで高速に組版するライブラリ。

4. 引用と注記ブロック

通常の引用ブロックです。引用の中にインライン書式や コード、複数の段落を入れられます。

これは引用の 2 段落目です。

ネストした引用。

Markdown のソースを表示 Markdown のソースを隠す

1
2
3
4
5


> 通常の引用ブロックです。引用の中に**インライン書式**や `コード`、複数の段落を入れられます。
>
> これは引用の 2 段落目です。
>
> > ネストした引用。

GitHub 形式の注記ブロックは、アイコン付きの色分けカードとして描画されます。

補足

本筋には影響しない、補足的な一般情報。

ヒント

手間が減る提案。たとえば ? を押せばショートカットの一覧が見られます。

重要

作業の完了に欠かせない情報。飛ばすと失敗します。

警告

すぐに注意が必要な内容。無視すると悪い結果を招きかねません。

注意

リスクを伴う操作。実行前に結果を理解しているか確認してください。

Markdown のソースを表示 Markdown のソースを隠す

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


> [!NOTE]
> 本筋には影響しない、補足的な一般情報。

> [!TIP]
> 手間が減る提案。たとえば <kbd>?</kbd> を押せばショートカットの一覧が見られます。

> [!IMPORTANT]
> 作業の完了に欠かせない情報。飛ばすと失敗します。

> [!WARNING]
> すぐに注意が必要な内容。無視すると悪い結果を招きかねません。

> [!CAUTION]
> リスクを伴う操作。実行前に結果を理解しているか確認してください。

5. コード

インラインとフェンス

インストールコマンドは npm install、設定ファイルは package.json です。

1
2
3
4
5


# フォルダ内の Markdown ファイルを探す
find . -name "*.md" -not -path "./node_modules/*"

# 単語数を合計する
wc -w $(find . -name "*.md") | tail -1

多言語のハイライト

1
2
3
4
5
6
7
8


import MarkdownIt from 'markdown-it';

const md = new MarkdownIt({ html: true, linkify: true });

export function render(source) {
  const { data, content } = parseFrontMatter(source);
  return { meta: data, html: md.render(content) };
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


from dataclasses import dataclass


@dataclass
class Document:
    path: str
    words: int

    @property
    def minutes(self) -> int:
        """1 分あたり 450 文字として読了時間を見積もる。"""
        return max(1, round(self.words / 450))


docs = [Document("readme.md", 1280), Document("guide.md", 3400)]
print(sum(d.minutes for d in docs), "分")

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


package main

import (
	"fmt"
	"strings"
)

func Slugify(title string) string {
	return strings.ToLower(strings.ReplaceAll(title, " ", "-"))
}

func main() {
	fmt.Println(Slugify("Hello Markdown World"))
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


#[derive(Debug, Clone)]
pub struct Heading {
    pub level: u8,
    pub text: String,
}

impl Heading {
    pub fn anchor(&self) -> String {
        self.text.to_lowercase().replace(' ', "-")
    }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


SELECT d.path,
       COUNT(h.id) AS heading_count,
       SUM(d.words) AS total_words
FROM documents AS d
LEFT JOIN headings AS h ON h.doc_id = d.id
WHERE d.updated_at >= '2026-01-01'
GROUP BY d.path
HAVING COUNT(h.id) > 3
ORDER BY total_words DESC
LIMIT 20;

1
2
3
4
5
6
7
8


markup:
  goldmark:
    extensions:
      passthrough:
        enable: true
        delimiters:
          block: [["\\[", "\\]"], ["$$", "$$"]]
          inline: [["\\(", "\\)"], ["$", "$"]]

1
2
3
4
5


  function render(source) {
-   return marked(source);
+   const { data, content } = parseFrontMatter(source);
+   return md.render(content);
  }

コードブロックの右上にはコピー、行番号の切り替え、折り返しのボタンがあります。24 行を超えると自動的に折りたたまれます。

6. テーブル

配置の記法に対応し、見出しをクリックすると並べ替えでき、幅が広いときは横スクロールします。

機能	エンジン	サイズ	読み込み
Markdown の解析	markdown-it	505 KB	初回描画時
シンタックスハイライト	highlight.js	メインバンドルに同梱	初回描画時
数式	KaTeX	261 KB	必要時
図表	Mermaid	3.3 MB	必要時
全文検索	Fuse.js	メインバンドルに同梱	初回描画時

Markdown のソースを表示 Markdown のソースを隠す

1
2
3
4
5
6
7


| 機能 | エンジン | サイズ | 読み込み |
|:-----|:--------:|-------:|:---------|
| Markdown の解析 | markdown-it | 505 KB | 初回描画時 |
| シンタックスハイライト | highlight.js | メインバンドルに同梱 | 初回描画時 |
| 数式 | KaTeX | 261 KB | 必要時 |
| 図表 | Mermaid | 3.3 MB | 必要時 |
| 全文検索 | Fuse.js | メインバンドルに同梱 | 初回描画時 |

左寄せ / 中央揃え / 右寄せは、それぞれ :---、:---:、---: で指定します。

複雑な内容を含むテーブル

記法	書き方	結果
太字	`文字`	文字
コード	`code`	`code`
数式	$a^2+b^2$	$a^2+b^2$
リンク	`[名前](url)`	名前

Markdown のソースを表示 Markdown のソースを隠す

1
2
3
4
5
6


| 記法 | 書き方 | 結果 |
|------|--------|------|
| 太字 | `**文字**` | **文字** |
| コード | `` `code` `` | `code` |
| 数式 | `$a^2+b^2$` | $a^2+b^2$ |
| リンク | `[名前](url)` | [名前](https://example.com) |

7. 数式

インライン数式

質量とエネルギーの等価性 $E = mc^2$ もオイラーの等式 $e^{i\pi} + 1 = 0$ も、文中にそのまま書けます。$n \to \infty$ のとき、$\sum_{k=1}^{n} \frac{1}{k^2} \to \frac{\pi^2}{6}$ です。

Markdown のソースを表示 Markdown のソースを隠す

1

質量とエネルギーの等価性 $E = mc^2$ もオイラーの等式 $e^{i\pi} + 1 = 0$ も、文中にそのまま書けます。$n \to \infty$ のとき、$\sum_{k=1}^{n} \frac{1}{k^2} \to \frac{\pi^2}{6}$ です。

ブロック数式

$$ \int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi} $$

行列

$$ A = \begin{pmatrix} a_{11} & a_{12} & \cdots & a_{1n} \\ a_{21} & a_{22} & \cdots & a_{2n} \\ \vdots & \vdots & \ddots & \vdots \\ a_{m1} & a_{m2} & \cdots & a_{mn} \end{pmatrix} $$

複数行の整列

$$ \begin{aligned} \nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\ \nabla \cdot \mathbf{B} &= 0 \\ \nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\ \nabla \times \mathbf{B} &= \mu_0 \mathbf{J} + \mu_0 \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \end{aligned} $$

場合分けと積分

$$ f(x) = \begin{cases} x^2 & \text{if } x \geq 0 \\ -x^2 & \text{if } x < 0 \end{cases} \qquad \hat{f}(\xi) = \int_{-\infty}^{\infty} f(x)\, e^{-2\pi i x \xi}\, dx $$

8. 図表（Mermaid）

図表はライト / ダークのテーマに合わせて自動で配色が変わります。ホバーすると右上からソースのコピーや SVG のダウンロードができます。

フローチャート

シーケンス図

クラス図

状態遷移図

ER 図

ガントチャート

円グラフ

ユーザージャーニー

マインドマップ

Git グラフ

9. 折りたたみブロック

クリックで展開：なぜ図表エンジンを必要時に読み込むのか？

Mermaid はバンドルすると約 3.3 MB あり、このプロジェクトで最大の依存です。メインバンドルに含めてしまうと、図表が 1 つもない文書でもユーザーは先にこれをダウンロードすることになります。

そこで MDViewer は Mermaid と KaTeX を独立した ES モジュールに分け、ページに mermaid コードブロックや数式が実際に現れたときだけ動的 import() で取得します。文字だけの文書なら、初回に必要なのは約 505 KB のメインバンドルだけです。

クリックで展開：どのフロントマター形式に対応している？

3 つとも対応しています。リーダーが自動で判別し、文書タイトルの下に折りたたみカードとして表示します。

YAML：--- で囲む、もっとも一般的な形式
TOML：+++ で囲む
JSON：{ } で囲む

title、description、date、author、tags などの項目は文書のヘッダーに取り出して個別に表示します。

Markdown のソースを表示 Markdown のソースを隠す

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


<details>
<summary>クリックで展開：なぜ図表エンジンを必要時に読み込むのか？</summary>

Mermaid はバンドルすると約 3.3 MB あり、このプロジェクトで最大の依存です。メインバンドルに含めてしまうと、図表が 1 つもない文書でもユーザーは先にこれをダウンロードすることになります。

そこで MDViewer は Mermaid と KaTeX を独立した ES モジュールに分け、ページに `mermaid` コードブロックや数式が実際に現れたときだけ動的 `import()` で取得します。文字だけの文書なら、初回に必要なのは約 505 KB のメインバンドルだけです。

</details>

<details>
<summary>クリックで展開：どのフロントマター形式に対応している？</summary>

3 つとも対応しています。リーダーが自動で判別し、文書タイトルの下に折りたたみカードとして表示します。

- **YAML**：`---` で囲む、もっとも一般的な形式
- **TOML**：`+++` で囲む
- **JSON**：`{ }` で囲む

`title`、`description`、`date`、`author`、`tags` などの項目は文書のヘッダーに取り出して個別に表示します。

</details>

10. 脚注

Markdown は 2004 年に生まれ¹、プレーンテキストのまま書式付きの文章を書くための記法です。現在では多くのツールが CommonMark 仕様²に従い、その上に GitHub 独自の拡張³が重ねられています。

John Gruber と Aaron Swartz が設計しました。描画する前の状態でも自然に読めることを目指しています。 ↩︎
2014 年に公開された厳密な仕様。元の説明に残っていた曖昧さの多くを取り除きました。 ↩︎
表・タスクリスト・打ち消し線・自動リンクを追加したもので、今日ほとんどの人が前提にしている記法です。 ↩︎

Markdown のソースを表示 Markdown のソースを隠す

1
2
3
4
5


Markdown は 2004 年に生まれ[^origin]、プレーンテキストのまま書式付きの文章を書くための記法です。現在では多くのツールが CommonMark 仕様[^spec]に従い、その上に GitHub 独自の拡張[^gfm]が重ねられています。

[^origin]: John Gruber と Aaron Swartz が設計しました。描画する前の状態でも自然に読めることを目指しています。
[^spec]: 2014 年に公開された厳密な仕様。元の説明に残っていた曖昧さの多くを取り除きました。
[^gfm]: 表・タスクリスト・打ち消し線・自動リンクを追加したもので、今日ほとんどの人が前提にしている記法です。

11. 画像

画像はクリックで拡大でき、ホイールで拡大縮小、ドラッグで移動できます。タイトル付きの画像は中央揃えのキャプション付きで描画されます。

MDViewer の 3 カラム閲覧画面のイメージ — 3 カラム構成：左にファイルツリー、中央に本文、右にアウトライン

12. 生の HTML

Markdown の中に HTML をそのまま書くと、そのまま描画されます。

バッジ部品 HTML を直接記述 Ctrl + K

Markdown のソースを表示 Markdown のソースを隠す

1
2
3
4
5
6


<div style="display:flex;gap:.75rem;flex-wrap:wrap;align-items:center">
  <span class="badge">バッジ部品</span>
  <span class="badge">HTML を直接記述</span>
  <kbd>Ctrl</kbd> + <kbd>K</kbd>
  <progress value="72" max="100" style="width:8rem"></progress>
</div>

13. エスケープと特殊文字

バックスラッシュによるエスケープ：*斜体ではない*、`コードではない`、# 見出しではない。

和文と欧文の混植：「かぎ括弧」、『二重かぎ括弧』、ダッシュ——そして三点リーダー……

Markdown のソースを表示 Markdown のソースを隠す

1
2
3
4
5


バックスラッシュによるエスケープ：\*斜体ではない\*、\`コードではない\`、\# 見出しではない。

HTML 実体参照：&copy; &mdash; &hellip; &rarr; &le; &ne;

和文と欧文の混植：「かぎ括弧」、『二重かぎ括弧』、ダッシュ——そして三点リーダー……

描画チェックリスト

以下がすべて期待どおりなら、描画の経路は正常に動いています。

見出しにアンカーが付き、右のアウトラインから移動でき現在位置が示される
コードブロックに色分け、言語ラベル、コピーボタンがある
テーブルに枠線とホバーの縞模様があり、見出しのクリックで並べ替えられる
インラインとブロックの数式が、生の LaTeX ではなく数式組版として表示される
10 種類の Mermaid 図表がすべてベクター画像として表示される
注記ブロックがアイコン付きの色分けカードとして表示される
脚注が双方向に移動できる
画像をクリックすると拡大できる
ダークモードに切り替えると図表の配色も変わる

1. テキストとインライン書式#

2. 見出しレベル#

見出しレベル 3#

見出しレベル 4#

見出しレベル 5#

見出しレベル 6#

3. リスト#

箇条書き#

番号付きリスト#

タスクリスト#

定義リスト#

4. 引用と注記ブロック#

5. コード#

インラインとフェンス#

多言語のハイライト#

6. テーブル#

複雑な内容を含むテーブル#

7. 数式#

インライン数式#

ブロック数式#

行列#

複数行の整列#

場合分けと積分#

8. 図表（Mermaid）#

フローチャート#

シーケンス図#

クラス図#

状態遷移図#

ER 図#

ガントチャート#

円グラフ#

ユーザージャーニー#

マインドマップ#

Git グラフ#

9. 折りたたみブロック#

10. 脚注#

11. 画像#

12. 生の HTML#

13. エスケープと特殊文字#

描画チェックリスト#

1. テキストとインライン書式

2. 見出しレベル

見出しレベル 3

見出しレベル 4

見出しレベル 5

見出しレベル 6

3. リスト

箇条書き

番号付きリスト

タスクリスト

定義リスト

4. 引用と注記ブロック

5. コード

インラインとフェンス

多言語のハイライト

6. テーブル

複雑な内容を含むテーブル

7. 数式

インライン数式

ブロック数式

行列

複数行の整列

場合分けと積分

8. 図表（Mermaid）

フローチャート

シーケンス図

クラス図

状態遷移図

ER 図

ガントチャート

円グラフ

ユーザージャーニー

マインドマップ

Git グラフ

9. 折りたたみブロック

10. 脚注

11. 画像

12. 生の HTML

13. エスケープと特殊文字

描画チェックリスト