Markdownプレビュー
入力中のMarkdownをブラウザ内でリアルタイムに表示します。生のHTMLは実行せずにすべてエスケープします。
すべてブラウザ内で動作します。アップロード、記録、保存は一切行いません。
生成されるHTML
左にMarkdownを書くと、右で読めます。すべてブラウザ内で処理されるので、まだ誰にも見せたくない下書きを、先にサーバーに見せる必要はありません。
仕組み
文書はまず行ごとに読まれ、見出し、段落、リスト、引用、コード、表といったブロックに分けられます。次に各ブロックのテキストから、強調、コード片、リンク、画像といったインライン要素を読み取ります。レンダラーが認識しないものはすべてテキストのまま残ります。
生のHTMLは通さずにエスケープします。タグを書けば、タグがそのまま見えます。厳選したサブセットを許可する多くのレンダラーとは意図的に異なる動作です。その理由は、そのサブセットを正しく選ぶという作業が、はるかに大きなプロジェクトで何度も失敗してきたからです。
リンクが作られるのは、アドレスが短いリストにあるスキームで始まる場合だけです。このチェックは、入力された文字列ではなく、デコードしたアドレスに対して行います。拒否された場合はテキストが残り、リンクだけが外れるので、何かがあったことはわかります。
例
| ケース | 入力 | 結果 |
|---|---|---|
| 強調とインラインコード | **bold**, *italic* and `code`. | <p><strong>bold</strong>, <em>italic</em> and <code>code</code>.</p> |
よくある質問
文書はどこかに送信されますか？
いいえ。レンダラーはこのページで動くJavaScriptです。アップロード、記録、保存は一切ありません。ネットワークを切断しても、ツールは動き続けます。
なぜHTMLがテキストとして表示されるのですか？
意図的にエスケープしているからです。Markdownでは文書にHTMLを含められますが、そのHTMLを通すには、どのタグとどの属性が安全かを判断しなければなりません。この判断は微妙で、ブラウザの変化とともに変わり、はるかに多くのリソースを持つプロジェクトでも一度ならず失敗してきました。すべてをエスケープすれば、そうした失敗は起こりません。その代償として、インラインHTMLに頼る文書はGitHubと同じ見た目にはなりません。それを承知のうえでのトレードオフです。
CommonMarkに完全に準拠していますか？
いいえ。準拠していると言えば誤解を招きます。サブセットに、GitHub Flavored Markdownの表、タスクリスト、取り消し線を加えたものです。見出し、段落、強調、コード片とコードブロック、リンク、画像、入れ子のリスト、引用、水平線に対応しています。参照リンク、脚注、HTMLブロックは実装されていません。
なぜ外部の画像が表示されないのですか？
このページは他のサイトから画像を読み込まないように設定されているからです。画像を取得すると、あなたがこの文書を読んでいること、そしてその時刻が、そのサーバーに伝わってしまいます。ローカルのプレビューはまさにその漏洩を防ぐためにあります。画像タグは出力HTMLに含まれているので、貼り付けた先では機能します。ここから読み込まれないだけです。
javascript:… のようなリンクはどうなりますか？
リンクにはなりません。スキームは短いリスト（http、https、mailto、tel、ftp、または相対パスの場合はスキームなし）と照合され、そのチェックはデコード後のアドレスに対して行います。ブラウザは属性内の文字参照を解決してから処理するからです。何があったかわかるように、リンクのテキストは表示されたまま残ります。
知っておきたいこと
- プレビューに表示されるHTMLは、ツールが出力するHTMLそのものです。表示用の安全なものとコピー用の別のものがあるのではなく、出力は1つだけです。
- 見出しにはid属性を付けません。文書から作ったidはこのページのidと同じ名前空間を共有するため、衝突するとプレビューを囲むページが壊れてしまいます。
- 他サイトへのリンクには rel="nofollow noopener noreferrer" が付くので、ここから開いたページがこのページを操作することはできません。