Markdownエディタ
左側にMarkdownを入力すると右側にリアルタイムプレビューが表示されます。見出し・太字・コードブロック・リストなど主要記法に対応。
左側にMarkdownを入力してください
使い方
- Markdown を入力 — 左側のエディタ欄に Markdown 記法でテキストを入力します。
#見出し、**太字**、*斜体*、-リスト、|テーブル|など標準的な GFM 構文に対応。 - リアルタイムプレビューを確認 — 右側に HTML 変換結果が即座にプレビュー表示されます。入力と同時に見た目を確認できるため試行錯誤しながら整えられます。
- サンプルで記法を学ぶ — 「サンプル挿入」ボタンで GFM の主要記法を含むサンプル文を読み込めます。記法を忘れた時のリマインダーに。
- MD または HTML をコピー — 「MD コピー」で Markdown 原文を、「HTML コピー」で変換後の HTML をクリップボードに保存。前者は Notion / GitHub README、後者は WordPress / Confluence への貼付に。
- 文字数を確認 — エディタヘッダーの「N 文字」表示で SNS 投稿の制限 (X の 140 字) や原稿の進捗を確認しながら執筆できます。
こんな場面で使えます
- GitHub README の作成 — リポジトリのトップに表示される README.md をプレビューしながら執筆
- 技術ブログの下書き — Qiita・Zenn・はてなブログ等の Markdown 対応サービスに貼付する原稿を整備
- 議事録・社内 Wiki — Confluence・Notion・Slack の長文投稿に Markdown 形式で記録
- Slack / Discord の長文投稿 — Markdown 風の装飾を意識した投稿原稿を事前確認
- WordPress 記事の HTML 化 — Markdown で書いた原稿を HTML に変換して WordPress に貼付
よくある質問
どの Markdown 記法に対応していますか？
見出し (h1〜h6)、太字、斜体、取り消し線、リンク、画像、コードブロック、インラインコード、引用、順序付き・順序なしリスト、テーブル、水平線に対応しています。GitHub Flavored Markdown (GFM) ベースで、CommonMark 仕様も内包します。
HTML をエクスポートできますか？
はい、「HTML コピー」ボタンで Markdown から変換された HTML をクリップボードにコピーできます。WordPress・はてなブログ・Confluence・Notion などへの貼付にそのまま使えます。
テーブル記法は使えますか？
はい、パイプ | 区切りの GitHub Flavored Markdown 形式のテーブルに対応しています。「サンプル挿入」ボタンで記法例を確認できます。: でセル内テキストの左寄せ・中央・右寄せも指定可能。
コードブロックでシンタックスハイライトされますか？
プレビューでは ```言語名 ... ``` を認識して <pre><code class="language-xx"> に変換します。色付け表示は本ツール内では行わず、コピー後のレンダラ側 (highlight.js / Prism.js 等) で適用されます。
Markdown と HTML はどちらに変換しておくのが良いですか？
編集中・原稿管理は Markdown で残し、配布・公開時に HTML に変換するのが運用しやすい組み合わせです。Markdown は仕様が簡素で誰でも編集でき、Git による差分管理にも向きます。配布時にだけ HTML 化することで、媒体ごとの最適化を後追いで適用できます。
画像はどう挿入しますか？
 の記法で挿入します。画像ファイル自体はホスティング先 (GitHub・S3・WordPress media library 等) にアップロードし、その URL を Markdown 側に書く形が標準。本ツールは画像のアップロード機能は持ちません。
数式 (LaTeX / KaTeX) は対応していますか？
本ツールは GFM の標準記法のみで、$ ... $ や $$ ... $$ の数式記法は対応していません。数式が必要な場合は MkDocs Material・Obsidian・Notion など KaTeX/MathJax を組み込んだエディタが必要です。
プレビューと最終表示で見た目が違うのはなぜ？
プレビューは Markdown → HTML 変換のみで、最終的な見た目は配布先 (Qiita / Zenn / 自社サイト) の CSS に依存します。たとえば見出しサイズ・コード背景色・リンク色は媒体ごとに異なるため、本ツールでは構造の確認、媒体側でデザインの確認、の 2 段階で進めるのが堅実です。
テキスト処理ツールの全体像
本ツール (Markdown エディタ) は テキスト処理ガイド (sub-Pillar) の一部です。文字数カウント・テキスト差分との使い分け、Markdown vs Plain text の選び方、業務での diff 活用シーンを Pillar ガイドで体系的に確認できます。
関連ガイド: Markdown 記法 早見表 / Top Pillar (12 ツール早見表)