Markdownを入力すると、ここにプレビューが表示されます。
開発者ユーティリティ
Markdown Preview
Markdown記法を入力すると、見出し、リスト、コードブロック、表、引用、リンクをHTMLとしてリアルタイムにプレビューし、変換結果をコピーできます。
リアルタイムプレビュー
Markdownを入力しながら、HTMLレンダリング結果をすぐに確認できます。
文書作成サポート
README、ブログ下書き、開発文書、リリースノートの作成に活用できます。
HTML変換・コピー
変換されたHTMLをコピーしたり、ファイルとしてダウンロードして再利用できます。
Markdown入力
左側にMarkdownを入力すると、右側でHTMLプレビューを確認できます。
Previewレンダリング
見出し、リスト、引用、コードブロック、表、リンクをHTML形式ですぐに確認します。
セキュリティフィルタリング
プレビューのレンダリング時に、危険なscriptタグやイベント属性を削除するように構成します。
Editor
Preview
待機中
Markdownの活用方法
Markdownはシンプルな記法で構造化された文書を素早く作成できるため、開発文書やブログの下書きによく使われます。
README文書
プロジェクト紹介、インストール手順、使い方、コード例をMarkdownで作成し、結果をプレビューできます。
ブログ下書き
見出し、リスト、引用、コードブロックを使って、開発ブログ記事の下書きを素早く整理できます。
HTML変換
Markdownで作成した内容をHTML形式に変換し、Webページや文書編集作業に活用できます。
Markdownを確認し、編集中のHTMLを出力する
READMEや記事の見出し・リスト・コード・表・リンクをプレビューします。よく使う記法を備えた軽量レンダラーで、CommonMarkやGitHub Markdownの完全実装ではありません。
こんな方におすすめ
- READMEを作成する方
- Markdownの下書きをHTMLに移したい方
活用場面
- 設定手順の見出しとリストを確認する。
- 段落内の改行を残すか、空白でつなぐか比較する。
入力から結果の確認まで
- 1
Markdownを入力するかサンプルを読み込みます。
- 2
自動プレビューを使うか、編集後に手動で更新します。
- 3
改行設定を選び、安全フィルターを有効にします。
- 4
HTMLコピーまたはダウンロード時には、現在の入力でプレビューが更新されます。
見出しとリスト
- 入力
- # 設定 - パッケージを導入 - 設定を確認
- 結果
- レベル1の見出しと、2項目の箇条書き
#やリスト記号の後に空白を入れます。
段落内の改行を残す
- 入力
- First line Second line
- 結果
- 改行あり：<p>First line<br>Second line</p>
改行設定をオフにすると空白でつながります。入力したHTMLタグそのものは文字として表示します。
計算・処理の仕組み
ローカルのパーサーがMarkdownを変換し、入力をHTMLエスケープしてリンクのプロトコルを確認します。追加フィルターは一部の危険な要素やイベント属性を除去します。上限はUTF-16コード単位で100,000です。HTML出力は現在の入力を使い、Markdownのコピーでは空白を保持します。
注意点と制限
- 入れ子リスト、参照リンク、脚注や一部のインライン記法は他のサービスと表示が異なります。
- 生のHTMLは実行しません。追加フィルターをオフにしても生のHTMLは有効になりません。
- 外部画像は画像サーバーにアクセスすることがあります。リンク先の信頼性は検査しません。
- ダウンロードHTMLにプレビュー画面のCSSは含まれません。
データの取り扱い
文書はブラウザのメモリ内で処理し、アップロードやlocalStorageへの保存はしません。外部画像には通信が発生する場合があります。コピーやHTMLファイルには文書が含まれます。
参考資料
あわせて使えるツール
よくある質問
GitHubと完全に同じ表示ですか？
いいえ。複雑な記法は最終的な掲載先でも確認してください。
段落の改行が消えるのはなぜですか？
改行設定によって、同じ段落の行を<br>または空白でつなぎます。空行は段落を分けます。
手動プレビューが古いと、古いHTMLがコピーされますか？
いいえ。HTMLコピーとダウンロードの前に現在の入力で更新します。空の入力や上限超過時は結果を出力しません。