Markdownプレビュー — リアルタイム表示

どんなツールか

Markdownを入力すると、その横に変換結果をリアルタイムで表示するツールです。README、ブログの下書き、開発ドキュメント、議事録などを公開前に確認するのに便利です。見出し、リスト、引用、コードブロックに加えて、表、取り消し線、タスクリストといったGitHub Flavored Markdownの拡張にも対応しています。出力は表示の前に必ず無害化されるので、出どころのわからない文章を貼り付けてもスクリプトは実行されません。

使い方

1. 左の欄にMarkdownを入力するか貼り付けます。最初は短いサンプルが入っていて、クリアボタンで空にできます。
2. 入力が少し止まると、右のプレビューが更新されます。表の配置や入れ子のリストを目で確認してください。
3. 「HTMLをコピー」を押すと、無害化したHTMLの断片がクリップボードに入ります。HTMLモードのエディターやメールのテンプレートにそのまま使えます。
4. 「.mdを保存」で元のテキストを、「.htmlを保存」で簡単なスタイルシート付きの完全なHTML文書をダウンロードします。ファイル名は最初のレベル1見出しから付けられます。
5. あとで続きを書きたい場合は、下書き保存をオンにします。テキストはこのブラウザーにだけ保存されます。

しくみ

• パーサー：marked（MITライセンス）がGFMの仕様に沿ってテキストをHTMLに変換します。標準どおり、行末にスペース2つを付けるか空行を挟まない限り、1回の改行は改行として表示されません。
• 無害化：DOMPurify（Apache-2.0またはMPL-2.0、ここではApache-2.0で利用）が表示前にHTMLをきれいにします。script、iframe、object、form、styleの各タグ、onで始まるイベント属性、style属性、javascript:やdata:のアドレスを使ったリンクが取り除かれます。
• リンク：残ったリンクは rel="noopener noreferrer" 付きで新しいタブに開きます。
• チェックボックス：タスクリストのチェックボックスは常に無効化されていて、プレビューは読み取り専用です。
• 画像：画像のアドレスは書いたとおりに残るので、ブラウザーがそのサーバーに直接リクエストし、サーバー側からはそのリクエストが見えます。
• ファイル：.mdは入力したテキストそのもの（UTF-8）です。.htmlはlang属性と最小限のスタイルシートを含むUTF-8の文書です。

例

入力	結果
**太字**	太字
~~削除~~	削除
- [x] 完了	チェック済みのボックスと「完了」
[リンク](https://example.com)	新しいタブで開くリンク
[クリック](javascript:alert(1))	アドレスは削除され、文字だけが残る
<script>alert(1)</script>	何も実行されない

表は次のように書きます。2行目のコロンで配置が決まります。

| 品名 | 数量 |
|:---|---:|
| りんご | 3 |