Markdown→HTML変換ツール(無料・登録不要)
登録不要 無料 ブラウザ完結
変換後に出力タブでHTML文字列またはプレビューを確認できます
Markdown 入力
変換ボタンを押すとHTMLが出力されます
変換後にプレビューが表示されます
入力: 0行 | 0文字 | 出力: — bytes
1
Markdownを入力または.mdファイルをインポート
左側のエディタにMarkdownを貼り付けるか、「ファイル」ボタンで.mdファイルを読み込みます。「サンプル」ボタンでGFM記法の見本を即挿入できます。
左側のエディタにMarkdownを貼り付けるか、「ファイル」ボタンで.mdファイルを読み込みます。「サンプル」ボタンでGFM記法の見本を即挿入できます。
2
オプションを設定する
GFM有効/無効・出力形式(整形/圧縮/本文のみ/完全HTML)・インデント幅・XSSサニタイズ・シンタックスハイライト埋め込みを目的に合わせて選択します。
GFM有効/無効・出力形式(整形/圧縮/本文のみ/完全HTML)・インデント幅・XSSサニタイズ・シンタックスハイライト埋め込みを目的に合わせて選択します。
3
「変換」をクリック
ボタンを押すと右側にHTML文字列が即出力されます。「プレビュー」タブに切り替えるとブラウザレンダリング結果も確認できます。
ボタンを押すと右側にHTML文字列が即出力されます。「プレビュー」タブに切り替えるとブラウザレンダリング結果も確認できます。
4
コピーまたはダウンロード
「コピー」ボタンで即クリップボードに転送。「.html保存」でファイルダウンロード。入力内容はLocalStorageに自動保存されます。
「コピー」ボタンで即クリップボードに転送。「.html保存」でファイルダウンロード。入力内容はLocalStorageに自動保存されます。
主な利用シーン
CMSへのHTMLコンテンツ投稿
WordPressのカスタムHTMLブロックやMovable Type・EC-CUBEなどのHTMLエリアに変換したHTMLを貼り付けます。「本文のみ」出力が最適です。
静的サイト生成・メール配信
Markdownで書いたニュースレター・LPコンテンツを「完全HTML」で出力してメール配信ツールに貼り付け。シンタックスハイライト付きのドキュメントページ生成にも。
コードブロックのHTML化
GitHubのREADMEにあるコードサンプルをHTMLに変換してドキュメントサイトに組み込む際に活用。GFMオプション有効で言語クラスも付与されます。
フロントエンド開発のテンプレート作成
Markdownで素早くコンテンツ構造を書いてHTML化。コンポーネントのslotやテンプレートリテラルに貼り付ける開発フローに最適です。
プライバシー:入力したMarkdownはすべてブラウザ内で処理されます。サーバーへの送信は一切なく、機密情報を含むドキュメントも安心して変換できます。
| 出力形式 | 内容 | 適した用途 |
|---|---|---|
| 整形HTML | インデント付きで読みやすく整形されたHTML | コードレビュー・人間が読む場面・編集が必要な場合 |
| 圧縮HTML | 空白・改行を除去した最小化HTML | 本番環境へのデプロイ・ファイルサイズ最小化 |
| 本文のみ | pやh1・ulなどの本文タグのみ(DOCTYPE・html・head・bodyなし) | CMS・WordPress・Webコンポーネントへの埋め込み |
| 完全HTML | DOCTYPEから始まる単体で動作するHTMLファイル | スタンドアロンページ・ドキュメントサイト・メールHTMLテンプレート |
「完全HTML」出力のサンプル
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Markdownから変換したページ</title> </head> <body> <h1>見出し</h1> <p>本文テキスト</p> </body> </html>
GFMはGitHubが定めたMarkdown拡張仕様です。このツールでGFMオプションを有効にすることで以下の記法が使えます。
| 記法 | 出力HTML | 用途 |
|---|---|---|
~~取り消し~~ |
<del>取り消し</del> |
打ち消し線テキスト |
- [ ] タスク |
<input type="checkbox"> |
チェックボックス付きリスト |
| A | B | |
<table><tr><td>...</td> |
テーブル(表組み) |
https://url.com |
<a href="..."></a> |
URLを自動リンク化 |
```js ... ``` |
<code class="language-js">...</code> |
言語クラス付きコードブロック |
GFM オフ時の動作
GFMオプションをオフにするとCommonMark準拠の標準Markdownのみが適用されます。テーブル・タスクリスト・取り消し線はHTMLに変換されません。シンプルな文章中心のMarkdownを変換する場合はオフでも構いません。
MarkdownはHTMLを直接埋め込める仕様です。ユーザー入力由来のMarkdownをそのままWebページに表示すると、XSS(クロスサイトスクリプティング)攻撃の対象になる可能性があります。
除去される危険な要素の例
| タイプ | 例 | リスク |
|---|---|---|
| scriptタグ | <script>alert('XSS')</script> |
任意のJSを実行される |
| イベント属性 | onerror="maliciousCode()" |
エラー等をトリガーにJSを実行 |
| javascript:URL | href="javascript:void(0)" |
リンクからJSを実行 |
| iframeタグ | <iframe src="悪意あるURL"> |
外部ページの埋め込み・フィッシング |
推奨:ユーザーが入力したMarkdownをWebページに表示する場合は、必ず「XSSサニタイズ」オプションを有効にしてから出力されたHTMLをご利用ください。自分だけが入力する信頼できるMarkdownには不要です。
- MarkdownプレビューとMarkdown→HTML変換の違いは何ですか?
- プレビューはMarkdownをリアルタイムでブラウザ上に表示するツールです。変換ツールはMarkdownをHTML文字列として取り出すことに特化しており、CMSへの貼り付けや静的HTML生成に向いています。
- WordPressに貼り付けるには何を選べばよいですか?
- WordPressのカスタムHTMLブロックには「本文のみ」出力が最適です。DOCTYPEやhtmlタグを含まない本文タグだけが出力されます。
- 日本語のMarkdownも正しく変換できますか?
- はい。marked.jsはUnicode(UTF-8)に完全対応しており、日本語・中国語・韓国語などのマルチバイト文字も正しく変換できます。
- 大きなMarkdownファイルでも処理できますか?
- ブラウザのメモリ上限まで処理できます。一般的な技術ドキュメント(数千行程度)であれば問題ありません。
- サーバーにデータは送信されますか?
- いいえ。すべての変換処理はブラウザ内で完結します。入力したMarkdownも出力したHTMLもサーバーに送信されません。機密情報を含むドキュメントも安心してご利用いただけます。