Markdown プレビュー
Markdown を書くと入力に合わせて表示し、HTML もコピーできます。生の HTML は文字として表示され、リンクも検査されるので、プレビュー内で何も実行されません。
コード例
自分のプロジェクトにコピーして使えます。どの例も言語の標準ライブラリだけを使うので、インストールするものはありません。
const text = '# Hello\n\nSome **bold** text <b>raw</b>'
const escaped = text.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')
const html = escaped
.split('\n\n')
.map((block) =>
block.startsWith('# ')
? `<h1>${block.slice(2)}</h1>`
: `<p>${block.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')}</p>`,
)
.join('\n')
console.log(html)できること
入力に合わせて Markdown を表示結果として見せ、HTML も出力します。CommonMark と、多くの文書で使われる GitHub の拡張（表、タスクリスト、取り消し線、自動リンク）を読み取ります。
使い方
- Markdown を入力または貼り付けるか、テキストファイルをドロップします。
- プレビューで表示結果を、HTML でマークアップを確認します。チャットのように単独の改行で新しい行にしたいときは改行をオンにします。
- HTML をコピーまたはダウンロードします。
例
# こんにちは は <h1>こんにちは</h1>、**太字**のテキスト は <strong>太字</strong>のテキスト になります。縦線とハイフンで書いた表は本物の表に、- [x] 完了 はチェック済みのボックスになります。
知っておくと便利なこと
- ソース内の生の HTML は文字として表示され、そのまま渡されることはないため、貼り付けた Markdown 内の script タグやイベントハンドラーは何もできません。
- リンクのまま残るのは、web・メール・電話のリンクと相対アドレスだけです。
javascript:のリンクは通常の文字のままです。 - プレビューでは画像を読み込みません。説明とアドレスが表示され、コピーした HTML には画像タグが含まれます。
- 上限は 100,000 文字です。
プレビューは何に対応していますか？
CommonMark と、よく使われる GitHub の拡張（表、タスクリスト、取り消し線、自動リンク）に対応します。変換はすべてブラウザ内で行われます。
よくある質問
生の HTML が文字として表示されるのはなぜですか？
Markdown 内の生の HTML はスクリプトを実行できるため、そのまま通すことはありません。script タグなどのマークアップは入力したとおりに表示されます。代わりに Markdown の記法を使ってください。コピーする HTML も同じようにエスケープされます。
画像が読み込まれないのはなぜですか？
画像は取得しないため、プレビューを使って追跡したり、他のサイトから何かを読み込んだりすることはできません。説明とアドレスが通常の文字で表示されます。コピーした HTML には画像タグが含まれます。
このツールはテキストをどこかに送信しますか？
いいえ。すべてブラウザ内で行われます。入力した内容が当社のサーバーに送信されることはありません。