Markdownエディタ｜リアルタイムプレビュー
ライブプレビュー・シンタックスハイライト・HTMLエクスポート対応のMarkdownエディタ。サインアップ不要でブラウザ上でドキュメントやREADMEを作成できます。
Markdownエディタとは
Markdownエディタは、入力しながらMarkdownのライブプレビューをリアルタイムでレンダリングする無料のオンライン作成環境です。エディタとプレビューは横並びに表示されます。左側で入力すると、右側にフォーマット済みの出力がリフレッシュなしで即座に表示されます。見出しや太字テキストからフェンスコードブロック、テーブル、ブロック引用まで、あらゆる構文に対応しています。
このツールは、READMEや技術ドキュメント、ブログの下書き、リリースノートなど、Markdownを執筆フォーマットとして使用するすべての場面で活躍します。リポジトリに変更をプッシュしてプレビューレンダリングを待つ必要も、ローカルのエディタプラグインをインストールする必要もありません。ブラウザ上で正確なレンダリングプレビューをすぐに確認できます。作業が終わったら、バージョン管理用の .md ファイルか、Webページとして使用可能な完全なスタイル付き .html ファイルとしてエクスポートできます。アカウント不要、サーバーへのアップロード不要、設定不要です。
主な機能
- ライブMarkdownプレビュー —
@uiw/react-md-editorにより、ライブラリが搭載するMarkdownパーサーを使用してリアルタイムでプレビューをレンダリングします。文字の入力が止まった瞬間にプレビューへ変更が反映されます。 - シンタックスハイライト — フェンスコードブロック（
javascript、pythonなど）はプレビューペインでシンタックスカラーの出力としてレンダリングされます。エディタ自身のMarkdownビューも、見出し・リンク・太字・コードスパンを区別する構文色付けを適用します。 - HTMLへのエクスポート — 「Download HTML」を使用すると、ボディフォント・コードブロック・ブロック引用・テーブルをカバーする埋め込みCSSスタイル付きの完全な
<!DOCTYPE html>ドキュメントが生成されます。document.htmlとしてダウンロードされ、外部依存なしにどのブラウザでも正しく開きます。 - .mdファイルとしてダウンロード — 「Download MD」は生のMarkdownソースを
document.mdとして保存します。リポジトリにコミットしたり、チケットに添付したりする際にそのまま使えます。 - Markdownのコピー — GitHub、GitLab、Confluence、Notion、またはMarkdown対応の任意の入力フィールドに貼り付けるため、生のMarkdownテキストをクリップボードにコピーします。
- HTMLのコピー — プレビューペインからレンダリング済みのinner HTMLをコピーします。HTMLを受け付けるリッチテキストエディタにフォーマット済みコンテンツを貼り付ける際に便利です。
- 共通フォーマットツールバー —
@uiw/react-md-editorのツールバーは、太字・斜体・見出し・リスト・リンク・画像・コードなどのボタンを提供します。キーボードショートカットの暗記は不要です。 - クイックリファレンスパネル — エディタ下部のシンタックスチートシートは、見出し・太字・斜体・リンク・画像・インラインコード・リスト・ブロック引用・フェンスコードブロックの9つの主要なMarkdown構文を一覧表示します。
Markdownエディタの使い方
ステップ1：書き始めるか、コンテンツを読み込む
ページが読み込まれると、エディタには見出し・太字/斜体テキスト・順序なしリスト・フェンスJavaScriptコードブロック・テーブル・ブロック引用・リンクを示すサンプルドキュメントが表示されます。右側のプレビューペインにはそのサンプルのレンダリング結果が表示されます。
アクションバーの「Clear」ボタンをクリックするか、すべてを選択してそのまま入力することでエディタをクリアできます。エディタの高さは600pxに固定されており、長いドキュメント用に垂直スクロールが有効です。
ステップ2：ツールバーまたはキーボードでMarkdownを書く
エディタ上部のツールバーには、最も一般的なフォーマット操作のボタンがあります。選択したテキストを太字の ダブルアスタリスク で囲むには B をクリックし、斜体の シングルアスタリスク で囲むには I をクリックします。見出しボタンは #、##、### プレフィックスを挿入します。コードフェンスボタンは言語プレースホルダー付きのトリプルバッククォートブロックを挿入します。
シンタックスハイライト付きフェンスコードブロックは次のように書きます：
def greet(name: str) -> str: return f"Hello, {name}!"
print(greet("world"))
プレビューはこれをカラーのコードブロックとしてレンダリングします。ページ下部のクイックリファレンスパネルに9つすべての構文パターンが一覧表示されています。
ステップ3：プレビューペインでレンダリング結果を確認する
右ペインは入力しながら更新されます。エディタとは独立してスクロールし、ドキュメント全体を確認できます。data-color-mode="auto" 属性により、エディタとプレビューはOSのライト/ダークモード設定に自動的に適応します。
確認すべき点：
- テーブルが罫線と交互のヘッダースタイルでレンダリングされているか
- リンクがクリック可能か（レンダリングされたHTMLで
href属性を使用） - コードブロックに指定した言語の正しいシンタックスカラーが適用されているか
- 画像が表示されているか（公開アクセス可能な画像URLを参照している場合）
ステップ4：ドキュメントをエクスポートする
用途に合ったエクスポートを選択してください：
- Markdownをコピー — GitHub PRの説明、Jiraコメント、Notionページ、またはMarkdownフィールドに生ソースを貼り付ける
- HTMLをコピー — HTMLを受け付けるリッチテキストエディタにレンダリング済みマークアップを貼り付ける
- MD ダウンロード —
document.mdをダウンロードフォルダに保存する - HTML ダウンロード —
document.htmlを埋め込みスタイル付きで保存する（静的Webページとしてホスト可能）
エクスポートされたHTMLドキュメントには、合理的なデフォルト設定が施された <style> ブロックが含まれます：システムフォントスタック、max-width: 800px の中央揃えレイアウト、コード背景 #f4f4f4、ブロック引用の左ボーダー、罫線付き全幅テーブル。
ステップ5：履歴で以前の作業を復元する
プレミアムサポーターはエディタ下部の履歴パネルを使用して、以前に自動保存されたドキュメントを復元できます。非プレミアムユーザーは、エディタのコンテンツはセッション間で保持されないため、ページを離れる前に作業をコピーまたはダウンロードしておく必要があります。
実践的な使用例
プロジェクトのREADMEを書く
新しいCLIツールのREADMEを作成している開発者の例：
# my-cli
A command-line tool for batch file renaming.
## Installation
npm install -g my-cli
## Usage
my-cli --pattern "*.log" --prefix "archive-"
## Options
| Flag | Description | Default |
|------|-------------|---------|
| `--pattern` | Glob pattern for matching files | `*` |
| `--prefix` | String prepended to filenames | `""` |
| `--dry-run` | Preview changes without renaming | `false` |ライブプレビューには列見出し付きのテーブル、シンタックスハイライト付きbashコードブロック、見出し階層が表示されます。「Download MD」をクリックしてファイルをプロジェクトルートに直接保存します。
ドキュメントからスタイル付きHTMLページを作成する
APIエンドポイントを説明するMarkdownドキュメントを持つテクニカルライターの例。コンテンツを貼り付けてプレビューを確認した後、「Download HTML」をクリックします。生成された document.html には埋め込みCSSが含まれており、ブラウザで開いたりメールの添付ファイルとして送信したりしても正しくレンダリングされます。外部スタイルシートは不要です。
リリースの変更ログを作成する
バージョン 2.4.0 の変更ログを書いている開発者は、「Breaking Changes」「New Features」「Bug Fixes」の ## 見出しを持つドキュメント構造を作成し、それぞれの下に順序なしリストを使用します。「Copy HTML」をクリックして、リッチHTML入力に対応した社内リリース管理ツールへフォーマット済みコンテンツを直接貼り付けます。
ヒントとベストプラクティス
ツールバーは選択したテキストの周囲にフォーマットを挿入します。 単語を選択して太字ボタンをクリックすると、選択範囲が 単語 になります。何も選択されていない場合、ボタンはカーソル位置に bold text のようなプレースホルダーを挿入します。
フェンスコードブロックにシンタックスハイライトを適用するには言語識別子が必要です。 空の ` ブロックはプレーンな等幅テキストとしてレンダリングされます。カラーの出力を得るには、開きバッククォートの直後に言語名を付けてください（ `typescript 、 `sql 、 `yaml ）。
HTMLのコピーはライブプレビューのinner HTMLをキャプチャします。 handleCopyHtml 関数は document.querySelector('.w-md-editor-preview')?.innerHTML を読み取ります。プレビューがまだレンダリングされていない場合（例：ページ読み込み直後）、コピーされたHTMLが空になることがあります。「Copy HTML」をクリックする前にプレビューが表示されるまで待ってください。
ダウンロードされたHTMLは自己完結型です。 document.html ファイルには必要なスタイルがすべてインラインで含まれています。追加アセットなしにメール送信、静的ファイルサーバーへのホスト、チケットへの添付が可能です。
クリアは確認を求めません。 「Clear」をクリックするとエディタが即座に空になります。未保存の作業がある場合は、先にダウンロードまたはコピーしてください。
よくある問題とトラブルシューティング
「エディタにローディングスピナーが表示される。」 @uiw/react-md-editor コンポーネントはサーバーサイドレンダリングの問題を避けるため遅延読み込みされます。エディタバンドルの読み込み中に一時的にスピナーが表示されます。通常の接続では1〜2秒以内に消えます。
「HTMLのコピーで空の出力が生成された。」 関数はプレビューコンテナの innerHTML を読み取ります。プレビューがまだレンダリングされていない場合（非常に遅い接続ではまれに発生）、空の文字列が返されることがあります。プレビューペインをスクロールしてレンダリングをトリガーしてから再試行してください。
「テーブルがレンダリングされない。」 Markdownテーブルでは、ヘッダー行とデータ行の間にダッシュのセパレーター行が必要です：|------|------|。ヘッダー行の各セルに対応するセパレーターセルがあることを確認してください。先頭と末尾のパイプ文字（|）はオプションですが、一貫性のために推奨されます。
「フェンスコードにシンタックスハイライトがない。」 言語識別子が開きバッククォートと同じ行にスペースなしで記載されているか確認してください： `javascript で、 ` javascript ではありません。また言語名が小文字で正しくスペルされていることも確認してください（python であり Python ではない）。
「macOSでダウンロードしたMDファイルに拡張子がない。」 macOSは標準タイプとして認識しないファイルの .md 拡張子を削除することがあります。ダウンロード後にファイル名を変更して .md を付加するか、ダウンロード先を常に確認するようブラウザを設定してください。
プライバシーとセキュリティ
Markdownレンダリング、HTML変換、ファイルエクスポートはすべてブラウザ内で完結します。入力したコンテンツはGlyph Widgetsサーバーやサードパーティに送信されません。ページが一度読み込まれた後はオフラインでも動作します。社内ドキュメント、独自の技術仕様、機密プロジェクトの詳細を含む下書きにも安全に使用できます。
よくある質問
Markdownエディタは無料ですか？ はい、利用制限なしで完全無料です。登録・サブスクリプション・支払いは一切必要ありません。
オフラインで使えますか？ ページが読み込まれエディタバンドルが初期化された後は、ネットワーク接続なしにすべての作成・プレビュー・エクスポート機能が使用できます。
データは安全ですか？ 入力内容はすべてブラウザのメモリ内に留まります。コンテンツはサーバーに送信されません。機密ドキュメント、内部APIリファレンス、プライベートメモを安全に作成できます。
どのMarkdownフレーバーに対応していますか？ @uiw/react-md-editor を使用しており、remark をベースにしたCommonMark構文と、テーブル・タスクリスト・言語識別子付きフェンスコードブロックを含むGitHub Flavored Markdown拡張に対応しています。
画像を埋め込めますか？ はい、標準のMarkdown画像構文を使用できます：!alt text。画像は公開アクセス可能でなければなりません。ブラウザのコンテキストではローカルファイルパスは機能しません。画像はライブプレビューに即座に表示されます。
フェンスコードブロックで対応している言語は？ 基盤となる remark/highlight.js パイプラインがサポートするすべての言語でシンタックスハイライトがレンダリングされます。JavaScript、TypeScript、Python、Java、Go、Rust、SQL、Bash、YAML、JSONなどの主要な言語はすべて、開きフェンスに言語識別子を付けることで機能します。
ダウンロードしたHTMLファイルはインターネット接続が必要ですか？ いいえ。エクスポートされた document.html にはすべてのスタイルが <style> ブロック内にインラインで含まれています。外部CSSフレームワーク、CDNリソース、フォントは一切読み込まれません。オフライン環境でも同一の表示になります。
キーボードショートカットは使えますか？ @uiw/react-md-editor コンポーネントはプラットフォームに応じた標準テキスト編集ショートカット（Ctrl/Cmd+Bで太字、Ctrl/Cmd+Iで斜体）をサポートしています。OSによってショートカットの動作が異なる場合は、ツールバーボタンが最も確実な方法です。
タスクリストはどうやって作りますか？ 未チェックの項目には - [ ]、チェック済みの項目には - [x] を使用します：
- [x] Write first draft
- [ ] Review with team
- [ ] Publishエディタをクリアするとコンテンツはどうなりますか？ エディタは即座に空の文字列にリセットされます。事前に履歴パネル（プレミアム機能）を使用していたか、コンテンツをコピー/ダウンロードしていなければ、ツールから復元することはできません。
関連ツール
JSON Formatter — Markdownドキュメントに埋め込む前にJSONデータをフォーマットする。
Diff Checker — Markdownドキュメントの2つのバージョンを比較してドラフト間の変更を見つける。
Text Diff — ドキュメントの文章変更を監査するテキスト中心の比較ツール。
Markdownエディタを今すぐ試す: Markdown Editor