MarkdownからHTMLへの変換ツール

Markdownを貼り付けるとHTMLに、HTMLを貼り付けるとMarkdownに変換されます。変換したい方向を選べば、入力に合わせて出力もその場で更新されます。

変換はどういう仕組みで動いている?

Markdown→HTMLにはmarkedライブラリを使っており、テーブル・取り消し線・タスクリストといったGitHub Flavored Markdownの拡張がデフォルトで有効になっています。markedが出力する生のHTMLは1行に1タグ並ぶだけの形なので、このツールはその後段で共通のHTML整形処理を通し、リストやテーブル、引用のようなネストした要素にインデントを付けています。おかげで結果はただのタグの羅列ではなく、きちんと整形されたコードとして読めます。

HTML→Markdownはturndownが担当し、見出しはATX形式（#、##）、コードブロックはフェンス形式で出力するよう設定しています。turndownは実際のブラウザDOMではなく内蔵のパーサーでHTMLを読むため、閉じられていないタグやネストの崩れなど多少壊れたマークアップでも、できる範囲で解釈して処理を続けます。実際のWebページからコピーしたHTMLは手書きのものほどきれいではないことが多いので、この寛容さは実用上ありがたい点です。

入力内容はどこかに送信される?

されません。どちら方向の変換もページに組み込まれたJavaScriptライブラリだけでブラウザ内で完結し、貼り付けた内容がサーバーに送られたり記録されたりすることはありません。未公開のREADME下書きや社内文書、実名やアカウント情報が残ったままのHTMLを変換するときにも安心です。入力が空であれば出力も空になるだけなので、作業前に特別な後片付けも要りません。

どんな場面で使える?

READMEの下書きをプレビュー用にHTML化する、Webページから貼り付けた断片をきれいなMarkdownに変換してWikiやメモアプリに取り込む、リポジトリにコミットする前にGFMテーブルの表示を確認する、といった使い方が代表的です。HTMLメールのテンプレートやCMSからの書き出しから装飾を取り除く用途にも向いていて、turndownはほとんどのインラインスタイルをシンプルなMarkdown相当の表記に落とし込んでくれます。

基本のMarkdown構文はCommonMark仕様、逆方向のHTML側はMDNのHTMLリファレンス、テーブル・取り消し線・タスクリストといった拡張についてはGitHubのGFM仕様を参照してください。