マークダウンを HTML に変換

.md ファイルを 2 通りの方法で HTML にできます：CMS やメールに貼り付けるためのきれいなレンダリング済みマークアップをコピーするか、テーマ、シンタックスハイライト、図、数式を組み込んだ完全な自己完結型 HTML ページをダウンロードするか。

Markdown を HTML に変換

無料・登録不要・ブラウザ内で動作、アップロードは一切なし

書き出しメニュー：.md をダウンロード、.html をダウンロード、PDF に印刷、HTML としてコピー、Markdown をコピー — Markdown、単体の HTML ページ、PDF として書き出すか、レンダリング済み HTML をコピー — Paper テーマで表示。

2 種類の HTML 出力

HTML としてコピーは、レンダリングされたフラグメントをクリップボードに入れます — ラッパーのスタイルを含まない、意味的な <h2>、<p>、<table>、<pre><code> マークアップで、ブログエディタ、ドキュメントシステム、リッチテキスト対応のメールにそのまま使えます。.html をダウンロードは単体ページを生成します：レンダリングされた文書と、今表示しているテーマの CSS、ハイライト済みコード、描画済みの Mermaid SVG、KaTeX 数式を 1 ファイルにまとめ、どこでも開けてそのまま公開できます。

コンバーターが扱うもの

変換にはプレビューと同じ GitHub Flavored Markdown レンダラーを使います：アンカー ID 付き見出し、強調、リンク、画像、番号付き・箇条書きリスト、タスクリスト、配置指定付きの表、引用と GitHub アラート、言語クラス付きフェンスコード、脚注、<details> セクション、フロントマター、絵文字ショートコード、Mermaid 図、数式。ソース内のインライン HTML はサニタイズ後に通過するので、スクリプトやイベントハンドラが出力に混入することはありません。

まずページの見た目を決める

書き出しには現在のテーマが含まれるので、ダウンロードの前に整えておきましょう：16 種類のライト／ダークテーマから選び、本文をサンセリフ・セリフ・等幅から選び、設定メニューで文字サイズとページ幅を決めます。書き出したページはそれらの選択を反映し、印刷用スタイルシートも含むので、PDF の元としても使えます。

実際の画面

言語ラベルとコピーボタン付きでシンタックスハイライトされた TypeScript、Python、Bash、diff のコードブロック — コードブロックには言語ラベル、50 以上の言語のシンタックスハイライト、コピーボタンが付きます — これは One Dark テーマです。

カラースウォッチ付きで 16 種類のライト／ダークテーマを表示するテーマピッカー — 16 種類のテーマ、それぞれ独自のシンタックスパレット付き — またはシステムのライト／ダーク設定に追従。

プレビュー内にレンダリングされた KaTeX のディスプレイ数式と Mermaid フローチャート — KaTeX の数式と Mermaid のフローチャートが文書内にそのまま描画されます。

使い方

1
Markdown を貼り付けるか .md ファイルを開き、プレビューを確認。
2
テーマとタイポグラフィを選択 — 書き出しはプレビューの表示そのままを使います。
3
「書き出し → HTML としてコピー」でフラグメント、「.html をダウンロード」で完全なページ。

できること

クリーンな意味的マークアップ

コピーしたフラグメントにインラインスタイルなし。見出しに ID、コードに言語クラス。

単体ページの書き出し

テーマ CSS、ハイライト済みコード、図、数式を含む 1 つの HTML ファイル。

GFM + 拡張

表、タスクリスト、アラート、脚注、details、フロントマター、Mermaid、KaTeX。

サニタイズ済み

インライン HTML はレンダリングや書き出しの前に DOMPurify でクリーニングされます。

ブラウザ側で処理

変換はローカルで実行。文書がアップロードされることはありません。

連続作業に便利

次のファイルをドラッグ＆ドロップで開いて再び書き出し — ページの再読み込み不要。

よくある質問

HTML に CSS は含まれますか？

「HTML としてコピー」はスタイルなしの意味的マークアップです。「.html をダウンロード」は現在のテーマの CSS を埋め込むので、どこで開いても同じ見た目になります。

複数の Markdown ファイルを変換できますか？

一度に 1 文書です：ファイルを開き、書き出し、次を開きます。ブラウザのメモリ以外にサイズ制限はなく、5 MB までのファイルは直接開けます。

出力のコードブロックはハイライトされますか？

はい。コードは highlight.js でハイライトされ、単体ページには選んだテーマの配色ルールが含まれます。

Mermaid 図と数式はどうなりますか？

描画済み SVG（Mermaid）と KaTeX HTML として書き出されるので、スクリプトを読み込まなくてもページに表示されます。

出力は有効な HTML5 ですか？

はい — viewport メタタグ、ファイル名から取ったタイトル、コンテンツを含む <article class="markdown-body"> を持つ UTF-8 の HTML5 文書です。

準備ができたらどうぞ

Markdown を貼り付ける、ファイルをドロップする、URL を開く — プレビューは即座に表示され、すべてはお使いの端末内にとどまります。

Markdown ビューアを開く