使い方
- エディターにMarkdownを入力するか、「例を試す」を押して、テーブルとタスクリストを含む文書を読み込みます。
- 入力に合わせてプレビューが更新されます。「HTMLソース」に切り替えると、生成されたマークアップを確認できます。
- 公開先に合わせて、GitHub Flavored Markdownや単一行の改行を有効または無効にします。
- HTMLをCMSやメールにコピーするか、.htmlまたは.mdファイルとしてダウンロードします。
仕組み
Markdownの変換には、広く使われているオープンソースパーサーのmarkedを使用します。CommonMark仕様に準拠し、GFMオプションを有効にすると、列の配置を指定できるパイプテーブル、タスクリスト、~~取り消し線~~、URLの自動リンクにも対応します。脚注、数式、Mermaid図はこれらの仕様には含まれないため、プレーンテキストとして表示されます。
Markdownには生のHTMLを含められます。このHTMLは、ほとんどのMarkdownレンダラーと同様、そのまま出力されます。安全性を確保するため、プレビューをこのページに直接挿入することはありません。スクリプトの実行、フォームの送信、ポップアップの表示、このサイトへのアクセスを許可しないサンドボックス化されたフレーム内で表示し、コンテンツセキュリティポリシーによってスクリプト、外部スタイルシート、フォント、フレームをブロックします。Markdown内の<script>タグやonclick属性はHTMLソースに表示されますが、実行されることはありません。プレビュー内のリンクは表示されますが開けません。リンク先に移動する場合はURLをコピーしてください。
プレビューでは、一般的なREADMEレンダラーに似た中立的なスタイルシートを使用します。同じHTMLでも、ウェブサイトやGitHubでは異なるスタイルで表示される場合があります。コピーされるHTMLはスタイルなしの断片です。.htmlファイルをダウンロードすると、プレビューと同様に表示されるよう基本的なスタイルシートが追加されます。ダウンロードまたはコピーしたHTMLはサニタイズされません。スクリプトが含まれている場合、貼り付け先や開いた場所で実行されます。
使用例
プッシュ前にREADMEを確認
README.mdを貼り付けて、ファイルをGitHubに送る前に、テーブルの列が揃っているか、タスクリストがチェックボックスとして表示されるか、コードブロックが正しくフェンスで囲まれているかを確認します。
HTMLに対応したCMS向けの記事を作成
Markdownでブログ記事を下書きし、「HTMLをコピー」を押して、<h2>、<p>、<ul>のマークアップをCMSのHTMLエディターに貼り付けます。
チャット形式の改行
チャットアプリのテキストでは、行が単一の改行で区切られています。「単一の改行を<br>として扱う」を有効にすると、行がひとつの段落に結合されず、分けて表示されます。
よくある質問
出所不明のMarkdownを貼り付けても安全ですか？
はい、プレビューであれば安全です。変換後のHTMLはスクリプトを無効にしたサンドボックス化フレーム内に表示されるため、テキスト内の<script>タグやイベントハンドラーもここでは何も実行しません。書き出したHTMLはサニタイズされないため、貼り付け先には注意してください。
画像が表示されないのはなぜですか？
プレビューからネットワークリクエストが発生しないよう、初期設定では他のウェブサイトの画像をブロックしています。「他のウェブサイトの画像を読み込む」を有効にすると表示できます。./docs/screenshot.pngのような相対パスは、ファイルがここにないため機能しません。
脚注、数式、図に対応していますか？
いいえ。CommonMarkとGitHub Flavored Markdown（テーブル、タスクリスト、取り消し線、自動リンク）に対応しています。脚注、LaTeX数式、Mermaid図は拡張機能のため、このプレビューではプレーンテキストとして表示されます。
単一の改行で改行されないのはなぜですか？
標準的なMarkdownでは、段落内の単一の改行はスペースとして扱われます。行末にスペースを2つ入力するか、空行を入れるか、「単一の改行を<br>として扱う」を有効にしてください。
プライバシー
Markdownはブラウザー上で変換され、アップロードや保存はされません。他のウェブサイトの画像を許可しない限り、プレビューがインターネットから何かを読み込むことはありません。許可した場合、画像は各ホストから直接読み込まれます。