Markdown を HTML に変換

Markdown は執筆とバージョン管理に適しており、HTML は Web ネイティブの文書言語です。コンテンツを CMS、静的サイト、メールの運用、プロトタイプ、HTML しか受け付けないアプリに取り込む必要があるときに、変換は非常に役立ちます。このページでは完全なレンダリング結果を表示してからダウンロードできるので、中身が分からないまま変換するのではなく、仕上がりを見てから進められます。

変換ツールはトップページと同じ GFM、数式、コードハイライト、安全性のルールを使用します。エクスポートをクリックすると、ブラウザは最終プレビューの DOM を複製し、script 要素を除去して、完全な HTML5 ドキュメントとして包み、レスポンシブ用のメタデータと簡潔で読みやすい基本スタイルを追加します。ダウンロードしたファイルは、ビルドツールなしで最新のブラウザでそのまま開けます。

.md / .txt ファイルを読み込むか、ソースを左側に貼り付けます。右側で見出しの順序、表の構造、リストの入れ子、リンク、コードの言語、数式、図を確認し、プレビューが納品要件を満たすまで修正してください。「HTML にエクスポート」をクリックすると、ブラウザが最終プレビューから markdown-viewer-document.html をローカルで作成します。

ダウンロードしたファイルをブラウザで開いて最終チェックを行いましょう。これは通常の HTML なので、コードエディターでメタデータ、構造、CSS を修正したり、main の内容をフレームワークや CMS のテンプレート、静的サイトにコピーしたりすることもできます。この変換ツールがサイトのデプロイやホスティング先の選択を代行することはありません。引き続き自分で制御し加工できる、独立した文書を提供します。

ファイルには doctype、言語宣言、UTF-8 エンコーディング、レスポンシブ viewport、タイトル、基本 CSS、そしてセマンティックな main 要素に入った最終コンテンツが含まれます。見出し、段落、強調、リスト、引用、リンク、画像、表、コード、数式、レンダリング済みのプレビュー図は、HTML または SVG として保持され、script 要素は複製したコンテンツから除去されます。

スタイルシートは移植性を目標としており、アプリ画面のあらゆる細部を再現することは目指していません。フォント、余白、コード、表、リンク、数式コンテナ、図のサイズ、基本のハイライト色をカバーします。移行先にすでにデザイン規約がある場合は、style ブロックを置き換えられます。データが埋め込まれていない外部画像は、文書を開いたときも元の URL に依存します。

Markdown レンダラーは、プレビュー前にスクリプト、iframe、object、embed、イベント属性、安全でない URL をブロックします。HTML エクスポートでは、最終的な複製から script 要素も除去します。これらの処理で明らかなリスクは下がりますが、信頼できない出所からコピーした内容は、権限のあるアプリや CMS に入れる前に、やはり目視で確認してください。

開発者がセマンティックなマークアップを求める場合、デザイナーが CSS を制御したい場合、コンテンツを Web サイトに公開する準備をしている場合には、HTML が最適です。固定の印刷レイアウトではなく、折り返しや改ページはブラウザとスタイルによって決まります。安定した印刷納品には PDF を、使い慣れたオフィスの編集フローには Word を選んでください。

エクスポートされたファイルは、開発・公開フローの出発点として使うものであり、あらゆる移行先でまったく同じ見た目になることを約束するものではありません。CMS に組み込む場合は、通常 main 要素内の本文だけをコピーし、ナビゲーション、フッター、フォント、色はサイトのテンプレートに任せます。システムが HTML を再度サニタイズする場合は、表、コードのクラス名、SVG、数式のマークアップが許可リストに入っているかを確認してください。React、Vue、静的サイトジェネレーターに組み込む場合も、フレームワークのルールに従って生の HTML を扱い、プロジェクトのコンテンツセキュリティポリシーを迂回しないようにしましょう。

HTML メールにはより厳しい制約があります。多くのクライアントは style、SVG、複雑なセレクター、外部リソースを除去するため、このツールがダウンロードする Web 用ドキュメントがそのままメールで使えることは保証できません。メールを作成するときは、専用のインラインスタイル化の工程を使い、Gmail、Outlook、モバイルでそれぞれテストしてください。画像が外部 URL を使っている場合、公開後の可用性、キャッシュ、プライバシーはそのリソースのアドレスによって決まります。ファイルをオフラインでも使えるようにしたい場合は、必要な画像を管理下でアクセス可能なリソースにするか、後続のビルド工程で埋め込んでください。

長期的な公開を考えている場合は、ページタイトル、説明、正規リンク、言語宣言、サイトナビゲーションも確認してください。このツールがダウンロード用文書に付けるのは汎用的なメタデータのみで、移行先サイトの SEO 設定の代わりにはなりません。相対リンクの基準アドレスは、ローカルファイル、テストドメイン、本番ドメインで異なることがあるため、公開前に内部リンクを 1 つずつクリックし、画像リクエストを確認することをおすすめします。数式と図はプレビュー上の結果として保持されますが、移行先の CMS が SVG を禁止したりクラス名を書き換えたりすると、見た目が変わる場合があります。その場合は、すべてのセキュリティフィルターを無効にするのではなく、移行先システムの許可ルールの範囲内でリソースを処理してください。