Markdown to HTML — Markdown をオンラインで HTML に無料で変換
Markdown をクリーンな HTML に変換。ライブ切替付き即時プレビュー、自動リンク URL、取り消し線、表に対応し、生 HTML は透過しません。すべてブラウザ内で動作します。
Markdown から HTML への変換は、もっとも一般的な Markdown の操作です。すべての静的サイトジェネレーター、CMS、ドキュメントプラットフォーム、README レンダラーが行っています。Markdown to HTML ツールはそれをブラウザ内で実行し、生の HTML ソースの隣にレンダリング結果を表示するライブプレビュー切替を備えています。Markdown を貼り付け、HTML を確認し、プレビューへ切り替え、コピーする — それがワークフロー全体です。コンバーターは markdown-it 上で動作し、CommonMark と GFM 拡張（表、取り消し線、タスクリスト、自動リンク URL）を有効化しています。生 HTML の透過はセキュリティ上の理由から無効化されており、入力中の埋め込み HTML タグは実行されずエスケープされます。
もっとも一般的なワークフローは、開発者が Markdown でドキュメントを書き、HTML にレンダリングし、Markdown をネイティブにサポートしないが HTML 入力を期待する CMS へその HTML を貼り付ける、というものです。次に多いのは、コンテンツエディターが Markdown のドラフトを受け取り、公開前に書式、リンク先、画像参照をブラウザでプレビューして確認する必要があるケースです。プレビュー切替はこれをワンステップの操作にします — ファイルの保存も、ビルドステップの実行も、別のプレビューツールの起動も不要です。
HTML 出力はクリーンでミニマルです。インラインスタイル、外部依存、<script> タグは一切含まれません。コードブロックは言語クラス名（language-python、language-javascript）を保持し、後段のシンタックスハイライトに利用できます。リンクは同じタブで開きます。出力は自己完結した HTML フラグメントで、埋め込み、スタイリング、HTML 対応プラットフォームへの貼り付けにすぐに使えます。処理のすべてがブラウザ内に留まり、Markdown のテキストがサーバーへ送信されることはありません。
使い方
Markdown を貼り付ける
入力欄に Markdown テキストを貼り付けるか入力してください。コンバーターは標準 CommonMark に加え GFM 拡張をサポートしています。見出し、太字、斜体、リンク、画像、言語クラス付きのコードブロック、引用ブロック、順序付き・順序なしリスト、取り消し線、表、タスクリスト、自動リンク URL に対応します。
HTML ソースとライブプレビューを切り替える
HTML/Preview 切替を使って、生の HTML ソースコードとレンダリング済みプレビューを切り替えます。プレビューはブラウザのネイティブレンダリングエンジンを使用してその場で HTML をレンダリングするため、出力が実際にどのように見えるか — HTML が生成する余白、フォントサイズ、リンクのスタイルまで — を正確に確認できます。
コピーまたはダウンロード
生の HTML をコピーするか、`.html` ファイルとしてダウンロードします。HTML は安全に埋め込めます。`<script>` は含まれず、入力中の生 HTML も透過せず、外部依存もありません。出力は自己完結した HTML フラグメントで、CMS、静的サイト、ドキュメントプラットフォームへの埋め込みにすぐに使えます。
よくある質問
どの Markdown 機能に対応していますか？
標準 CommonMark に GFM 拡張を加えたものです。表、取り消し線、タスクリスト（`- [ ]` と `- [x]`）、自動 URL リンク（`https://example.com` のような素の URL がクリッカブルリンクになります）に対応します。コードブロックには言語クラス名（例：`language-python`）が付与されるため、後段のシンタックスハイライトに利用できます。
入力に生 HTML を許可しますか？
いいえ。コンバーターは `html: false` で設定されています。Markdown 入力に埋め込まれた HTML タグはエスケープされ、レンダリングされずにそのままテキストとして表示されます。これによりクロスサイトスクリプティング (XSS) を防ぎ、出力を予測可能なものに保ちます。埋め込み HTML が必要な場合は、HTML の透過を明示的に有効にした Markdown レンダラーを使用してください。
Markdown to Plain Text や Markdown to PDF と何が違うのですか？
Markdown to Plain Text はすべての書式を取り除き、生のテキストを出力します。Markdown to PDF は Markdown をスタイル付きのページ分割された PDF ドキュメントとしてレンダリングします。Markdown to HTML は中間ステップであるクリーンな HTML マークアップを出力するもので、Web サイトへの埋め込み、CMS への貼り付け、独自の CSS スタイリングの出発点、PDF ジェネレーターへの受け渡しに利用できます。
HTML に CSS スタイリングは含まれますか？
いいえ。出力はスタイルなしの HTML フラグメントです。スタイル付きの出力が必要な場合は、印刷向けスタイルシートを適用する Markdown to PDF ツールを使うか、HTML 出力に独自の CSS を追加してください。コードブロックには言語クラス名が付くため、Prism や highlight.js などのシンタックスハイライトライブラリと組み合わせて使えます。
なぜ生 HTML を無効にしているのですか？
セキュリティ上の理由です。Markdown 入力が信頼できないソース（ユーザーコメント、サードパーティのドキュメント、Webhook のペイロードなど）から来たものである場合、埋め込まれた `<script>` タグや `<iframe>` 要素がプレビューのレンダリング時にブラウザで実行されてしまう可能性があります。生 HTML の透過を無効化することは、出力をクリーンで予測可能な状態に保つための多層防御の一手でもあります。
制限事項
- 生 HTML の透過なしMarkdown 入力に埋め込まれた HTML タグはエスケープされ、テキストとして表示されます。HTML を埋め込む必要がある場合は、HTML を完全に有効にしたフル機能の Markdown レンダラーを使用するか、HTML を直接記述してください。これはセキュリティと予測可能性のための設計上の選択です。
- シンタックスハイライトなしコードブロックは言語クラス名（例：`<code class='language-python'>`）付きでレンダリングされますが、シンタックスハイライトは適用されません。カラー化されたコードが必要な場合は、HTML 出力に Prism.js、highlight.js、サーバーサイドハイライターを適用してください。
- ブロックレベルの HTML のみコンバーターはブロックレベルで Markdown をレンダリングしますが、`<html>`、`<head>`、`<body>` タグを含む完全な HTML ドキュメントは生成しません。出力はより大きなページ内に埋め込むための HTML フラグメントです。
プラットフォーム別の注意点
- macOS
- 出力のカスタマイズ性を高めたい CLI の代替手段は `pandoc -f markdown -t html input.md` です。本ブラウザツールはワンオフの素早い変換に適しており、ライブプレビューの切替を備えています。
- Windows
- VS Code の Markdown プレビュー（`Ctrl+Shift+V`）はレンダリング結果を表示できますが、HTML ソースを書き出すことはできません。本ブラウザツールは 1 つのビューで生の HTML とプレビューの両方を提供します。
- Linux
- `pandoc`、`marked`、`commonmark` はいずれも CLI の代替手段です。本ブラウザツールには、生のソースの隣にレンダリング結果を表示するライブプレビュー切替が追加されており、エディタとブラウザを切り替えずに Markdown の書式を反復する作業に便利です。
- Web
- markdown-it によりすべてブラウザ内で実行されます。テキストコンテンツはサーバーへ送信されません。社外秘の社内ドキュメントを、サードパーティの変換サービスに晒すことなく処理できます。