Markdown で書いたメモを、Markdown 非対応のブログに貼りたい。HTML メールに本文を流し込みたい。CMS の WYSIWYG エディタに HTML として持っていきたい。こうした場面では、Markdown から HTML への変換が必要になります。
ローカルで Pandoc などのツールを動かす方法もありますが、毎回コマンドを叩くのは面倒ですし、外部サービスにテキストを貼るのは社内データだと避けたい。この記事では、Markdown と HTML の関係をおさらいしたうえで、ブラウザだけで完結する変換手順を紹介します。
すぐに変換したい場合
Markdown to HTML に Markdown を貼り付けて実行ボタンを押すだけです。HTML が即座に表示され、インストールは不要です。変換はすべてブラウザ内で行われるため、データは外部に送信されません。
このガイドで扱う変換は CommonMark を基本構文として採用し、表・タスクリスト・打ち消し線・自動リンクなどの拡張は GitHub Flavored Markdown 仕様 に準拠しています。両者の違いは CommonMark と GFM の違い で詳しく整理しています。
Markdown と HTML の関係
Markdown は「軽量マークアップ言語」と呼ばれ、人が書きやすい形式で構造を表現します。HTML はブラウザが表示するための形式で、タグで構造をマークアップします。たとえば次の Markdown は、
# 見出し
これは **太字** と _イタリック_ を含む段落です。
- リスト 1
- リスト 2
HTML に変換すると次のようになります。
<h1>見出し</h1>
<p>これは <strong>太字</strong> と <em>イタリック</em> を含む段落です。</p>
<ul>
<li>リスト 1</li>
<li>リスト 2</li>
</ul>
Markdown は HTML へ変換することを前提に設計されており、両者の対応関係はほぼ 1 対 1 です。
どんな場面で変換が必要になるか
Markdown 非対応のブログや CMS
WordPress の標準エディタ、はてなブログの「見たままモード」、note のエディタなど、Markdown に対応していないツールはまだ多くあります。Markdown 形式で原稿を書いたあと、HTML に変換して貼り付ければそのままレイアウトが反映されます。
HTML メール
メール配信ツールに HTML を流し込みたい場面で、Markdown でドラフトを書く運用は実用的です。テキストとしての可読性も保てますし、最終的に HTML 化してテンプレートに差し込めます。
静的サイト・ドキュメント
ブログジェネレータや一部の社内ドキュメントツールが Markdown を直接受け付けない場合、ビルドの一段階として Markdown から HTML への変換が必要になります。
FormatArc で変換する
Markdown to HTML は、貼り付けてボタンを押すだけで HTML を出力します。
ステップ 1: ツールを開く
Markdown to HTML にアクセスします。
ステップ 2: Markdown を貼り付ける
左側のエディタに Markdown を貼り付けます。見出し、リスト、リンク、画像、コードブロックなど、よく使う構文に対応しています。
ステップ 3: 実行ボタンを押す
実行ボタンを押すと、右側に HTML が出力されます。
GitHub Flavored Markdown のテーブルやタスクリストもサポートしているので、| col1 | col2 | 形式の表や - [x] のチェックボックスもそのまま HTML 化されます。
処理はブラウザ内で完結するので、未公開の原稿や社内向けドキュメントを貼り付けても外部に送信されません。
対応している構文
主要な GFM 構文に対応しています。
- 見出し（
#から######まで） - 段落・改行
- 強調（
**bold**,_italic_,~~strikethrough~~） - 順序付き・順序なしリスト
- タスクリスト（
- [ ],- [x]） - リンク・画像
- インラインコード・コードブロック（フェンス記法）
- テーブル
- 引用（
>） - 水平線（
---）
数式記法（KaTeX / MathJax）には対応していません。
Markdown のテーブル記法（パイプ区切り、配置指定、セル内のエスケープなど）について詳しくは Markdown 表の書き方 を参照してください。
ライブラリやコマンドで変換する場合
単発の変換であればブラウザツールで足ります。一方で、ビルドパイプラインに組み込みたい、静的サイトジェネレータの一部として使いたい、アプリ内で変換したいといった場面では、JavaScript ライブラリや CLI のほうが現実的です。よく使われる選択肢を並べます。
marked.js（ブラウザ / Node 両対応）
軽量で高速な Markdown パーサーで、ブラウザでも Node でも動作します。npm install marked してから一行で変換できます。
import { marked } from 'marked';
const html = marked.parse('# 見出し\n\nこれは **太字**');
GFM はデフォルトで有効なので、タスクリスト・パイプ表・フェンスコードブロックは追加設定なしに仕様通り処理されます。
markdown-it（拡張性重視）
プラグインを足して機能を拡張する設計のパーサーです。脚注、独自のコンテナブロック、サイト固有の構文拡張が必要なときに向いています。
import MarkdownIt from 'markdown-it';
const md = new MarkdownIt({ html: true, linkify: true });
const html = md.render('# 見出し\n\nこれは **太字**');
表とタスクリストは標準では無効です。GFM 相当の挙動が必要なら markdown-it-task-lists などのプラグインを追加します。
Pandoc（CLI）
汎用ドキュメント変換ツールです。ビルドパイプラインや一括変換、Markdown / HTML 以外への形式変換まで含めて扱える点が強みです。
pandoc -f markdown -t html input.md -o output.html
CommonMark / GFM / MultiMarkdown などをフラグで切り替えできます。単発変換は JS ライブラリより遅いものの、対応形式の広さと PDF / DOCX 出力の柔軟性は他のツールでは代替が難しい領域です。
用途別の比較
| ツール | ブラウザで動く | GFM 表が標準で有効 | インストール要 | 向いている用途 |
|---|---|---|---|---|
| FormatArc（このツール） | はい | はい | 不要 | 貼り付け単発の変換 |
| marked.js | はい | はい | 必要（npm） |
アプリに組み込む変換 |
| markdown-it | はい | プラグイン経由 | 必要（npm） |
独自の構文拡張が必要な場合 |
| Pandoc | いいえ | はい | 必要（バイナリ） | ビルドパイプライン、複数形式バッチ |
「貼り付けて HTML をコピーしたい」だけならブラウザツールで完結します。自動ビルドの一部に組み込むなら Pandoc。アプリに統合したい、フロントエンドのバンドルにパーサーを同梱したい場合は marked.js / markdown-it が候補です。
出力された HTML を使うときの注意
不特定多数からの入力には別途サニタイズを
Markdown は HTML をそのまま埋め込めるため、入力に <script> タグなどが含まれていると、変換後の HTML にもそのまま残ります。FormatArc の出力をそのままサイトに貼って公開する場合、自分で書いた原稿であれば問題ありませんが、フォーム入力など信頼できないソースを扱う場合は DOMPurify などで別途サニタイズしてください。
スタイルは含まれない
出力 HTML はあくまで構造のみで、CSS は含まれません。ブログや CMS に貼った後、テーマ側のスタイルで装飾されることを前提にしています。
コードブロックのシンタックスハイライト
```js のように言語を指定しても、HTML 側では class="language-js" が付くだけで、実際のシンタックスハイライト処理は別途 Prism.js や highlight.js を読み込む必要があります。
よくある質問
GitHub Flavored Markdown（表・タスクリスト・コードブロック）に対応していますか？
はい。GitHub Flavored Markdown の仕様に従って変換するため、| col1 | col2 | 形式のパイプ区切り表、- [x] のタスクリストのチェックボックス、~~text~~ の打ち消し線、フェンス記法のコードブロック（言語指定の有無を問わず）はすべて対応する HTML 要素に変換されます。
変換はブラウザ内で完結しますか？
はい。Markdown のパースと HTML 生成はブラウザ内の JavaScript で完了します。サーバーへ送信されないため、社内の未公開ドラフトや個人的なメモを貼り付けても外部に漏れません。
出力した HTML はそのまま公開しても安全ですか？
自分で書いた原稿であれば問題ありません。ただし Markdown には生の HTML を直接埋め込める仕様があるため、ソースに <script> タグなどが含まれていると変換後の HTML にもそのまま残ります。フォーム入力など信頼できないソースを変換する場合は、レンダリング前に DOMPurify などのサニタイザーを通してください。
Pandoc と何が違いますか？
Pandoc は多くの形式に対応した強力なコマンドラインツールで、出力も細かくカスタマイズできますが、インストールとターミナル操作が必要です。このブラウザツールは「貼り付けて実行ボタンを押すだけ」で結果が得られるため、単発の変換には手早く、ビルドパイプラインや大量バッチ処理には Pandoc が向いています。
HTML から Markdown への逆方向も変換できますか？
はい。逆方向は HTML to Markdown 変換ツール で行えます。HTML タグを取り除いて整理された Markdown を出力します。詳しい使い方は HTML to Markdown 変換ガイド を参照してください。
まとめ
Markdown を HTML に変換するのは、ローカルツールでもオンラインサービスでも可能ですが、貼り付けてすぐ結果が欲しい場面では Markdown to HTML のようなブラウザ完結ツールが手早いです。
逆方向の HTML から Markdown への変換が必要な場合は HTML to Markdown を、CSV を Markdown のテーブルに変換したい場合は CSV to Markdown 変換ガイド を参照してください。ブラウザのツールバーから変換したい場合は FormatArc Chrome 拡張の使い方 が便利です。