PixConvert

無料のMarkdown→HTML変換ツール

MarkdownをHTMLに無料で変換し、入力しながら結果を確認できます。テキストを貼り付け、表やタスクリストを含むライブプレビューをチェックして、HTMLソースをワンクリックでコピーしましょう。

Markdown入力

ここにHTMLが出力されます…

MarkdownをHTMLに変換する方法

1

Markdownを貼り付けます。

左側のMarkdown入力ボックスに入力または貼り付けるか、「サンプルを読み込む」をクリックして、表とコードブロックを含むサンプルを表示します。

2

プレビューを確認します。

プレビュータブは変更のたびに更新されます。テキスト内の単一の改行を改行として残したい場合は、GitHub形式の改行をオンにしてください。

3

HTMLをコピーします。

HTMLソースタブを開いてマークアップを確認し、HTMLをコピーをクリックして、CMS、メールツール、静的サイトに貼り付けます。

よくある質問

Markdownの種類、表、改行、出力されるHTMLについての回答です。

MarkdownをHTMLに変換するにはどうすればよいですか?

左のボックスにMarkdownを貼り付けると、入力に合わせてプレビューに結果が表示されます。HTMLソースタブを開いてマークアップを確認し、HTMLをコピーをクリックすると、HTML全体がクリップボードに入ります。

どのMarkdownの種類に対応していますか?

GitHub Flavored Markdownを有効にしたmarkedパーサーを使用しています。CommonMarkに加えて、表、タスクリスト、チルダ2つの取り消し線、www.example.com のようなそのままのリンクに対応しています。脚注、数式、絵文字ショートコード、YAMLフロントマターは変換されません。

表は変換できますか?

はい。ヘッダー区切り行のあるパイプ表は、HTMLのtable、thead、tbody要素になります。配置のコロンにも対応しており、:-: は列を中央揃え、--: は右揃えにし、各セルのalign属性として出力されます。

出力されたHTMLは埋め込んでも安全ですか?

Markdownが安全な場合に限ります。コンバーターはサニタイズを行わないため、生のHTML、scriptタグ、onerror属性、javascript:リンクはそのままコピーしたHTMLに含まれます。プレビューではスクリプトがブロックされますが、同じコードはあなたのサイトでは実行されます。公開する前に、DOMPurifyなどのツールでコピーしたHTMLをサニタイズしてください。

GitHub形式の改行オプションは何をしますか?

単一の改行を、HTMLの改行に変換します。オフの場合は、標準のMarkdownと同じく、改行1つで区切られた2行は1つの段落につながります。どちらの設定でも、空行があれば必ず新しい段落が始まります。

コードブロックがプレーンテキストで表示されるのはなぜですか?

フェンスコードは、独立した行に バッククォート3つ またはチルダ3つを書くか、4スペースでインデントする必要があります。フェンスの後ろに書く言語名(jsなど)は language-js クラスになりますが、プレビューにシンタックスカラーは付きません。ご自身のページにハイライターを追加してください。

出力にhtml、head、bodyタグは含まれますか?

いいえ。出力はHTMLフラグメントで、doctype、head、bodyのないコンテンツ部分の要素のみです。CMSのブロックやテンプレートのスロットに適しています。単独のページにする場合は、フラグメントをご自身のHTMLドキュメントで囲んでください。

HTMLをMarkdownに戻せますか?

このページではできません。変換できるのはMarkdownからHTMLへの方向のみです。HTMLやMarkdownの2つのバージョンの違いを確認したい場合は、両方をDiff Checkerに貼り付けると、行ごとに比較できます。

フロントマターが見出しとして表示されるのはなぜですか?

このコンバーターはYAMLフロントマターを読み取りません。冒頭の --- は水平線になり、閉じの --- より上にあるキー行は見出しとして結合されます。貼り付ける前にフロントマターのブロックを削除し、タイトルはCMS側で設定してください。

.mdファイルをアップロードできますか?

いいえ、ファイル選択機能はありません。.mdファイルをテキストエディターで開き、内容をすべてコピーして入力ボックスに貼り付けてください。同じパーサーをNodeでテストしたところ、8 KBのファイルは1ミリ秒未満、0.9 MBのファイルは約0.1秒でした。

入力したMarkdownはサーバーに送信されますか?

いいえ。テキストはブラウザー内で変換され、お使いのデバイスに残ります。公開サイトでは、HTMLのコピーやクリアをクリックしたことだけをGoogle Analyticsが記録し、内容は記録しません。Markdown内でリンクした画像は、それぞれのアドレスから読み込まれます。

Markdown HTML変換ツールの機能

GitHub Flavored Markdownを有効にしたmarkedパーサーを採用しています。左側に入力すると、右側でプレビューまたはHTMLソースを確認できます。

左側にMarkdown、右側に見出し、タスクリスト、表、コードを含むライブプレビューを表示するMarkdownからHTMLへのエディター

入力しながらMarkdownをHTMLでプレビュー

変更のたびにプレビューが更新され、見出し、リスト、リンク、引用、コードが読みやすいスタイルで表示されます。GitHubの表、タスクリストのチェックボックス、取り消し線も表示されます。

  • 入力のたびに更新
  • 表、タスクリスト、取り消し線に対応
  • ライトとダークのプレビュースタイル
今すぐ試す
MarkdownからHTMLへのソース表示。<h1>v2.4.0</h1> からclassが language-js のコードブロックまでのHTMLフラグメントです

HTMLソースをワンクリックでコピー

HTMLソースタブに切り替えると、生のマークアップを確認できます。HTMLをコピーを押すとフラグメント全体がクリップボードに入り、CMS、メールテンプレート、静的ページにそのまま貼り付けられます。

  • HTMLフラグメント形式(headやbodyなし)
  • コードブロックに言語クラスを保持
  • マークアップ確認用の読み取り専用ソース表示
今すぐ試す

GitHub形式の改行

初期設定ではオフです。標準のMarkdownと同じく、改行1つで区切られた行は1つの段落につながります。オンにすると、GitHubのコメントのように、1つひとつの改行がそのまま改行になります。

生のHTMLもそのまま出力

Markdown内のdivやiframeなどのHTMLは、書いたとおりに出力へ残ります。プレビューではスクリプトがブロックされますが、コピーしたHTMLはクリーン化されないため、公開する前に確認してください。

サンプルを読み込んですぐ開始

ワンクリックで、見出し、太字と斜体、リスト、JavaScriptのコードブロック、表、引用、リンクを含むサンプルがエディターに入力され、各要素の表示を確認できます。

Markdownはお使いのデバイスに残ります

変換はブラウザー内で実行され、テキストが送信されることはありません。利用統計に記録されるのは、コピーやクリアを行ったことだけです。Markdown内の画像は、プレビューでそれぞれのWebアドレスから読み込まれます。

Markdown変換の活用シーン

コピーしたHTMLの代表的な使い道を3つご紹介します。

ブログ・CMSでの公開

Markdownで記事を書き、そのHTMLを、CMSのコードブロックやHTMLビューなど、生のHTMLを受け付けるエディターに貼り付けます。

  • HTMLをCMSのコードブロックに貼り付け
  • 下書きの見出し、リンク、リストをそのまま維持
  • 公開前にプレビューで確認

メールテンプレート

ニュースレターや長文の返信をMarkdownで下書きし、カスタムHTMLに対応したメールツールにHTMLをコピーします。メールアプリは独自のスタイルを適用するため、まずテスト送信をおすすめします。

  • まずはシンプルなMarkdownでメールを執筆
  • HTMLをカスタムHTMLブロックにコピー
  • 本番の送信前に自分宛てにテスト送信

ドキュメント

READMEやヘルプ記事を、ドキュメントページやアプリ内ヘルプパネル用のHTMLに変換します。フェンスコードブロックには言語クラスが残るため、ハイライターを連携できます。

  • pushする前にREADMEをプレビュー
  • ドキュメントページをHTMLフラグメントとして書き出し
  • コードブロックに独自のシンタックスハイライターを追加