プレビュー
Markdownをプレビューして安全なHTMLを取り出す方法
Markdown Preview は入力するその場で結果を描画し、そのプレビューの裏側にある HTML をそのまま渡します。描画は表を含む CommonMark に従い、原文に混ざった生の HTML は通さず、出力は許可一覧で濾してから表示されます。だから複製した HTML は目で見た安全なマークアップと同じです。アップロードはなく、文書はブラウザーのタブ内だけに存在します。
4ステップでMarkdownを見てHTMLを持ち出す
- Markdownを書くか貼る編集枠に入力するか、例を読み込むを押して見出し・強調・箇条書き・行内コード・リンク・引用を一通り使う短い文書を確かめます。
- プレビューの更新を見る描画された文書が編集枠の隣に現れ、入力に応じて更新されます。画面が狭い場合は両方を詰め込む代わりに、編集とプレビューのタブで切り替えます。
- リンクと表の出方を点検するパイプ記法の表に対応します。リンクは http・https・mailto の宛先だけが残り、参照元を渡さない新しいタブで開くため、貼り付けた javascript: の URL は描画されず捨てられます。
- 濾したHTMLを複製する濾した HTML を複製を押すと、プレビュー本文のマークアップがクリップボードに入ります。プレビューの表示と1バイトも違わないので、CMS の入力欄やメールの雛形、静的ページにそのまま貼れます。
Markdown Preview の使いどころ
- コミット前にREADMEを確かめるpush した後で崩れた箇条書きに気付く代わりに、見出し・入れ子の一覧・表が意図どおり描かれるか先に確認します。
- メモをCMS用のHTMLにする本文は Markdown で書き、Markdown を受け付けない入力欄には濾した HTML を複製して入れます。
- 送られてきたMarkdownを読む生の Markdown ファイルを編集枠に貼れば、閲覧ソフトを入れたり変換サイトに本文を預けたりせずに、体裁の付いた文書として読めます。
Markdown Preview のよくある質問
- プレビューのために文書は送信されますか？
- いいえ。解析・濾過・描画はすべてブラウザーのタブ内で起きるので本文は端末に留まり、ページを閉じた後に保存されるものもありません。
- どのMarkdown方式に従いますか？
- パイプ記法の表を有効にした CommonMark です。見出し、強調、箇条書き、引用、コードブロック、行内コード、リンク、表が描画されます。
- 行内のHTMLが無視されたのはなぜですか？
- 原文の生の HTML は意図的に描画せず、出力もタグと属性の許可一覧で濾しています。これが複製した HTML を別のシステムへ安全に貼れる理由です。
- 複製したHTMLはプレビューと同じですか？
- はい。複製はプレビュー本文そのものの濾したマークアップを返すので、他所に貼る内容は今読んだものと一致します。
- 裸のURLがリンクにならないのはなぜですか？
- 自動リンク検出が切られているため、リンクは山括弧や角括弧を使う Markdown の記法で書いてください。残るのは http・https・mailto の宛先だけです。
- PDFやHTMLファイルとして書き出せますか？
- できません。成果物はクリップボードに入る濾した HTML です。自分で保存するか、紙が必要ならブラウザーからページを印刷してください。