手軽さ・拡張性・ワークフロー統合の3観点でまとめました。
必要に応じてサンプルコードをコピペしてご活用ください。
1. CLIツールで一発変換(最速・汎用)
ツール | インストール | 代表的なコマンド | 特徴 |
---|---|---|---|
Pandoc | macOS brew install pandoc Ubuntu 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 → デプロイ」 を自動化しておくと、記事追加のたびに人手なしでサイトが更新できます。まずは任意の方法でローカル変換を試し、プロジェクト規模に合わせてワークフローに統合してみてください。