Markdownオンラインプレビューツールを使えば、1つのペインでMarkdownを書きながら、もう一方でリアルタイムにレンダリングされたHTMLを確認できます — エディタのセットアップ不要、ビルドステップ不要、ブラウザ拡張機能不要。READMEの下書きやブログ記事、ドキュメントのスニペットを貼り付けて、コミットする前にレンダリング結果を正確に確認できます。
Markdownとは
MarkdownはJohn Gruberが2004年に作成した軽量マークアップ言語です。HTMLに変換されるプレーンテキスト構文を使います — **bold** は bold になり、# Heading は <h1> になります。目標は、クリーンにレンダリングされる読みやすいソーステキストです。
今日Markdownは至るところにあります:
- GitHubのREADMEとPRの説明
- ドキュメントサイト(Docusaurus、MkDocs、VitePress)
- 静的サイトジェネレーター(Astro、Hugo、Jekyll)
- メモアプリ(Obsidian、Notion、Bear)
- APIドキュメント(Swaggerの説明、Postmanコレクション)
GitHub Flavored Markdown(GFM)
最も広く使用されているMarkdown方言は**GitHub Flavored Markdown(GFM)**です。CommonMark仕様を開発者向けの機能で拡張しています:
テーブル
| メソッド | エンドポイント | 説明 |
|---------|--------------------|--------------------|
| GET | /users | ユーザー一覧を取得 |
| POST | /users | ユーザーを作成 |
| DELETE | /users/{id} | ユーザーを削除 |
カラム配置サポート(:---、:---:、---:)付きのクリーンなHTMLテーブルとしてレンダリングされます。
タスクリスト
- [x] CIパイプラインをセットアップ
- [x] ユニットテストを書く
- [ ] 統合テストを追加
- [ ] ステージングにデプロイ
GitHubのissueとPRでインタラクティブなチェックボックスとしてレンダリングされます。
シンタックスハイライト付きフェンスコードブロック
```javascript
async function fetchUser(id) {
const res = await fetch(`/api/users/${id}`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
}
```
開始フェンスの後の言語識別子(javascript、python、go、bashなど)がほとんどのレンダラーでシンタックスハイライトを起動します。
取り消し線
~~非推奨API~~ → `/v2/users` を使用してください
自動リンク
GFMはURLを自動的にリンクに変換します:https://example.com は [text](url) 構文なしでクリック可能なリンクになります。
コアMarkdown構文リファレンス
見出し
# H1 — ページタイトル
## H2 — 主要セクション
### H3 — サブセクション
#### H4 — 詳細
強調
**太字テキスト**
*イタリックテキスト*
***太字かつイタリック***
`インラインコード`
リンクと画像
[リンクテキスト](https://example.com)
[タイトル付きリンク](https://example.com "ホバータイトル")


リスト
- 順序なし項目
- 別の項目
- ネスト項目(2スペースインデント)
1. 最初の順序付き項目
2. 2番目の項目
3. 3番目の項目
引用
> これはブロック引用です。
>
> 複数の段落にまたがることができます。
>> ネストした引用
水平線
---
***
___
インラインHTML
MarkdownはHTMLをそのまま出力に通します。Markdownで表現できないものにはHTMLを混在できます:
<details>
<summary>クリックして展開</summary>
ここに隠れたコンテンツ。
</details>
一般的なMarkdownの使用例
READMEファイル
構造化されたREADMEの典型的な内容:
# プロジェクト名
何をするかの短い説明。
## インストール
```bash
npm install my-package
使用方法
import { myFn } from 'my-package';
myFn({ option: true });
API
| オプション | 型 | デフォルト | 説明 |
|---|---|---|---|
| debug | boolean | false | デバッグログを有効化 |
| timeout | number | 5000 | リクエストタイムアウト (ms) |
ライセンス
MIT
### APIドキュメント
MarkdownはOpenAPIに投資する前のRESTAPIドキュメント化に最適です:
```markdown
## POST /auth/token
JWTアクセストークンとクレデンシャルを交換します。
**リクエストボディ**
```json
{
"email": "user@example.com",
"password": "secret"
}
レスポンス 200
{
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
"expiresIn": 3600
}
レスポンス 401 — 無効なクレデンシャル。
### 変更ログ
Keep a Changelog形式はMarkdownを使います:
```markdown
## [2.1.0] — 2026-03-15
### 追加
- ダークモードサポート
- クイック検索のキーボードショートカット (Cmd+K)
### 修正
- Windowsでの行末正規化 (#234)
- WebSocketハンドラーのメモリリーク (#241)
### 非推奨
- `legacyAuth()` — 代わりに `authenticate()` を使用
Markdownの方言:何を使うべきか
| 方言 | 使用場所 | 主な追加機能 |
|---|---|---|
| CommonMark | 汎用ベースライン | 厳格な仕様、一貫性 |
| GFM | GitHub、GitLab、Gitea | テーブル、タスクリスト、自動リンク |
| MDX | React/Astroサイト | Markdown内のJSXコンポーネント |
| MultiMarkdown | 学術論文 | 脚注、引用 |
| Pandoc Markdown | ドキュメント変換 | LaTeX数式、引用 |
ほとんどの開発コンテンツにはGFMが適切な選択です。静的サイトではMDXでフルコンポーネントパワーが使えます。
Markdownプレビュー vs ローカルエディタ
| アプローチ | 速度 | 機能 | セットアップ不要 |
|---|---|---|---|
| オンラインプレビュー(ZeroTool) | 即座 | GFM + ハイライト | Yes |
| VS Code + 拡張機能 | 速い | フルエディタ | インストール必要 |
| Obsidian | フルアプリ | Wikiリンク + プラグイン | インストール必要 |
| GitHub Webエディタ | オンライン | GFMのみ | ログイン必要 |
オンラインツールは、クイックREADMEの下書き、PRの説明でMarkdownのレビュー、ドキュメントに貼り付ける前のスニペットのレンダリング確認に最速の方法です。
クリーンなMarkdownのためのヒント
一貫した見出し階層 — レベルをスキップしないこと(H1からH3に飛ばない)。スクリーンリーダーとドキュメントジェネレーターは見出しツリーに依存しています。
ブロック要素の前後に空行 — 見出し、コードブロック、リスト、引用の前後に空行を追加。一部のパーサーはなしでは正しくレンダリングしません。
インデントされたコードよりフェンスコードブロックを推奨 — リスト内にネストした場合、コードの4スペースインデントは曖昧です。言語タグ付きのフェンスブロックは明示的でシンタックスハイライトをサポートします。
繰り返しURLには参照リンク — 長いURLを何度も繰り返す代わりに、参照スタイルリンクを使います:
詳細については[MDNドキュメント][mdn]を参照してください。
[MDN][mdn]サイトにもガイドがあります。
[mdn]: https://developer.mozilla.org
改行に末尾スペースを避ける — 末尾の2スペース改行(line \n)は見えないのでエラーが起きやすいです。代わりに <br> を使うか、段落を再構成してください。
今すぐMarkdownをプレビュー
ZeroToolのMarkdownプレビューはフルシンタックスハイライトでGitHub Flavored Markdownをリアルタイムにレンダリングします。コンテンツを貼り付けて即座に結果を確認 — サインアップ不要、100%ブラウザベースです。