HTML と Markdown を相互に変換する

入力欄に HTML または Markdown を貼り付けて方向を選ぶと、結果欄に変換後のテキストが表示されます。HTML 側ではコメント、script、style、iframe、フォーム部品を内容ごと落とし、表は GitHub 形式のパイプ表、コードはフェンス付きブロックとして出力します。Markdown 側ではフェンス、パイプ表、生の HTML をそのまま扱い、隣り合う箇条書きと番号付きリストを1つにまとめません。

ブラウザ内でローカルに実行

HTML と Markdown を相互に変換する手順

HTML または Markdown を入力欄に貼り付け、［HTML → Markdown］または［Markdown → HTML］を押すと、変換結果がボタンの下の結果欄に表示されます。そのままコピーで取り出せ、クリアで入力欄と結果欄の両方が空になります。入力はテキスト欄1つ、出力もテキストで、ファイルのアップロードや一括処理はありません。変換はブラウザー内で実行され、入力したテキストは送信されません。ネットワークが切れても動作します。

出力する Markdown は GitHub 形式（パイプ表、コードフェンス、入れ子のリスト）で、逆方向の HTML はスタイルを含まない素の HTML です。変換はマークアップを書き換えるもので、レンダリング済みのページを複製するものではありません。CSS クラス、インラインスタイル、スクリプトは結果に含まれません。

ページ上部の入力欄に HTML または Markdown を貼り付けます。まず試したいときは［Markdown の例］を押すと短いサンプルが入力されます。
［HTML → Markdown］でマークアップを Markdown に、［Markdown → HTML］で逆方向に変換します。どちらも同じ入力欄を読むため、ページを再読み込みせずに往復変換できます。
ボタンの下の結果欄を確認します。ここには変換後のテキストだけが入り、コピーを押すと全体がクリップボードに入ります。
［クリア］で入力欄と結果欄を空にします。入力が空のまま変換ボタンを押した場合は、直前の結果を消さずに、ページの言語でメッセージが表示されます。
出力を確認するまで元のテキストは残しておいてください。見出しレベル、表、コードフェンス、リストは規則どおりに書き換えられ、エスケープは目視では分かりにくいことがあります。

変換・除去・エスケープされる内容

HTML から Markdown へ

見出し h1〜h6 は #〜###### になり、段落は空行で区切られます。<strong> と <b> は **、<em> と <i> は _、<del> は ~~ になり、リンクは title 属性を引用符で添えた [テキスト](href) になります。画像は title 付きの ![alt](src) になり、src のない画像は変換を止めずに代替テキストを残し、href のないリンクはテキストを残します。<br> は行末スペース2つの改行として、<hr> は * * * として出力されます。

リストは入れ子とマーカーを保ちます。箇条書きは - のまま、番号付きリストは番号と start 属性を維持し、2つの段落を持つ項目は平坦化されずに緩い項目として書かれます。<pre><code> ブロックはフェンス付きコードブロックになり、language-js、lang-js、brush: js といったクラスから言語を読み取り、コード自体にバッククォートが含まれる場合はフェンスが長くなります。インラインの <code> はバッククォート1組になります。

コメント、<script>、<style>、<head>、<title>、<meta>、<noscript>、<iframe>、<svg> と、<input>・<select>・<textarea>・<button> などのフォーム部品は内容ごと破棄されます（Markdown では意味を持たないためです）。空の <div> と <span> も消え、未知のタグや閉じられていないタグ内のテキストは残ります。壊れたマークアップでも、以前のように結果欄が空のまま例外になることはありません。

Markdown から HTML へ

逆方向では、見出し、段落、強調、リンク、画像、引用、水平線、入れ子のリストが HTML としてレンダリングされます。フェンス付きブロックは言語をクラスに持つ <pre><code> に、GitHub 形式の表は配置を反映した実際の <table> に、インラインコードは <code> になり、<div> のようなサンプルもページに消えずテキストとして見えます。

Markdown 内に書いた生の HTML はそのまま通されます（自分で書いた <div> や <script> をエスケープしたり削除したりしません）。参照リンク（[テキスト][1] と、その下の [1]: url）も解決されます。箇条書きの直後に番号付きリストが続く場合、1つのリストに統合されず2つのリストのまま残るため、番号は保持されます。

表・エスケープと実用上の制限

<table> は GitHub 形式のパイプ表になります。先頭行が見出しとして使われ（<th> から、見出し行がない表では <td> から）、列の配置は align 属性または text-align スタイルから読み取り、セル内のパイプ記号はバックスラッシュでエスケープします。セル内の <br> は <br> として書かれ、行は1行のまま保たれます。

Markdown として読まれてしまう文字は出力時にエスケープされます。* _ [ ] とバッククォートにはバックスラッシュが付き、#、-、+、数字とピリオドで始まる行はエスケープされ、< は < になります。HTML 実体参照はデコードされるため & は & として現れ、  は改行しない空白のままです。よくある用途は、HTML の断片を README やドキュメント用の Markdown に変換することと、その逆に Markdown を CMS や静的サイト向けの HTML に変換することです。処理はすべて端末内で行われるため、巨大な文書はアップロード量ではなくブラウザーのメモリで制限されます。5万文字を超えると、結果欄は構文の色分けではなくエスケープされたテキストを表示します。