左側にMarkdownを入力すると、右側にHTMLとしてレンダリングされた結果が入力と同時に表示されます。見出し、太字・斜体、リスト、テーブル、引用、フェンス付きコードブロックはすぐに描画され、テーブルや取り消し線などGitHub Flavored Markdownの拡張機能にも対応しています。

リアルタイムプレビューはどういう仕組み?

パース処理にはmarkedライブラリをGFM対応で使っており、これはこのサイトのMarkdown→HTML変換ツールと同じパーサーです。1文字入力するたびに全体を再パースしてプレビュー側を再描画するので、「変換」ボタンを押す手間や、見出しを打ってから表示されるまでのタイムラグはありません。生成されたHTMLがページに反映される前には、信頼できない入力からあやしいマークアップを取り除く専用のライブラリDOMPurifyでサニタイズ処理をかけています。Markdownでは生のHTMLをそのまま埋め込めるため、貼り付けた内容に<script>タグやonerrorハンドラが混ざっていてもプレビュー上で実行されることはありません。

入力した内容はサーバーに送られる?

送られません。パース、描画、サニタイズはすべてページに組み込まれたJavaScriptでブラウザ内で完結し、入力したテキストが手元のマシンから外に出ることはありません。未公開の下書きや、非公開情報を含むメモ、まだどこにも保存したくない文書を扱うときにも安心です。サーバーに何も送っていないので、後から消すべき履歴も残りません。タブを閉じればそれで終わりです。

どんな場面で使える?

READMEをコミットする前に見た目を確認する、GitHubやGitLabに投稿する前にコメントやIssue本文をプレビューする、Markdownを自動で描画してくれるプラットフォームに送る前にテーブルの列の整列を確認する、といった使い方が代表的です。Markdownファイルに埋め込んだ<iframe>やスタイル付きの<div>のような生のHTMLブロックが意図通りに表示されるかをさっと確認したり、ネストしたリストのインデントが公開前に崩れていないかをチェックしたりするのにも便利です。

基本構文はCommonMark仕様、テーブルや取り消し線の拡張についてはGitHubのGFM仕様、サニタイズ処理の詳細はDOMPurifyプロジェクトを参照してください。