Markdown と HTML を相互変換する
このコンバーターの役割
Markdown はプレーンテキストで書く記法で、HTML はブラウザーが実際に表示するマークアップです。このツールは両者を双方向で変換します。Markdown を貼り付ければスタイルを埋め込んだ HTML が得られ、HTML を貼り付ければタグをたどって整った Markdown に戻します。処理はすべて組み込みのパーサーが担うため、ビルド工程を組んだりライブラリを入れたりせずに、README や記事の下書き、ドキュメントの断片をそのまま変換できます。
使いどころ
Markdown で書いたメモを、HTML しか受け付けない場所 — CMS の入力欄、メールのテンプレート、ページの一区画 — に載せたいけれど、タグを手書きしたくない、というときに役立ちます。逆方向は、引き継いだ HTML を Markdown として編集し続けたい場合に便利です。4 つのテーマ(GitHub、Minimal、Classic、Modern)で仕上がりのイメージをおおまかに確認し、コピーする前に雰囲気を選べます。ライブプレビューとコード表示は出力ヘッダーでワンクリックで切り替えられるので、見た目と実際のマークアップの両方を確かめられます。この作業には、たいてい 2 つの雑務が付いてきます。見出しの大文字小文字をそろえたいときはテキストケース変換を通し、引き継いだマークアップから決まったパターンを取り除きたいときは、正規表現テスターでパターンを試してから当てると片づけが一気に早くなります。
具体例
`# リリースノート` と入力すると `<h1>` 見出しが生成されます。アスタリスク 2 つで囲んだ `**公開**` は `<strong>公開</strong>` になり、バッククォート 3 つで開いたブロックは `<pre><code>` の組に変わって、言語名がクラスとして記録されます。リスト、`[表示名](url)` の形で書いたリンク、画像、引用、`---` の水平線も、それぞれ対応する HTML に対応づけられます。逆向きに変換すれば `<h1>` は `#` に、`<strong>` は `**` に戻り、構造は往復しても保たれます。
注意点と例外
パーサーが対応するのは、手で書く日常的な Markdown — 見出し、強調、インラインコードとコードブロック、リンク、画像、リスト、引用、水平線 — であって、あらゆる拡張ではありません。Markdown のテーブルは解釈されず、縦棒で書いた表はそのまま文字列として残るため、表が必要なら HTML で直接書いてください。スタイルは別のスタイルシートではなく、各要素へのインライン `style` 属性として付与されます。だからこそ、`<style>` ブロックを取り除くメールや CMS の入力欄に貼っても見た目が保たれます。さらに、各テーマはページに合わせてライトとダークの両方を自動で用意します。