Markdown HTML 変換ツール
Markdown をブラウザ内で HTML に変換 — GitHub Flavored Markdown 完全対応、ライブプレビュー、シンタックスハイライト。HTML フラグメント・完全なドキュメント・メール向けインラインスタイル HTML として出力。完全プライベートでアップロード不要。
カスタム CSS
Markdown から HTML への変換とは？
Markdown から HTML への変換は、Markdown で書かれたプレーンテキストのドキュメント — 見出しの `#`、`**bold**`、リストの `- `、リンクの `[text](url)` — を、ブラウザ・コンテンツ管理システム・メールクライアントが実際に表示する HTML に変えるものです。Markdown はそのままでも読みやすく書きやすいように設計されていますが、ブラウザは `# Heading` を理解しません。ブラウザが理解するのは <h1>Heading</h1> です。変換がそのギャップを埋めます。
内部では、Markdown プロセッサがまずソースを抽象構文木（AST）に解析します — 見出し、段落、リスト、コードブロックが、それぞれの内容と属性を持つ独立したノードとして表現された構造です。次にその木を HTML にシリアライズし、正しいタグとネストを出力します。正規表現でテキストを置換するのではなく AST を通して処理することが、ネストしたリスト、テーブル、埋め込み HTML を正しく予測可能に扱える理由です。認知されている 2 つの文法は、厳密な標準である CommonMark と、それをテーブル・タスクリスト・打ち消し線・自動リンクで拡張した GitHub Flavored Markdown（GFM）です。
そもそも変換する理由は、ほぼすべての公開先が Markdown ではなく HTML を求めるからです。静的サイトジェネレーター、CMS のリッチテキストフィールド、メールテンプレート、ブラウザのタブはすべて HTML を描画します。そこで典型的なワークフローは、書きやすい Markdown で書き — README、ドキュメント、ブログ下書き、メモ — 公開の時点で HTML に変換することです。このツールはその変換をローカルで行い、ライブプレビューを表示するので、描画結果を確認し、必要な形 — フラグメント、完全なページ、メール向けインラインスタイル — でぴったりの HTML をコピーできます。
逆の操作 — HTML から Markdown へ — は、既存の Web コンテンツを Markdown ベースのシステムに移行するときに同じく役立ちます。それには HTML → Markdown タブに切り替えるか、専用の HTML Markdown 変換ツールを開いてください。
Markdown in:
# Release Notes
We shipped **tables** and `code`:
| Feature | Status |
| ------- | ------ |
| GFM | Done |
- [x] Parse to an AST
- [ ] Profit
HTML out:
<h1>Release Notes</h1>
<p>We shipped <strong>tables</strong> and <code>code</code>:</p>
<table>
<thead><tr><th>Feature</th><th>Status</th></tr></thead>
<tbody><tr><td>GFM</td><td>Done</td></tr></tbody>
</table>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" checked disabled> Parse to an AST</li>
<li class="task-list-item"><input type="checkbox" disabled> Profit</li>
</ul> 主な機能
ライブの分割ペインプレビュー
左で Markdown を入力すると、右でリアルタイムに描画され、その下で HTML 出力が組み上がっていきます。プレビューはサンドボックス化された iframe で描画されるので、見たものがブラウザに表示されるものであり — 貼り付けたスクリプトは実行されません。
GitHub Flavored Markdown 完全対応
単なる CommonMark ではなく GFM スーパーセット全体：パイプテーブル、タスクリスト（`- [x]`）、打ち消し線（`~~`）、自動リンク化される URL、フェンス付きコードブロック。GitHub 向けに書かれた README や Issue は、ここでも GitHub と同じように描画されます。
シンタックスハイライト
フェンス付きコードブロックに言語を付けると（```js、```python、```sql）変換ツールがハイライトし、<code> 要素に language クラスを付けてトークンを span で包みます。色を出すにはページ側にハイライト用スタイルシートを組み合わせてください。
3 つの出力形式
HTML フラグメント（テンプレートや CMS 向けの本文マークアップ）、完全なドキュメント（.html として保存できる独立した ページ）、または Outlook をはじめとするクライアントが正しく描画できるようスタイルを各要素に移したメール向けインライン HTML を出力します。
カスタム CSS パネル
サイトのタイポグラフィに合わせたり GitHub の README スタイルを模したりするため、ライブプレビューに独自の CSS を注入できます。h1 { color: #0969da; } のようなルールを入力するとプレビューが即座に更新され、コピーするきれいな HTML には触れません。
GFM 構文チートシート
HTML を生む構文のクイックリファレンス：`# H1` → 見出し、`**bold**` → <strong>、`*italic*` → <em>、`- item` → リスト、`1. item` → 順序付きリスト、`[text](url)` → リンク、`` `code` `` → インラインコード、` ```lang ` → フェンス付きコード、`> quote` → 引用、`| a | b |` → テーブル、`- [ ]` → タスクリスト、`~~text~~` → 打ち消し線。
完全プライベート、ブラウザ内処理
すべての変換は JavaScript でローカルに実行されます — あなたの Markdown と HTML は端末を離れず、サーバーに届かず、ページ読み込み後はオフラインでも動作します。未公開のドキュメント、社内 README、エンバーゴ中のリリースノートに安全です。
使用例
GFM テーブルを HTML の <table> へ
| Tool | Speed | | ---- | ----- | | GFM | Fast |
<table> <thead><tr><th>Tool</th><th>Speed</th></tr></thead> <tbody><tr><td>GFM</td><td>Fast</td></tr></tbody> </table>
GitHub Flavored Markdown のパイプテーブルは素の CommonMark には含まれませんが、この変換ツールはそれを理解し、<thead> と <tbody> を備えた適切なセマンティックな <table> を出力します — スタイルを当てたり CMS に貼り付けたりする準備が整った状態です。
タスクリストをチェックボックス HTML へ
- [x] Write the README - [ ] Convert it to HTML
<ul class="contains-task-list"> <li class="task-list-item"><input type="checkbox" checked disabled> Write the README</li> <li class="task-list-item"><input type="checkbox" disabled> Convert it to HTML</li> </ul>
GFM のタスクリスト構文 `- [x]` / `- [ ]` は、GitHub がチェックリストを描画するのと同じように、本物の無効化されたチェックボックス入力になります — コピーした README が自分のページでも同じように見えます。
フェンス付きコードブロックをハイライト済み <pre><code> へ
```js const html = md.render(src) ```
<pre><code class="language-js"><span class="hljs-keyword">const</span> html = md.render(src) </code></pre>
開きフェンスの後に言語を付けると、変換ツールはシンタックスハイライトを適用し、<code> 要素に language-js クラスを付けてトークンを span で包みます。ハイライト用スタイルシートと組み合わせれば、コードに色が付きます。
README を完全な HTML ドキュメントへ
# My Project A short description and a [link](https://example.com).
<!doctype html> <html lang="en"> <head><meta charset="utf-8"><title>My Project</title></head> <body> <h1>My Project</h1> <p>A short description and a <a href="https://example.com">link</a>.</p> </body> </html>
出力を「完全なドキュメント」に切り替えると、変換ツールは描画した HTML を <head> と charset を備えた完全な ページで包みます — どのブラウザでも開ける、あるいは直接ダウンロードできる独立した .html ファイルです。
Markdown を HTML に変換する方法
- 1
Markdown を入力または貼り付け
Markdown — README、リリースノート、Issue 本文 — を入力ペインに入れます。GitHub Flavored Markdown 全体に対応：テーブル、タスクリスト、打ち消し線、自動リンク、フェンス付きコードブロック。ライブプレビューと HTML 出力は入力するそばから、すべてブラウザ内で更新されます。
- 2
出力形式を選ぶ
テンプレートや CMS に貼り付けるなら HTML フラグメント、独立した .html ページなら完全なドキュメント、Outlook でも崩れないインラインスタイル HTML ならメール向けインラインを選びます。シンタックスハイライトにはコードフェンスに言語タグを付け、プレビューのスタイルにはカスタム CSS パネルを使ってください。
- 3
コピーまたはダウンロード
コピーをクリックして HTML を取得、またはダウンロードでファイルとして保存します。変換を逆にするには、HTML → Markdown タブに切り替えて HTML を貼り付け、きれいな Markdown を取り戻してください。
よくある落とし穴
本文中で飲み込まれるエスケープされていない HTML
Markdown は生の HTML を素通しするので、テキストのつもりの山かっこ — <Component> や汎用の List<T> について書くなど — は HTML タグとして解析され、出力から消えます。かっこをバックスラッシュか HTML エンティティでエスケープするか、テキストをコードスパンで包んでリテラルに描画してください。
Use the <Header> component to wrap pages. <!-- <Header> is parsed as a tag and vanishes -->
Use the `<Header>` component to wrap pages. <!-- backticks keep it literal: renders <Header> -->
ずれた、または不正なテーブルのパイプ
GFM テーブルにはヘッダー行、ダッシュの区切り行、各行に少なくとも 1 つのパイプが必要です。区切り行を忘れたり、ヘッダーと列数が違ったりするとテーブルが壊れ — パイプの並んだただの段落にフォールバックします。セルは見た目に揃っている必要はありませんが、すべての行が同じ列数でなければなりません。
| Name | Role | | Alice | Admin | <!-- no |---|---| delimiter row: not a table -->
| Name | Role | | ---- | ---- | | Alice | Admin | <!-- delimiter row present: renders a table -->
言語のないコードフェンス
言語インフォ文字列のないフェンス付きコードブロックは、language クラスのない <pre><code> ブロックとして描画されるので、シンタックスハイライトが付きません。コードは表示されますが、単色のままです。ハイライトを有効にするには開きバッククォートの直後に言語を付けてください。バッククォートと名前の間にスペースがあると無効になります。
``` const x = 1 ``` <!-- no language → no highlighting -->
```js const x = 1 ``` <!-- language-js → highlighted -->
完全なドキュメントが必要な場面でフラグメントを使う
HTML フラグメント出力をコピーして直接 .html ファイルとして保存すると、doctype も charset も <html>/<head>/<body> もないページになります。ブラウザはそれでもしばしば描画しますが、互換モードや charset の欠落でアクセント文字やレイアウトが壊れることがあります。HTML を単独で成立させる必要があるときは、完全なドキュメント形式に切り替えてください。
<h1>Title</h1> <p>Saved as page.html — no doctype, no charset.</p>
<!doctype html> <html lang="en"><head><meta charset="utf-8"><title>Title</title></head> <body><h1>Title</h1><p>Complete, standalone page.</p></body></html>
一般的なユースケース
- 静的サイトや CMS に公開する
- コンテンツを Markdown で書き、HTML フラグメントに変換して、静的サイトのテンプレートや CMS のリッチテキストフィールドに貼り付けます。ページラッパーに邪魔されずに、きれいなセマンティックマークアップ — 見出し、リスト、テーブル — が得られます。
- プッシュ前に README をプレビューする
- README.md を貼り付け、ライブプレビューが完全な GFM — テーブル、タスクリスト、フェンス付きコード — で描画するのを見ます。崩れたテーブルや抜けたコードフェンスを、コミット後ではなく GitHub が世界に見せる前に捕まえられます。
- メモを共有可能な Web ページに変える
- Markdown で書いた議事録、設計ドキュメント、下書きが、ワンクリックで完全な HTML ページになります。完全なドキュメントを選び、.html ファイルをダウンロードすれば、どのブラウザでも開けて、どこにでもホストできるものが手に入ります。
- メール向けインラインスタイル HTML を作る
- メールクライアントは <style> ブロックを除去するので、メッセージを Markdown で書いてメール向けインライン形式で出力します。これは CSS を各要素の style 属性に移します。結果は Outlook やドキュメントレベルのスタイルを無視するクライアントでも正しく描画されます。
- .md ファイルをダウンロード可能な .html に変換する
- Markdown ドキュメントのオフラインで自己完結した HTML 版が必要ですか？貼り付けて、完全なドキュメントを選び、ダウンロードします — 適切な doctype と charset を備えた独立した .html ファイルが、ビルドツールもコマンドラインもなしで得られます。
- 描画されたドキュメントをアプリに埋め込む
- リポジトリに保存した Markdown からドキュメント、変更履歴、ヘルプコンテンツを生成していますか？このツールで、ある Markdown ソースがどんな HTML を生むかを正確に確認し、アプリのレンダラーに合わせて出力にスタイルを当てられます。
技術的な詳細
- CommonMark と GitHub Flavored Markdown
- CommonMark は、見出し、強調、リスト、リンク、コードブロックが正確にどう解析されるかを定義する、厳密で曖昧さのない Markdown 仕様です。GitHub Flavored Markdown（GFM）は厳密なスーパーセットで、CommonMark が定義するものすべてを保ったまま 4 つの拡張 — パイプテーブル、タスクリスト項目（`- [x]`）、打ち消し線（`~~text~~`）、自動リンク化される素の URL — を追加します。GFM は機能を追加するだけなので、有効な CommonMark ドキュメントはすべて有効な GFM でもあります。この変換ツールは GFM スーパーセットを実装しているので、どちらの文法で書かれたドキュメントも正しく描画されます。
- XSS 安全なサンドボックス描画
- Markdown は意図的に生の HTML の埋め込みを許可しており、Markdown ドキュメントには <script> タグや onerror のようなイベントハンドラが含まれ得ます。ライブプレビューは、スクリプトを無効にした <iframe sandbox=""> 内で描画することでこれを防ぎ、プレビュー中に入力中の能動的なコンテンツが実行できないようにします — 信頼できないソースからの Markdown を変換するときに重要です。ツールが出力するシリアライズ済み HTML は入力を忠実に描画したものです。信頼できない Markdown から得た HTML を公開する予定なら、配信前にサーバー側で DOMPurify のようなサニタイザーに通してください。
- メール HTML の互換性
- HTML メールは、CSS サポートが悪名高いほど限られた寄せ集めのエンジンで描画されます。Windows 版 Outlook は Word の描画エンジンを使い、ドキュメント head 内の <style> ブロックを無視するので、クラスベースのスタイルは何も言わずに消えます。信頼できる方法は各要素のインライン style 属性で、それがメール向けインライン出力が生むものです。画像も落とし穴です：多くのクライアントは受信者が許可するまでリモート画像をブロックするので、小さな画像をデータURI として埋め込むとすぐに描画されますが、大きなリモート画像は表示されないことがあります。マークアップはシンプルに保ち、対象クライアントでテストしてください。
- ブラウザ内での同期ハイライト
- フェンス付きコードブロックが言語インフォ文字列（```js）を持つとき、変換ツールはその内容に対して同期的なハイライターを実行し、ソースをトークン化して各トークンを hljs-keyword や hljs-string のようなクラスを持つ <span> で包み、さらに <code> 要素に language-js クラスを付けます。ハイライトは構造的なものだけ — クラスを追加するのであって色を付けるのではない — なので、配信先ページに対応するハイライト用スタイルシートが必要です。ブラウザ内で同期的に実行されるため、ハイライト済み HTML は入力した瞬間にネットワーク呼び出しなしで現れます。
ベストプラクティス
- 配信先に合わせて出力形式を選ぶ
- HTML の行き先に合わせて形式を選びます。CMS フィールドやテンプレートはすでにページラッパーを持つので、HTML フラグメントを貼り付けます。ブラウザで直接開きたいファイルには doctype と charset を備えた完全なドキュメントが必要です。メールには <style> ブロックを除去するクライアントでもスタイルが生き残るようメール向けインラインが必要です。間違った形を貼り付けるのは最も避けやすいミスです。
- コードフェンスには常に言語を付ける
- 言語は開きバッククォートの直後に書いてください — ```js、```python、```sql — 空白を入れずに。そうすれば変換ツールがブロックをハイライトし、正しい language クラスを付けられます。素のフェンスはスタイルもハイライトもないコードになります。ハイライターが認知する言語を使ってください。不明またはスペルミスの名前はプレーンテキストにフォールバックします。
- 信頼できない Markdown を公開する前にサニタイズする
- プレビューはサンドボックス化されていますが、ツールが出力する HTML は忠実な描画 — 入力中の生の HTML や <script> も含む — です。その Markdown がユーザーや他の信頼できないソース由来で、結果を他の人に配信するつもりなら、まずサーバー側で DOMPurify のようなサニタイザーに HTML を通してください。サンドボックスは変換中のあなたを守るのであって、公開後の訪問者を守るのではありません。
- メール HTML はシンプルかつインラインに保つ
- メールにはメール向けインライン形式を優先し、レイアウトはシンプルに保ち、Outlook やその他のクライアントが落とす CSS 機能は避けてください。リモート画像がブロックされても描画されるよう小さな画像はデータURI としてインライン化し、本格的な送信前には必ず自分宛にテストを送ってください — メールの描画は HTML が抱える最も寛容でない対象です。
- テキスト中のリテラル HTML 文字をエスケープする
- リテラルの < や & をタグやエンティティと解釈されずにテキストとして表示したいなら、バックスラッシュ（\<）か HTML エンティティ（<）でエスケープしてください。Markdown は生の HTML を素通しするので、本文中のエスケープされていない <example> は不明なタグとして飲み込まれ、描画結果から消えてしまいます。
よくある質問
GitHub Flavored Markdown（GFM）に対応していますか？
メール向けのインラインスタイル HTML はどう得られますか？
HTML フラグメントと完全なドキュメントの違いは何ですか？
描画された HTML はプレビューしても XSS 安全ですか？
プレビューに独自の CSS を追加できますか？
ファイルやテキストはサーバーにアップロードされますか？
オフラインで動作しますか？
Markdown（.md）ファイルを HTML ファイルに変換するには？
コードブロックがハイライトされないのはなぜですか？
HTML を Markdown に戻せますか？
関連ツール
すべてのツールを見る →Base64エンコーダー＆デコーダー
エンコーディングとフォーマット
Base64のデコード・エンコードが無料でオンラインで行えます。リアルタイム変換、UTF-8・絵文字対応。100%ブラウザ上で動作しデータは外部に送信されません。登録不要。
Base64 画像変換ツール
エンコーディングとフォーマット
Base64 文字列やデータURIをブラウザ上で画像に戻します。プレビューし、寸法と MIME を確認して、PNG・JPG・GIF・SVG としてダウンロード。アップロード不要。
CSV to JSON 変換ツール
エンコーディングとフォーマット
CSVをブラウザ内で即座にJSONに変換。RFC 4180・型推論・ヘッダー行・大整数安全対応。100%プライベート、アップロード不要。
HTML Markdown 変換ツール
エンコーディングとフォーマット
HTML をブラウザ内できれいな Markdown に変換 — GFM のテーブル、タスクリスト、リンク対応。ATX/Setext 見出しとインラインまたは参照リンクを選択。Web コンテンツの移行や LLM への投入に最適。完全プライベートでアップロード不要。
画像 Base64 変換ツール
エンコーディングとフォーマット
画像を Base64 データURIに変換 — PNG・JPG・GIF・WebP・SVG・ICO 対応。HTML・CSS・Markdown・JSON 形式で出力＆コピー。完全プライベートでアップロード不要。
JSON Diff（差分）
エンコーディングとフォーマット
2つのJSONファイルをブラウザで即座に比較・差分確認。サイドバイサイドのハイライト表示、RFC 6902 JSON Patch出力、タイムスタンプやIDなどのノイズフィールドを無視。100%プライベート、アップロード不要。