Markdown → HTML変換とは？

Markdown→HTML変換ツールは、MarkdownコンテンツをリアルタイムでHTMLに変換します。テーブル、コードブロック、タスクリストなどCommonMark構文を完全にサポートしているため、コンテンツのプレビューやCMS向けのHTML生成に使えます。

変換には marked パーサーと GitHub Flavored Markdown 拡張を使うため、テーブル、フェンス付きコードブロック、タスクリスト、自動リンクは GitHub の README と同じ見た目になります。プレビューは入力に合わせて更新され、ソース表示ではコピーで得られる HTML がそのまま確認できます。出力は h1〜h6、ul/ol、pre/code、img などのセマンティックタグで、インラインスタイルは含みません。「圧縮」をオンにすると1行のコンパクトな出力になり、ダウンロードでは全体が独立した .html 文書に、テンプレートを設定すればそのテンプレートに包まれます。

使い方

1. エディターにMarkdownコンテンツを入力または貼り付けてください。見出し、リスト、リンク、画像、コードブロック、テーブルすべてに対応しています。
2. レンダリングされたHTMLプレビューがリアルタイムで更新され、プレビューモードとHTMLソース表示を切り替えられます。
3. クリーンなHTML出力をコピーするか、.htmlファイルとしてダウンロードして、ウェブサイトやCMSですぐに使用できます。

使用するタイミング

• Markdown で書いた記事を、.md を受け付けない CMS にきれいな HTML として貼り付けたいとき。
• プロジェクトの README を HTML に変換し、ドキュメントサイトやランディングページに貼り付けたいとき。
• 公開前にフットノートやタスクリストといった見慣れない Markdown 構文の表示を確認したいとき。

結果

Markdownで書いた技術チュートリアルを、HTMLのみ対応のCMSに貼り付ける必要がある場合、ここで変換すれば、見出し階層やコードハイライトのマークアップが正しいセマンティックHTMLが得られます。

よくある質問

どの Markdown 方言に対応していますか?

CommonMark に GitHub Flavored Markdown(GFM)を重ねた仕様です。パイプ記法のテーブル、言語指定付きフェンスコード、~~text~~ の打ち消し線、[x]/[ ] のタスクリスト、裸の URL の自動リンク化に対応しています。

出力 HTML にインライン CSS や class は付きますか?

付きません。出力は h1、h2、p、ul、pre、code、img といった純粋なセマンティック HTML です。サイト側の CSS をあてれば、フレームワーク既定のスタイルとぶつからずタイポグラフィを揃えられます。

コードブロックにシンタックスハイライトはつきますか?

コードは <pre><code class="language-xxx"> でラップされるので、ページに貼った後 Prism や highlight.js のようなハイライターが色付けを担当します。変換自体に色情報は含まれません。

Markdown 内に書いた HTML タグはどう扱われますか?

そのまま通過します。動画埋め込みや折りたたみブロックなど Markdown 構文だけでは表現できないものを使いたいときは、<div>、<iframe>、<details> などをそのまま書いて構いません。

ここで HTML を Markdown に戻すことはできますか?

本ツールは Markdown→HTML 方向だけです。逆方向は HTML→Markdown コンバーターを使ってください。HTML はスタイルやレイアウトを多く持つため、Markdown に表現できない情報があり、フローも別物になります。

関連ツール