HTMLツール

無料 Markdownプレビューエディタ

分割画面のMarkdownエディタで、GitHub Flavored Markdownをライブプレビューできます。見出し、太字/斜体、リンク、コードブロック、テーブル、タスクリストをサポートしています。

ツールを読み込み中...

Markdownプレビューエディタとは

Markdownプレビューエディタは、左ペインがテキストエディタ、右ペインがMarkdownをリアルタイムでHTMLにレンダリングする分割画面の作成環境です。GitHub Flavored Markdown(GFM)をサポートしています。

クイックアンサー

左ペインでMarkdownを記述すると、右ペインにレンダリングされたHTMLが即座に更新されます。GFMの見出し、太字、斜体、シンタックスハイライト付きコードブロック、テーブル、タスクリスト、ブロッククオート、リンクをサポートしています。

Last updated: 2026-06-09

制限事項

  • このツールはブラウザ内でMarkdownをレンダリングするため、すべてのMarkdownエンジンと完全に一致しない場合があります。
  • 非常に大きなドキュメント(10万字以上)は、キー入力ごとにリアルタイムで再レンダリングされるため、パフォーマンスが低下する可能性があります。
  • 埋め込み画像はプレビューにインライン表示されますが、公開アクセス可能なURLが必要です。

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

使い方

  1. 左側のエディタペインにMarkdownを入力または貼り付けます。右側のプレビューペインは入力に応じて自動的に更新されます。
  2. 標準のMarkdown構文を使用します。# は見出し、**太字**、*斜体*、`code` はインラインコード、三重バッククオートはコードブロックです。
  3. パイプとダッシュを使用してテーブル(| col1 | col2 |)を作成し、- [ ] と - [x] の構文でタスクリストを作成します。
  4. プレビューペインからレンダリングされたHTMLをコピーするか、Markdownソースをコピーして他のツールで使用します。

主な用途

  • コミット前にGitHubのREADME.mdファイルを作成およびプレビューして、すべてのGFM機能が正しくレンダリングされることを確認します。
  • Markdownでドキュメントを作成し、見出し、コードブロック、テーブルが公開時にどのように表示されるかを即座に確認します。
  • Markdownで記述してレンダリングされたHTMLをコピーすることで、フォーマットされたメールコンテンツやCMSエントリを作成します。

用途

使用例

README.md作成ワークフロー

開発者が新しいオープンソースプロジェクトのREADMEを作成しています。エディタペインにMarkdownを入力すると、見出しやコードブロックがプレビューペインにリアルタイムでレンダリングされます。

ドキュメンテーションチームのコラボレーション

テクニカルライターがMarkdownを使用してAPIドキュメントを作成しています。ライブプレビューで、ネストされたリストが正しくレンダリングされることを確認します。

よくあるミス

  • Markdownブロック内でサポートされていないHTMLを使用する。GFMはインラインHTMLを許可していますが、コードブロックやリスト内でHTMLとMarkdown構文を混在させると、予期しないレンダリングが発生する可能性があります。
  • 見出しやリストの前に空行を入れ忘れる。Markdownでは多くの場合、ブロックレベルの要素の前に空行が必要です。
  • コードブロックのインデントにスペースの代わりにタブを使用する。インデントされたコードブロックには4つのスペースが必要です。

検証

  1. エディタに「# 見出し1」、「**太字**」、「*斜体*」、「`code`」を入力します。各要素がプレビューペインに正しくレンダリングされることを確認します。
  2. ヘッダー配置付きの3列テーブルと言語識別子付きのコードブロックを作成します。

FAQ

MarkdownプレビューエディタのFAQ

このエディタは配置機能付きテーブルをサポートしていますか?

はい。GFMテーブルは、区切り行のコロンを使用して、左揃え(:---)、右揃え(---:)、中央揃え(:---:)の列をサポートしています。

レンダリングされたHTMLを直接コピーできますか?

はい。プレビューペインには完全にレンダリングされたHTMLが表示されます。レンダリングされたコンテンツを選択してコピーできます。

コードブロックのシンタックスハイライトをサポートしていますか?

はい。言語識別子付きのコードブロックは、プレビューペインでシンタックスハイライト付きでレンダリングされます。

関連ツール

その他のhtmlツール

こちらもお試しください

こちらもお試しください