Markdown エディター
左右に並んだライブプレビューで Markdown を書けます。GitHub Flavored Markdown の表とタスクリスト、無害化された HTML 出力、.md/.html のダウンロードに対応。
marked で変換し DOMPurify で無害化しています。スクリプトやイベントハンドラーなど危険な HTML はプレビューと HTML 出力から除去されます。
関連ツール
すべて表示Markdown エディターとは?
テキストの横にライブプレビューが表示されるオンラインの Markdown エディターです。GitHub Flavored Markdown(表、タスクリスト、取り消し線、自動リンク)に対応し、生成された HTML を表示して、HTML のコピーや、文書を .md または単体の .html ファイルとしてダウンロードできます。
Markdown エディターの使い方
- エディターに Markdown を書くか貼り付けます。構文を確認するにはサンプルを読み込むを押します。
- 入力に合わせてプレビューが更新されます。表示は、左右に並べる、エディターのみ、プレビューのみ、HTML から切り替えられます。
- 必要に応じて、GitHub Flavored Markdown(表、タスクリスト、取り消し線)と単一の改行を <br> として扱うを切り替えます。
- HTML をコピーするか、.md をダウンロード/.html をダウンロードを使います。
例
# Hi **bold** and <img src=x onerror=alert(1)>
<h1>Hi</h1> <p><strong>bold</strong> and <img src="x"></p>
onerror ハンドラーは DOMPurify によって削除されます
Markdown エディターを使うべき場面
README ファイル、ドキュメント、メモ、フォーラムの投稿、Markdown で書くメールの下書きや、Markdown をきれいな HTML に変換するのに使えます。特定のプラットフォーム固有の構文(GitHub のアラート、Mermaid の図、$…$ の数式、wiki リンク)は表示されません。
Markdown エディターの仕組み
Markdown は marked ライブラリで変換されます(CommonMark 互換で、有効にすると GFM の拡張が使われます。breaks オプションは、単一の改行を <br> に変えます)。生成された HTML は、HTML プロファイルを使った DOMPurify を通り、プレビューへの表示、コピー、ダウンロードの前に、<script>、onerror などのイベントハンドラー属性、javascript: の URL、その他の危険なマークアップが取り除かれます。どちらのライブラリも、ブラウザ内で必要になったときに読み込まれます。
一般的な使用例
- ライブプレビュー付きで README.md を下書きする
- Markdown のメモを Web サイトやメール用の HTML に変換する
- GFM で表とタスクリストを書く
- Markdown の構文を教えたり学んだりする
- CMS やチャットの Markdown を投稿前にプレビューする
セキュリティ注意事項
プレビューと HTML の出力は DOMPurify で無害化されるため、信頼できない Markdown を貼り付けても、このページでスクリプトが実行されることはありません。Markdown がお使いのブラウザの外に出ることはありません。
よくある質問
Markdown 内の生の HTML は使えますか?
はい。ただし無害化されます。安全なタグは残り、スクリプト、イベントハンドラー、javascript: のリンクは削除されます。
文書は保存されますか?
いいえ。何も保存もアップロードもされません。作業内容を残すには .md ファイルをダウンロードしてください。
GitHub Flavored Markdown とは何ですか?
CommonMark に表、タスクリスト(- [x])、取り消し線(~~text~~)、自動リンクを追加した GitHub の拡張です。