変換方向を選ぶ一括処理の流れ
Markdown ⇔ HTML 相互双方向コンバーターは,MarkdownからHTML,HTMLからMarkdownの二方向を切り替えて使うツールです.入力と同時に変換するのではなく,方向を選択し,最大20万文字のテキストを入力してから変換ボタンを押します.結果は右側へ表示され,コピー,入力と出力の交換,サンプルの読込,HTMLプレビューを利用できます.
「相互変換」は二つの方向を選べるという意味であり,任意の文書を情報損失なく往復できることを意味しません.MarkdownとHTMLでは表現できる情報量が異なり,このツールが扱う要素も基本的な文書構造に限られます.同じ内容をMarkdown→HTML→Markdownと戻しても,空白,改行,記号,番号などが最初の文字列と一致しない場合があります.
入力と出力の交換は,現在の結果を次の入力に移し,変換方向も反転します.往復時に何が変わるかを確かめる用途には便利ですが,元の入力を履歴として残す機能はありません.必要な原稿は交換前に別の場所へ保存してください.
MarkdownからHTMLへ変換する対応範囲
Markdown→HTMLは,独自の軽量な文字列処理でブロック要素とインライン要素を変換します.対応するブロックは,H1〜H6の見出し,段落,水平線,単層の箇条書き・番号付きリスト,引用,3個のバッククォートで囲むコードブロックです.インラインでは,コード,リンク,画像,太字,斜体を扱います.
コードブロックとインラインコードは先に退避し,中のアスタリスク,角括弧,山括弧などが後続の強調やリンク変換に巻き込まれないようにします.通常テキストはHTML用にエスケープするため,入力したscriptタグ等をそのまま実行要素へ通す変換ではありません.言語名はコード要素のclassへ使える文字に限定します.
リンクと画像のURLは,http,httpsなど許可した形式,ルート相対,ドット相対,ページ内参照を判定します.javascriptやvbscript等の危険なスキーム,制御文字,二重スラッシュで始まるプロトコル相対URLは採用しません.属性へ入れる文字もエスケープします.ただし,リンク先の内容や画像の信頼性まで確認する機能ではありません.
HTMLからMarkdownへ再構成する要素
HTML→Markdownでは,ブラウザのDOMParserで入力をDOMツリーにし,各ノードを再帰的に調べます.見出し,段落,改行,水平線,strong・b,em・i,code・pre,blockquote,a,img,ul・ol・liを対応するMarkdown記法へ置き換えます.文字ノードはその内容を使い,対応を持たない一般的な要素は,子要素の文章をたどります.
番号付きリストでは,olのstart属性から開始番号を読み,reversedがあれば減少方向を使います.各liにvalue属性がある場合はその値を優先します.これにより単純な番号変更はMarkdown側の数字へ反映できますが,CSSカウンター,type属性,複雑な入れ子の見た目を再現するものではありません.変換後は項目順と番号を目視で確認してください.
リンクと画像でもURLを再検査し,許可しない形式ならリンク記法や画像記法を作りません.script,style,template,noscript,iframe,object,embedは文章抽出の対象から外します.これは不要な実行要素をMarkdown本文へ混ぜないための限定処理であり,任意HTMLの脅威を網羅的に診断する機能ではありません.
往復変換で失われる属性・CSS・空白
HTMLのclass,id,data属性,イベント属性,インラインstyle,外部CSS,コメントはMarkdownへ保持しません.表,フォーム,動画,音声,詳細表示,SVGなど,専用のMarkdown対応を持たない構造も元のHTMLと同じ形では再現できません.
DOMParserが不完全なHTMLをブラウザ規則で補正することもあるため,タグの閉じ方や要素の親子関係が入力文字列から変わる場合があります.
Markdown側もCommonMarkやGitHub Flavored Markdownへの完全準拠ではありません.表,タスクリスト,脚注,取り消し線,複雑なネスト,自動リンクなどの拡張記法は対象外です.複数段落を含むリスト項目や,記号が連続する強調表現では,別のMarkdownパーサーと結果が異なることがあります.
このため,本ツールは文書の主要な見出し,段落,強調,リンク,リスト,コードを移す下書きとして使うのが適しています.デザイン付きHTMLの移行,CMS全体の変換,差分のないラウンドトリップが必要な場合は,対象仕様に対応した専用変換器と比較してください.
プレビューとサニタイズを分けて考える
HTMLプレビューは,変換結果の基本的な見え方を画面内で確認する補助機能です.プレビュー領域には実行範囲を狭める制限があり,サイト側のCSSも適用されます.そのため,出力コードを別のWebサイトへ貼り付けたときの見た目,リンク動作,画像読込まで同じになるとは限りません.コピーした文字列にプレビュー枠の制限が付加されるわけでもありません.
URL検査,通常文字のエスケープ,特定要素の除外は行いますが,DOMPurify等を使って任意HTMLを公開用に浄化するサニタイザーではありません.公開先が許可するタグと属性,Content Security Policy,リンク先,画像URL,アクセシビリティは別に確認する必要があります.第三者入力を変換してそのまま公開する運用には使わないでください.
プレビューで正常に見えることは,HTML仕様への適合や公開時の安全性を証明しません.実際の掲載ページで,開発者ツールや利用先の検査機能を使い,意図しないタグ,リンク,レイアウト崩れがないかを確認します.
20万文字上限と確認しやすい変換手順
入力は最大20万文字です.上限に達するとそれ以上の入力を受け付けません.変換はブラウザのメイン処理で一括実行するため,上限内でもHTMLの深さや文章量,端末性能によって処理時間が変わります.大きな文書は章やセクションに分け,短い範囲で対応要素を確認してから処理すると,欠落箇所を見つけやすくなります.
Markdownから始める場合は,まずサンプルで対応記法を確認し,原稿を貼り付けて変換します.HTMLコードとプレビューを見比べ,表や入れ子など非対応部分を手作業で補います.HTMLから始める場合は,変換後Markdownに見出し階層,リスト番号,リンク,画像の代替文字が残っているかを確認します.
コードを含む文書では,フェンスの開始・終了,インラインコードの範囲,山括弧やアンパサンドの表示を重点的に見ます.コード内容は他の強調変換から保護しますが,対応していないフェンスの組合せや閉じ忘れまで自動修復するものではありません.原稿の一部だけを先に変換し,境界が期待どおりか確かめてから全体へ広げてください.
HTMLから変換した番号付きリストは,start,reversed,各liのvalueが結果の数字へ反映されているかを確認します.画像はaltと許可されたsrc,リンクは表示文字と許可されたhrefが主な移行対象です.title,class,styleなど周辺属性を別途残す必要がある場合は,元HTMLを保管して手作業で補ってください.
変換結果に差が見つかったときは,無理に往復を繰り返さず,どちらを原本にするかを決めます.Markdownを原本とする運用ではHTMLを配信用の派生物,HTMLを原本とする運用ではMarkdownを文章抽出用の派生物として扱うと,変換のたびに失われた情報を上書きする事故を避けやすくなります.
出力コピーはブラウザのクリップボード権限に依存し,失敗時は画面にエラーを表示します.自動保存やファイル履歴はないため,入力原稿と変換結果を別々に保管してください.最終成果物は掲載先でもう一度変換・表示し,本ツールの結果だけで公開可否を判断しないことが重要です.