Markdown プレビュー
Markdown を書きながら隣で HTML をリアルタイムにプレビュー。GitHub 形式の表、タスクリスト、取り消し線に対応し、安全化した HTML のコピーや .html ファイルのダウンロードも可能。
入力内容とファイルはブラウザ内に留まります
ここに Markdown を入力または貼り付けるか、例を読み込んでください。
入力するとレンダリングされたプレビューがここに表示されます。
このページの内容
片側に Markdown を入力すると、もう片側にレンダリング結果がリアルタイムで表示されます。README、issue のコメント、ドキュメント、リリースノートの下書きを作り、HTML として書き出すのに便利です。
詳細な機能
レンダリングには marked ライブラリと GitHub Flavored Markdown を使います：表、タスクリスト - [x]、取り消し線 ~~text~~、フェンス付きコードブロック、URL の自動リンク。GitHub のコメントと同様に単一の改行は <br> になるため、複数の行が 1 つの段落にまとめられることはありません。コードブロックは等幅フォントで表示され、シンタックスの色分けはありません。
Markdown 内の生の HTML は安全化されます：スクリプト、iframe、フォーム、スタイル、onclick などのイベント属性は削除され、javascript: リンクはブロックされます。一方で <kbd>、<details>、<sub> などの無害なタグは残ります。リンクは新しいタブで開きます。プレビューでは見出しを 1 段階下げて表示し、ページのタイトルと重ならないようにしています。HTMLをコピー と HTMLをダウンロード では元の <h1>–<h6> が保たれます。
ツールバーはカーソル位置に太字、斜体、見出し、リンク、画像、インラインコード、リストの構文を挿入し、スクロールを同期 で両方のペインを同じ相対位置に保ちます。処理はすべてブラウザー内で行われ、ツールはテキストを保存しません。ページを閉じる前にコピーしてください。
実用例
タスクリスト：- [x] tests と - [ ] docs は、チェック済みと未チェックのチェックボックスとして表示されます。
改行：line one と line two ~~old~~ の 2 行は <p>line one<br>line two <del>old</del></p> になります。
表：| A | B |、|---|---|、| 1 | 2 | の 3 行は、見出し行付きの HTML の表になります。
安全でない HTML：<script>alert(1)</script><b onclick=x>hi</b> は <b>hi</b> だけが書き出されます。
このツールの使い方
Markdown を書く
Markdown エディター に入力します。初回はサンプル文書が表示されます。空の状態から始めるには クリア を押します。
ツールバーで書式を付ける
テキストを選択し、書式ボタン（太字、斜体、見出し、リンク、画像、コード、リスト）で構文を挿入します。
プレビューを確認する
プレビュー ペインはキー入力ごとに更新されます。スクロールを同期 をオンにすると両方のペインが一緒にスクロールします。
書き出す
HTMLをコピー または Markdownをコピー を使うか、HTMLをダウンロード で基本スタイル付きの
markdown-preview.htmlを保存します。
ヒントとベストプラクティス
img/logo.pngのような相対パスの画像はここでは解決できません。画像を表示するには完全なhttps://URL を使ってください。- 他のサイトの画像は、ブラウザーがそのサーバーから直接読み込みます。
- GitHub 独自の拡張（
@mentions、:smile:のような絵文字ショートコード、Mermaid 図、数式）はプレーンテキストとして表示されます。 <kbd>Ctrl</kbd>や<details>などのインライン HTML は使えますが、styleとclass属性は削除されます。- ダウンロードしたファイルは明るいスタイルの単独ページで、そのまま印刷や添付に使えます。