Markdown を HTML に変換する方法

Markdown で書いたメモを、Markdown 非対応のブログに貼りたい。HTML メールに本文を流し込みたい。CMS の WYSIWYG エディタに HTML として持っていきたい。こうした場面では、Markdown から HTML への変換が必要になります。

ローカルで Pandoc などのツールを動かす方法もありますが、毎回コマンドを叩くのは面倒ですし、外部サービスにテキストを貼るのは社内データだと避けたい。この記事では、Markdown と HTML の関係をおさらいしたうえで、ブラウザだけで完結する変換手順を紹介します。

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）には対応していません。

出力された HTML を使うときの注意

不特定多数からの入力には別途サニタイズを

Markdown は HTML をそのまま埋め込めるため、入力に <script> タグなどが含まれていると、変換後の HTML にもそのまま残ります。FormatArc の出力をそのままサイトに貼って公開する場合、自分で書いた原稿であれば問題ありませんが、フォーム入力など信頼できないソースを扱う場合は DOMPurify などで別途サニタイズしてください。

スタイルは含まれない

出力 HTML はあくまで構造のみで、CSS は含まれません。ブログや CMS に貼った後、テーマ側のスタイルで装飾されることを前提にしています。

コードブロックのシンタックスハイライト

```js のように言語を指定しても、HTML 側では class="language-js" が付くだけで、実際のシンタックスハイライト処理は別途 Prism.js や highlight.js を読み込む必要があります。

まとめ

Markdown を HTML に変換するのは、ローカルツールでもオンラインサービスでも可能ですが、貼り付けてすぐ結果が欲しい場面では Markdown to HTML のようなブラウザ完結ツールが手早いです。

逆方向の HTML から Markdown への変換が必要な場合は HTML to Markdown を、CSV を Markdown のテーブルに変換したい場合は CSV to Markdown 変換ガイド を参照してください。