Markdown → HTML 変換の代表的な方法
手軽さ・拡張性・ワークフロー統合の３観点でまとめました。
必要に応じてサンプルコードをコピペしてご活用ください。
目次
1. CLIツールで一発変換（最速・汎用）
| ツール | インストール | 代表的なコマンド | 特徴 |
|---|---|---|---|
| Pandoc | macOS brew install pandocUbuntu sudo apt install pandoc |
bash<br>pandoc input.md -f markdown -t html -s -o output.html<br> |
– CommonMark＋拡張多数 – docx/PDF など多形式へも変換可能 |
| markdown-cli | npm i -g markdown-cli |
bash<br>md2html input.md > output.html<br> |
– Node 製で軽量 – HTML テンプレートを差し替え可 |
ポイント
-sは standalone（HTML5 の<html>〜</html>を含む完全ファイル）を生成。
CSS を当てたいときは<link>の挿入か、pandoc --css=style.css …でも OK です。
2. Node.js で Web／ビルドフローに組み込む
活用例
-
静的サイトジェネレータ：Next.js／Astro のビルド時に above スクリプトを実行。
-
CI/CD：GitHub Actions で
pushトリガー→ HTML 自動ビルド → S3/CloudFront へデプロイ。
3. Python スクリプトで自動化 & バッチ処理
-
extensionsで コードブロック (fenced_code) やテーブル を有効化。 -
複数ファイルをループ処理すれば、ドキュメント一式を一括変換可能。
4. CMS／エディタ組み込みでリアルタイム変換
| シーン | プラグイン例 | 導入のヒント |
|---|---|---|
| WordPress | WP Githuber MD Markdown Editor |
– Gutenberg を Markdown 書式に対応 – 既存記事も一括変換可 |
| VS Code | Markdown Preview Enhanced | – Ctrl+K V でプレビュー分割表示– CSS テーマ切替 & PDF 書き出し |
| Notion → Web | notion-blog など OSS | – Notion DB を Markdown で出力→静的サイトへ |
5. よくある質問 & ベストプラクティス
| Q | A |
|---|---|
| GitHub / Bitbucket で表示崩れ… | サービス間で GFM 実装が微妙に違う。 → marked, markdown-it の GFM オプション (gfm: true) で合わせる or Pandoc 変換時 --markdown-headings=atx を指定。 |
| HTML インジェクションが心配 | Node なら dompurify, Python なら bleach で サニタイズ。 |
| 独自ショートコードを使いたい | markdown-it / markdown-it-attrs の プラグインを書いて拡張。 |
まとめ & 推奨ワークフロー
-
単発変換や汎用ドキュメント → Pandoc で OK。
-
Node やフロントエンド案件 → marked / markdown-it をビルドに組み込む。
-
Python バッチや社内ツール →
markdownライブラリでスクリプト化。
Web 制作者なら 「CI で Markdown → HTML → デプロイ」 を自動化しておくと、記事追加のたびに人手なしでサイトが更新できます。まずは任意の方法でローカル変換を試し、プロジェクト規模に合わせてワークフローに統合してみてください。
