Markdown を HTML に変換する方法：完全ガイド

2026-07-25· タグ: markdown-to-html, markdown-converter, static-site-generator, jekyll-markdown, markdown-processing

Markdown を HTML に変換する方法

Markdown は執筆用に設計されていますが、ウェブは HTML で動作します。ブラウザーが表示する前に、すべての Markdown ドキュメントを HTML に変換する必要があります。このガイドでは、Markdown を HTML に変換する主な方法を説明します。

方法 1：コマンドラインツール

Pandoc

Pandoc は、数十種類の形式に対応する汎用ドキュメント変換ツールです。

# 基本的な変換
pandoc input.md -o output.html

# <html> と <body> タグを含むスタンドアロン HTML
pandoc input.md -o output.html -s

# 目次付き
pandoc input.md -o output.html -s --toc

Python-Markdown

pip install markdown
python -m markdown input.md > output.html

import markdown
with open("input.md", "r") as f:
    text = f.read()
html = markdown.markdown(text, extensions=["fenced_code", "tables"])

CommonMark（JavaScript）

npm install commonmark

const commonmark = require("commonmark");
const reader = new commonmark.Parser();
const writer = new commonmark.HtmlRenderer();
const parsed = reader.parse("# Hello\nThis is **bold**.");
const html = writer.render(parsed);

方法 2：静的サイトジェネレーター

Jekyll

Jekyll は GitHub Pages を支えています。_posts やコレクションの Markdown ファイルを HTML に変換します。

gem install jekyll bundler
jekyll new my-site
jekyll build
jekyll serve

動的なコンテンツには、Liquid テンプレートとともに Kramdown プロセッサーを使用します。

Hugo

Hugo は、ミリ秒単位のビルド速度で知られる Go 製の静的サイトジェネレーターです。

hugo new site my-site
hugo new posts/my-first-post.md
hugo server -D

デフォルトの Markdown レンダラーとして Goldmark を使用し、テーブル、フェンス付きコードブロック、脚注に対応しています。

Next.js（MDX）

Next.js は MDX をサポートしており、Markdown 内に React コンポーネントを埋め込むことができます。

npm install next @next/mdx @mdx-js/loader

MDX を使うと、ドキュメントに動作するコード例、チャート、フォームを組み込めます。

方法 3：オンライン変換ツール

ツールをインストールせずに一度だけ変換する場合、ブラウザーベースの変換ツールで即座に結果が得られます：

エディターパネルに Markdown を貼り付けるか入力します。
HTML 出力がリアルタイムで表示されます。
生成された HTML をコピーして、任意のウェブページや CMS で使用します。

Markdown プレビューツールは、GitHub Flavored Markdown（テーブル、コードブロック、タスクリスト、取り消し線）をすべてブラウザー内で処理します。

方法 4：エディタープラグイン

| エディター | 機能 | コマンド | |--------|---------|---------| | VS Code | 内蔵プレビュー | Ctrl+Shift+V | | Sublime Text | MarkdownPreview | Alt+M | | IntelliJ IDEA | 内蔵サポート | Quick Documentation | | Vim | vim-markdown | :MarkdownPreview |

処理パイプライン

静的サイトジェネレーターが Markdown を HTML に変換するとき、次のパイプラインに従います：

Markdown → Parse to AST → Apply extensions → Render to HTML → Apply template → Output page

機能が期待どおりにレンダリングされない場合、問題は通常、パーサー（構文をサポートしていない）またはレンダラー（予期しない HTML を出力する）にあります。

Markdown を HTML にオンライン変換

Markdown プレビューツールを使えば、Markdown を HTML に即座に変換できます。エディターに Markdown を入力または貼り付けると、レンダリングされたプレビューがリアルタイムで更新されます。