Markdownエディタ

仕組み

プレビューはmarkedによってレンダリングされます。これはこのサイトに同梱された(CDNを使わない)オープンソースのMarkdownパーサーで、改行を有効にしたGitHub Flavored Markdown向けに設定されています。キーを押すたびに文書全体を再パースしますが、markedは高速な単一パスにコンパイルされるため、無駄に思えても書籍並みの長さの文書でも数ミリ秒でレンダリングされます。エディタは最大100件のスナップショットからなる独自のUndo履歴も保持しています。ツールバーのボタンがプログラム的にtextareaの値を書き換えるため、ブラウザ標準のUndoスタックを黙ってバイパスしてしまうからです。連続した入力は短い一時停止の後に1ステップへまとめられるので、Ctrl+Zはキー入力単位ではなく編集単位で戻ります。

2つのペイン間のスクロール同期は比例方式です。各ペインのスクロール位置を0から1の比率に変換し、反対側にミラーリングします。移植性に関する注意点が一つあります。改行が有効な場合、単一の改行は実際の改行として扱われ、これはGitHubがコメントをレンダリングする方法と一致します。一方、多くの静的サイトジェネレーターを含む厳格なCommonMarkレンダラーは、それらの行を1つの段落にまとめてしまいます。厳格な出力先にMarkdownを送る場合は、行末に半角スペース2つを置くか、空行を挟んで改行を維持してください。.htmlエクスポートはプレビューペインのマークアップそのものを最小限の文書で包んだものなので、見たままが実際に出力されます。

パーサーを含むすべてがページと一緒に読み込まれ、ローカルで動作します。開発者ツールを開き、入力しながら「ネットワーク」タブを観察してください。テキストを運ぶリクエストは一つもなく、エディタはオフラインでも動作し続けます。