Markdownプレビュー
Markdownを左に書くと、右に仕上がりをすぐ表示します。表・取り消し線・タスクリストに対応。表示前にHTMLを無害化し、外部画像は初期状態では読み込みません。
読み込み中…
使い方と仕様
左の欄にMarkdownを書くと、右(スマホでは下)に変換結果を表示します。見出し、箇条書き、番号付きリスト、引用、コードブロック、リンク、画像に加え、GitHub Flavored Markdown(GFM)の表、取り消し線、タスクリスト(- [x])に対応しています。変換には marked、HTMLの無害化には DOMPurify を使い、すべてブラウザの中で処理します。書いた内容は送信されません。
Markdownには生のHTMLを混ぜて書けるため、そのまま表示すると script やイベント属性(onerror など)が動いてしまいます。このツールは、変換したHTMLを必ず DOMPurify に通し、許可したタグと属性だけを残します。script・iframe・object・embed・form・style 属性や <style> タグ、javascript: のリンクは取り除かれ、取り除いた件数は画面に出ます。「安全確認用の例」のボタンで、危険な入力がどう扱われるか試せます。ただし、無害化は完全を保証するものではありません。信頼できない文章を、別のサイトにそのまま貼り付けて使うときは、その場所のルールでも確認してください。
リンクはすべて別のタブで開き、開いた先からこのページを操作されないよう noopener noreferrer を付けます。画像は、外部のURLを自動で読み込むと、配信元に閲覧したことやIPアドレスが伝わる(追跡に使える)ため、初期状態では読み込まず、altの文字とURLだけを表示します。「外部画像を読み込む」を入れると、画像を表示します(リファラは送りません)。
「HTMLをコピー」で取り出せるのは、無害化したあとのHTMLです。画像を読み込まない設定のときは、画像が文字に置き換わった状態になるので、画像つきでコピーしたいときは、先に「外部画像を読み込む」を入れてください。プレビューの見た目は、このサイトの配色に合わせたもので、GitHubなど他のサービスの表示とは異なります。脚注、数式、図(Mermaid)、絵文字のショートコードには対応していません。
よくある質問
- 改行しても、プレビューでは改行されません。
- Markdownの規則どおり、行末の改行1つは段落の中の空白として扱います。改行したいときは、空行を1つ入れて段落を分けるか、行末にスペースを2つ入れてください。
- 自分の書いた <script> が表示されません。
- 無害化で取り除いています。HTMLのタグのままの文字を見せたいときは、バッククォート(`)かコードブロック(```)で囲むと、文字としてそのまま表示されます。
- 画像が表示されません。
- 外部の画像は初期状態では読み込みません。「外部画像を読み込む」を入れてください。それでも出ないときは、画像の配信元が外部からの表示を禁じているか、URLが間違っています。