導入
Markdown はシンプルさと可読性の高さから、ブログ記事やテクニカルドキュメント、Web ページのソースに広く使われています。
一方、Web に掲載するには HTML に変換する必要があります。
手作業で書き換えるよりも、専用ツールで自動変換した方が作業時間を短縮でき、エラーも防げます。
ここでは「Markdown → HTML」を簡単に行える無料ツールを 10 個紹介し、各ツールの使い方や特徴を掘り下げます。
自分の環境や用途に合ったツールを選ぶ参考にしてください。
1. VS Code（Markdown Preview 拡張機能）
特徴
- 無料で使える「Visual Studio Code」に「Markdown Preview Enhanced」や「Markdown All in One」などの拡張機能があるため、ローカル環境で高速に変換。
- サイドバーにプレビューを表示して、リアルタイムで HTML を確認。
- CSS テンプレートを設定すると、好みの見た目に調整可能。
使い方
- VS Code を起動し、拡張機能タブから「Markdown Preview Enhanced」を検索してインストール。
-
*.mdファイルを開き、Ctrl+Shift+Vでプレビュー表示。 - 「Toggle Table of contents」や「Preview in Browser」などのコマンドを使い、最終的にブラウザで確認。
2. Markable（ブラウザベースのオンラインツール）
特徴
- インストール不要で、ブラウザだけなら可能。JavaScript でリアルタイムに HTML を生成。
- 「Download」をクリックすると、生成済み HTML をダウンロードできる。
使い方
- Markable のサイト（markable.in）へアクセス。
- 左ペインに Markdown を入力、右ペインが即座に HTML を表示。
- 上部にある「Export」をクリックし、
*.htmlファイルを保存。
3. Dillinger（クラウド連携付き）
特徴
- GitHub、Dropbox、Google Drive でファイルを同期できる。
- Markdown を WYSIWYG で編集しつつ、右側で HTML を確認。
- 「Export」から多彩な形式（PDF、DOCX）にも変換可能。
使い方
- Dillinger のサイト（dillinger.io）へ。
-
*MDファイルをドラッグ＆ドロップするか、新規作成。 - 右上の「Export」メニューから「HTML」を選択し、保存。
4. StackEdit（オフライン・オンラインどちらも）
特徴
- Chrome 拡張機能としても利用できる。
-
syncボタンで Google Drive や Dropbox と連携。 - タイトル、メタデータを埋め込むことで、ブログエンジン（WordPress 等）へ直接貼り付けられる。
使い方
- StackEdit を公式サイトから起動。
- 左側のメニューで「File」→「New」またはドラッグ。
- プレビューは右側に表示。
- 「Export」→「HTML」をクリックし、ローカル保存。
5. Markdown Live Preview（Node.js で動く CLI ツール）
特徴
- コマンドラインから即座に変換。
- ファイル変更を監視して自動再生成。
- Express を使ってローカルサーバーにマウントすることで、リアルタイムブラウズも可能。
使い方
- Node.js をインストール。（公式サイトより）。
-
npm install -g markdown-live-previewでインストール。 - 変換したいファイルのディレクトリへ移動し、
mdlive <ファイル名>。 - ブラウザで表示URLを開くと、HTML が確認できる。
6. Pandoc（マルチフォーマット変換器）
特徴
- 非常に強力なコマンドラインツール。
- Markdown → HTML だけでなく、Docx、LaTeX、PDF など多方向に変換可能。
- 自作のスタイルシート（CSS）やテンプレートを指定し、見た目を自由にカスタマイズできる。
使い方
- Pandoc を公式サイトからインストール。
- コマンドプロンプトで
pandoc input.md -o output.htmlと入力。 - オプション
--css=style.cssや--standaloneで独立した HTML を作成。
7. GitHub Pages + Jekyll（静的サイト生成）
特徴
- Markdown ファイルを GitHub に push するだけで、Jekyll が自動で HTML へ変換。
- CSS テーマやプラグインを使い、サイト全体のデザインを統一。
- 変更をプッシュする度に CDN 上で更新され、即時にアクセス可能。
使い方
- GitHub のリポジトリを作成し、
README.mdなど Markdown ファイルを追加。 - リポジトリ設定で「GitHub Pages」を有効化。
-
_config.ymlで Jekyll の設定を行い、テーマやプラグインを追加。 - Push すると自動で HTML が生成され、GitHub Domains で公開。
8. Remarkable（デスクトップアプリ）
特徴
- Windows/Mac/Linux で動くクロスプラットフォームアプリ。
- Markdown ファイルをドラッグ＆ドロップで読み込み、右側に HTML プレビュー。
- 高度なマークダウン（表、コードブロック）も対応。
使い方
- Remarkable の公式サイトからインストール。
- アプリ起動後、Markdown ファイルをドラッグ。
- 「Export」→「HTML」を選択し、保存。
9. Typora（シンプルな WYSIWYG エディタ）
特徴
- エディタ内で直接 HTML として表示される「隠しモード」あり。
- CSS で見た目を自作し、印刷等に最適化。
- 画像やリンク、図表も埋め込みやすい。
使い方
- Typora を公式サイトからダウンロード。
-
*.mdファイルを開き、編集。 - 「ファイル」→「エクスポート」→「HTML」で保存。
10. Convertify（ブラウザ・CLI 両方対応）
特徴
- オープンソースの Python ライブラリ、
markdownをベースにしたツール。 - バッチ処理で複数ファイルを一括変換。
- Web UI でも利用可能な簡易インタフェース。
使い方
- Python がインストールされていれば、
pip install markdown。 -
convertify *.md -o output_dirで一括変換。 - コマンドラインの
-pオプションで HTML プレビューを自動起動。
まとめ
- まずは自分の作業環境に合わせて選択。VS Code の拡張機能や Pandoc はローカルで高速に変換でき、StackEdit や Dillinger はクラウド連携が便利。
- デザインにこだわりたい場合は Jekyll や Typeora で HTML をさらにカスタマイズ。
- バッチ処理や自動化が必要なら Pandoc や Convertify をスクリプトに組み込むと効率アップ。
Markdown → HTML は一度きりの変換作業ではなく、継続的に記事を更新していくフローの中で大きく影響します。
この記事を参考に、自分のワークフローに最も合ったツールを見つけて、スムーズな投稿を実現してください。
コメント