Markdown プレビューと HTML 変換

Markdown を書くか貼り付けると、入力に合わせてプレビューが更新されます。HTML はコピーまたはファイルで保存できます。

プレビュー

ここにプレビューが表示されます。

ブラウザ内だけで動作します。入力内容は送信・保存されません。

使い方

  1. 左の欄に Markdown を入力するか貼り付けます。
  2. 右側で表示結果を確認します。入力に合わせて更新されます。
  3. 「HTML をコピー」または「HTML をダウンロード」で変換結果を持ち出します。

Markdown は README、GitHub の Issue、Wiki、ノートアプリ、ブログなどで使われるテキスト記法です。公開前の見た目の確認や、HTML に変換して CMS やメールテンプレートに貼り付ける用途に使えます。入力を止めるとすぐにプレビューが更新されます。

markdown-it 12.3.2 で HTML の許可、改行、自動リンクを有効にし、markdown-it-emoji プラグインを加えて変換します。このため Enter 1 回で <br> になります。標準の CommonMark や多くのサイトではこれらの行が 1 段落につながるので、投稿先と結果が異なることがあります。コードブロックは highlight.js 11.4.0 の主要 34 言語で色付けし、それ以外は色なしです。

表示・コピーの前に DOMPurify 3.2.6 で無害化し、貼り付けた HTML のスクリプトやイベント属性を取り除きます。ダウンロードはスタイルなしの HTML 断片で、独自 CSS のあるページにそのまま組み込めます。変換はブラウザ内で完結し、文章はアップロードされません。ただし URL で指定した画像はそのサーバーから読み込まれます。

よくある質問

どの Markdown 記法に対応していますか?

markdown-it の CommonMark に加え、表、取り消し線(~~文字~~)、:smile: などの絵文字コード、URL の自動リンクに対応します。1 回の改行は <br> になります。

Markdown の中で HTML を使えますか?

使えます。ただし出力は DOMPurify で無害化され、<script> タグ、on… イベント属性、javascript: リンクは削除されるため、文中のコードは実行されません。

コードブロックは色分けされますか?

はい。フェンスコードブロックは highlight.js で色分けします。バッククォートの後に言語(```js)を書くか、自動判定に任せてください。

関連ツール