MarkdownをHTMLに変換する簡単方法：ツール・手順まとめ

はじめに

Web制作やブログ執筆でよく使われるMarkdown。シンプルな書式で、HTMLに手軽に変換できる点が魅力です。しかし、Markdownを直接ブラウザに表示したい場合や、既存のHTMLテンプレートに埋め込む場合には変換作業が必要になります。
本記事では、初心者から中級者までが手軽に使える「Markdown → HTML 変換」の代表的ツールと具体的な手順をまとめました。コマンドラインを使わない手段から、スクリプトで自動化する方法まで網羅していますので、ぜひ参考にしてください。

Markdownとは？

Markdownは 2004 年に John Gruber が開発した軽量マークアップ言語です。

シンプル：改行、見出し、リンク、テーブルなど基本構造を記述するときに余計なタグが不要。
汎用性：Jekyll, Hugo, GitHub Pages など多くの静的サイトジェネレータでネイティブにサポート。
可読性：テキスト自体が読みやすい形で残るため、メール本文やメモとしても通用。

Markdown は最終的に HTML に変換してブラウザで表示されます。しかし、変換エンジンにより微妙に挙動が異なるため、用途に合わせて適切なツールを選ぶことが重要です。

1. オンラインコンバータを使う

1-1. Webサイトを利用するメリット

インストール不要：ブラウザさえあれば実行可能。
即時変換：入力したらすぐにプレビューやダウンロードができる。
拡張機能：画像埋め込みやテーマ切替など、簡易的な機能があらかじめ用意されている。

1-2. 代表的なオンラインコンバータ

サイト	特徴	使い方
Dillinger	スタイリングされたエディタ＋リアルタイムプレビュー	エディタにMarkdownを貼り付け、`File → Export → HTML`
Markable	シンプルUI でブックマークや共有リンク生成	直接入力 → エクスポート
Markdown Live Preview	変換とプレビューを同時に表示	変換結果はコピー＆ペーストで取得
StackEdit	ブラウザ上で同期保存、Google ドライブやDropbox連携	アカウントを作成して利用

注意点

出力されるHTMLはベンダー固有のクラス名やインラインスタイルが付与される場合があるので、テンプレートに埋め込む際はスタイルの整合性を確認してください。
画像リンクは絶対パス・相対パスが混在しがちなので、サイトに合わせて調整が必要です。

2. ブラウザ拡張で即時変換

2-1. 「Markdown Preview Enhanced」

主な機能：MarkdownをリアルタイムでHTMLに変換し、タブで表示。
拡張性：MathJax、Mermaid、PlantUML などのサポート。
使い方：Chrome/Firefox の Web Store からインストールし、Markdown ファイルを開くだけで自動変換。

2-2. 「Markdown Here」

主な機能：メールクライアントやWebフォームでMarkdownを書き、送信前にHTML化。
使い方：メール作成画面で「Markdown Here」ボタンをクリックすると編集画面へ。

拡張機能は小規模な編集やメールでの共有に便利です。記事全体をブラウザでチェックしたい場合は、拡張機能から出力されるHTMLを別タブに貼り付けて確認できます。

3. VS Code を使った変換

3-1. VS Code のエクステンション

エクステンション	特徴	インストールコマンド
Markdown Preview Enhanced	上記拡張と同様、プレビューとエクスポート機能	`ext install shd101wyy.markdown-preview-enhanced`
Markdown All in One	基本的なマークダウン機能＋プレビュー	`ext install yzhang.markdown-all-in-one`
Markdown PDF	Markdown → PDF/HTML/PNG など複数形式へ変換	`ext install yzane.markdown-pdf`

3-2. 具体的な手順

Markdown ファイルを開く
VS Code で example.md を開きます。
プレビューを起動
Ctrl+Shift+V（VS Code 2021.10 以降）で Live Preview を開きます。
HTMLとしてエクスポート
- Ctrl+Shift+P でコマンドパレットを開き、Markdown Preview Enhanced: Export HTML を選択。
- エクスポート先を指定すると、.html ファイルが生成されます。

メリット

統合開発環境内で完結できるため、コードとマークダウンを同時に管理しやすい。
プレビューパネルにリッチな拡張機能（図表、チャート）が使える。

4. Pandoc を使うパワフルな変換

4-1. 何ができる？

Markdown → HTML の他に PDF、Word、EPUB へも変換可能。
カスタムスタイルやテンプレートを利用して高品質な出力が可能。
複数ファイルをまとめて変換するマージ機能もあり。

4-2. Pandoc のインストール

Windows：公式サイトのインストーラを実行。
macOS：brew install pandoc（Homebrew）
Linux：sudo apt install pandoc（Debian/Ubuntu）

4-3. 基本的なコマンド例

# 1 ファイルだけ
pandoc example.md -o example.html

# テンプレート指定
pandoc example.md -o example.html --template=custom.latex

# 複数ファイルを結合して 1 ファイルに
pandoc part1.md part2.md part3.md -o combined.html

オプション解説

--standalone：<html>...</html> のフルドキュメントを生成。
-c style.css：外部 CSS を埋め込む。
--toc：目次を自動生成。

4-4. 高度な使い方

Lua フィルターで Markdown を事前に加工。
Template Engineでカスタム HTML テンプレートを作成。
CI/CD で自動化スクリプトに組み込むことで、GitHub Pages の自動デプロイが実現可能。

5. Python スクリプトで自動化

5-1. `markdown` パッケージ

Python で簡易変換を行う場合、markdown パッケージがよく使われます。

pip install markdown

import markdown
from pathlib import Path

md_file = Path('example.md')
html_file = Path('example.html')

html = markdown.markdown(md_file.read_text(), extensions=['extra', 'codehilite'])

html_file.write_text(f"<html><body>{html}</body></html>")

5-2. `markdown2` でさらに高速

pip install markdown2

import markdown2
html = markdown2.markdown_path('example.md')

5-3. スクリプトを使ったバッチ変換

import os
from pathlib import Path

directory = Path('markdowns')
for md_file in directory.glob('*.md'):
    html = markdown.markdown(md_file.read_text(), extensions=['fenced_code', 'tables'])
    out_file = md_file.with_suffix('.html')
    out_file.write_text(f"<html><body>{html}</body></html>")

こうしたスクリプトは、ブログ記事やレポートの一括変換に役立ちます。

6. コマンドラインツールを自作

6-1. 必要な依存ライブラリ

libmarkdown（C 版）
markdown-it-py（Python）
marked（Node.js）

6-2. 例：Node.js で簡易 CLI を作る

npm init -y
npm install marked commander

md2html.js

#!/usr/bin/env node

const { program } = require('commander');
const fs = require('fs');
const marked = require('marked');

program
  .requiredOption('-i, --input <file>', 'Input Markdown file')
  .requiredOption('-o, --output <file>', 'Output HTML file')
  .parse(process.argv);

const md = fs.readFileSync(program.input, 'utf-8');
const html = marked(md);

fs.writeFileSync(program.output, `<html><body>${html}</body></html>`);
console.log(`Converted ${program.input} -> ${program.output}`);

chmod +x md2html.js
実行例

./md2html.js -i note.md -o note.html

6-3. さらに進める

画像への相対パス変換
テーマ別 CSS を動的に注入
目次生成機能

7. 変換結果を確認・デバッグ

項目	チェック方法
タグ構造	Chrome DevTools で `Elements` を閲覧し、`<h1>` などが正しく生成されているか確認。
CSS 適用	外部スタイルが正しくリンクされているか、`<link>` タグのパスを確認。
画像リンク	`ネットワーク` タブで 404 エラーが無いか確認。必要なら相対パスに変更。
エンコーディング	`<meta charset="utf-8">` が存在しない場合は手動で追加。
目次	`toc` クラスを持つ `ul` が生成されているか確認。

トラブルシューティングのポイント

リンクが外れた：Markdown 内のリンクは ./sub/file.md など相対パスを使用。HTML への変換時にパスを再調整。
表が崩れる：Markdown で tables 拡張を有効化。markdown-it-py の tables オプションを付与。
スタイルが勝手に上書き：外部 CSS の優先順位を確認し、!important を使う場合は適切に。

8. ブログやサイトへ組み込む際のベストプラクティス

共通 CSS を管理
- すべての HTML で同じ style.css をインクルードし、マージンやフォントサイズを統一。
目次の自動生成
- Pandoc の --toc オプションや JavaScript で hash を付与した目次を追加。
画像の最適化
- 事前に imagemagick でリサイズ、webp へ変換。
アクセシビリティ
- alt 属性を自動で追加するマークダウンフレームワークを利用。
SEO 対策
- <title>, <meta name="description"> をプラグインで自動書き込み。

まとめ

MarkdownからHTMLへ変換する手段は多岐にわたります。

手軽に始める：オンラインコンバータ・ブラウザ拡張
日常作業の効率化：VS Code エクステンション
高機能・可搬性：Pandoc や Python スクリプト
独自カスタマイズ：Node.js や C ライブラリで自作 CLI

選択肢は用途と技術スタック次第。まずは自分のワークフローに合ったツールを一本決め、そこから必要に応じて拡張していくと効率的です。
「Markdown → HTML 変換」に関してまだ疑問が残る場合は、実際に数種類のツールを試しながら比較してみると、より深い理解と最適なワークフローが見えてくるでしょう。祝☆変換成功！