Markdown プレビュー｜リアルタイム確認とよくある記法ミスの修正手順

Markdown プレビュー Web開発
結論：30秒で Markdown 崩れを防ぐ
  • プレビューツール: 下の埋め込みエディタでリアルタイム描画確認
  • 改行のコツ: 行末に半角スペース2個（ ）または空行を配置
  • 表の崩れ: パイプ区切りヘッダー行 (|---|---|) が正しく入っているか確認

1. オンライン Markdown リアルタイムエディタ

入力データは外部サーバーに送信されず、ブラウザ内で即座に HTML レンダリング表示されます。

📝 この場でMarkdownのプレビューを確認する

入力
整形結果

整形内容

  • 全角→半角: ＃→#、－→-、０-９→0-9、［］→[]、（）→() など
  • 見出し: ##ああ → ## ああ
  • リスト: -あ → - あ、1.あ → 1. あ
  • 引用: >引用 → > 引用、さらに> 引用 → さらに > 引用
  • リストインデント: 行頭の全角スペースを半角2つに（ネスト認識のため）
  • :::details: :::details とタイトルの間にスペースを追加
  • テーブル: |a|b| → | a | b |
  • 脚注: [^1]:内容 → [^1]: 内容
  • 水平線: *** / ___ → ---
  • Zenn画像: ![](url=250x) → ![](url =250x)
  • 保護（変更しない）: コードブロック、数式（$$/$...$）、\*...\*・\[...\]、リンク・画像、:::message・:::details・:::note、<details>・<!-- -->・@[card] 等
  • 文中の＃: 見出し行頭の＃のみ半角化、文中の＃は維持

対応サービス

以下のサービスで使用されるMarkdown記法に対応しています。他にも多くのサービス（GitHub、GitLab、HackMD、Obsidian など）で利用可能です。

Zenn ▼

対応記法:

  • 見出し・リスト・番号リスト・引用・テーブル・脚注・区切り線
  • 画像: ![](url =250x) 幅指定、キャプション *テキスト*
  • コード: 言語:ファイル名、diff js
  • 数式: $$ ブロック、$ インライン（KaTeX）
  • 独自: :::message / :::message alert / :::details（:::でネスト）
  • 埋め込み: @[card] @[tweet] @[youtube] @[gist] @[codepen] 他
  • mermaid・絵文字 :emoji:・HTMLコメント <!-- -->
Qiita ▼

対応記法:

  • GFM準拠 + 拡張。コード: 言語:ファイル名、diff_言語
  • :::note info / warn / alert
  • <details><summary> 折りたたみ
  • チェックボックス - [ ] - [x]、説明リスト <dl>
  • 数式: ```math または $`...`$
  • PlantUML・Mermaid・絵文字・リンクカード（URL単独行）
  • 参照リンク [text][ref]、ページ内リンク #見出し
note ▼

対応記法:

  • 見出し・引用・箇条書き・番号リスト・強調・コードブロック・取り消し・区切り線
  • 見出しは h2・h3 のみ（h1 は h2 に変換）
  • 強調: ** 推奨（__ は前後にスペース必要）
  • リスト: - と * 混在は非推奨
VSCode / GFM ▼

対応記法:

  • 見出し・リスト・番号リスト・引用・リンク・画像・テーブル・水平線
  • コード: 言語:ファイル名（例: c:main.c）
  • 斜体 *・太字 **・打ち消し ~~
Zenn Qiita note Qiita（Markdown入門）

※ Zenn・Qiita・note・HackMD・GitHub・GFM など各種Markdown記法に対応。

2. よくあるレイアウト崩れと修正手順

① 表（テーブル）がレンダリングされない

<!-- ❌ NG: ヘッダー分離行がない -->
| 名前 | 役割 |
| Alice | Admin |

<!-- ✅ OK: ハイフン分離行を入れる -->
| 名前 | 役割 |
|---|---|
| Alice | Admin |

② コードブロックのハイライトが効かない

<!-- ❌ NG: バックチックが2個または言語指定なし -->
``
console.log("error");
``

<!-- ✅ OK: 3個のバックチック＋言語識別子 (js / ts / css 等) -->
```javascript
console.log("success");

---

## 3. 注意点（ハマりどころ）

1. **プラットフォーム独自の拡張記法の差異**
   - GitHub、Zenn、Qiita、Notion など公開先によって独自ブロック（`:::message` や Footnotes など）の対応状況が異なります。標準 GFM 記法を基準に記述するのが最も安全です。
2. **HTML タグの直接埋め込み**
   - Markdown 内に `<div>` などの raw HTML を混在させる場合、空行を挟まないと内部の Markdown がエスケープされずプレーンテキストとして表示される場合があります。