MarkdownからHTMLへの変換方法とツール比較

MarkdownをHTMLに変換する方法を解説。オンラインツール、コマンドラインツール、プログラミングライブラリの比較と、実用的な変換テクニック。

Markdownとは

Markdown（マークダウン）は、2004年にJohn Gruberが考案した軽量マークアップ言語です。プレーンテキストで書いた文書を、簡単にHTMLに変換できるのが特徴です。

Markdownが使われる場所

サービス・ツール	用途
GitHub	README、Issue、PR
Qiita / Zenn	技術記事
Notion	ドキュメント
Slack	メッセージ装飾
WordPress	記事執筆
Hugo / Astro / Gatsby	静的サイト生成
Jupyter Notebook	ドキュメントセル

Markdownの利点

読みやすい — HTMLタグを書かなくても構造化された文書が書ける
書きやすい — 記号だけで見出し・リスト・太字等を表現
汎用的 — ほとんどの開発ツール・サービスが対応
テキストベース — Git での差分管理が容易
変換が容易 — HTML、PDF、DOCX等に変換可能

Markdown記法の基礎

基本的な記法

# 見出し1（H1）
## 見出し2（H2）
### 見出し3（H3）

**太字**
*斜体*
~~取り消し線~~

- リスト1
- リスト2
  - ネストリスト

1. 番号リスト1
2. 番号リスト2

[リンクテキスト](https://example.com)
![画像の代替テキスト](image.png)

> 引用文

`インラインコード`

```javascript
// コードブロック
console.log("Hello");
```

| 列1 | 列2 |
|-----|-----|
| A   | B   |

変換後のHTML

上記のMarkdownは以下のようなHTMLに変換されます。

<h1>見出し1（H1）</h1>
<h2>見出し2（H2）</h2>
<h3>見出し3（H3）</h3>

<p><strong>太字</strong></p>
<p><em>斜体</em></p>
<p><del>取り消し線</del></p>

<ul>
  <li>リスト1</li>
  <li>リスト2
    <ul>
      <li>ネストリスト</li>
    </ul>
  </li>
</ul>

方法1: オンラインツールで変換

主要なオンライン変換ツール

ツール	特徴	リアルタイムプレビュー
Dillinger	シンプルで使いやすい	○
StackEdit	高機能エディタ	○
Markdownify	HTML→Markdown逆変換	○
HackMD / CodiMD	共同編集対応	○

オンラインツールの使い方

ブラウザでツールにアクセス
左ペインにMarkdownを入力
右ペインでHTMLプレビューを確認
HTMLソースをエクスポート

方法2: コマンドラインツールで変換

Pandoc（万能変換ツール）

Pandocは「ドキュメント変換のスイスアーミーナイフ」と呼ばれる万能ツールです。

# インストール
# macOS
brew install pandoc
# Ubuntu
sudo apt install pandoc

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

# スタンドアロンHTML（headを含む完全なHTML）
pandoc -s input.md -o output.html

# CSSを適用
pandoc -s --css=style.css input.md -o output.html

# 目次を自動生成
pandoc -s --toc input.md -o output.html

# テンプレートを使用
pandoc --template=template.html input.md -o output.html

Pandocの主な出力形式

形式	コマンド
HTML	`pandoc input.md -o output.html`
PDF	`pandoc input.md -o output.pdf`
DOCX	`pandoc input.md -o output.docx`
EPUB	`pandoc input.md -o output.epub`
LaTeX	`pandoc input.md -o output.tex`
プレゼン（reveal.js）	`pandoc -t revealjs -s input.md -o slides.html`

marked（Node.js CLI）

# インストール
npm install -g marked

# 変換
marked input.md -o output.html

# 標準入力からの変換
echo "# Hello" | marked

方法3: プログラミングライブラリで変換

JavaScript — marked

import { marked } from 'marked';

const markdown = '# Hello World\n\nThis is **bold** text.';
const html = marked(markdown);
console.log(html);
// <h1>Hello World</h1>
// <p>This is <strong>bold</strong> text.</p>

JavaScript — markdown-it

import MarkdownIt from 'markdown-it';

const md = new MarkdownIt();
const html = md.render('# Hello World');

Python — markdown

import markdown

md_text = "# Hello World\n\nThis is **bold** text."
html = markdown.markdown(md_text)
print(html)

Python — mistune

import mistune

markdown = mistune.create_markdown()
html = markdown("# Hello World")

各ライブラリの比較

ライブラリ	言語	速度	GFM対応	拡張性
marked	JS	高速	○	○
markdown-it	JS	中速	○	◎
remark	JS	中速	○	◎
Python-Markdown	Python	中速	○	◎
mistune	Python	高速	○	○

GitHub Flavored Markdown（GFM）

GitHub Flavored Markdown（GFM）は、GitHubが拡張した Markdown 方言です。標準Markdownにない機能が追加されています。

GFMの拡張記法

機能	記法	標準Markdown
テーブル	`\| 列1 \| 列2 \|`	×
タスクリスト	`- [ ] TODO`	×
取り消し線	`~~text~~`	×
自動リンク	`https://example.com`	×
シンタックスハイライト	```js	×
脚注	`[^1]`	×

HTMLからMarkdownへの逆変換

HTMLをMarkdownに変換する「逆変換」も可能です。

Turndown（JavaScript）

import TurndownService from 'turndown';

const turndown = new TurndownService();
const markdown = turndown('<h1>Hello</h1><p>World</p>');
console.log(markdown);
// # Hello
//
// World

html2text（Python）

import html2text

h = html2text.HTML2Text()
h.body_width = 0  # 折り返しなし
markdown = h.handle("<h1>Hello</h1><p>World</p>")

静的サイトジェネレーターでの活用

多くの静的サイトジェネレーターは、Markdownを自動的にHTMLに変換してWebページを生成します。

SSG	言語	Markdownエンジン
Astro	JS	remark + rehype
Next.js	JS	MDX / remark
Hugo	Go	Goldmark
Gatsby	JS	remark
Jekyll	Ruby	kramdown
11ty	JS	markdown-it

よくある質問

Q: Markdownで数式は書ける？

はい。KaTeXやMathJaxを使えばLaTeX記法で数式を表現できます。

$$E = mc^2$$

Q: MarkdownでHTMLタグは使える？

ほとんどのMarkdownパーサーは、Markdown内にHTMLタグを直接書くことを許可しています。

# 見出し

<div style="color: red;">
  これはHTMLで書いた部分です。
</div>

通常のMarkdownに戻ります。

Q: ChatGPTの出力にあるMarkdown記号を消したい

ChatGPTやClaudeの出力にはMarkdown記法（**太字**、- リスト等）が含まれることがあります。これをプレーンテキストに変換したい場合は、Markdown除去ツールが便利です。

まとめ

Markdown→HTML変換の方法は目的によって選びましょう。

手軽に変換 → オンラインエディタ（Dillinger等）
ファイル変換 → Pandoc（コマンドライン）
プログラム内 → marked / markdown-it（JS）、Python-Markdown
サイト構築 → 静的サイトジェネレーター（Astro、Hugo等）

Markdownの記号（** # - 等）を除去してプレーンテキストにしたい場合は AssistyのMarkdown除去ツール をご利用ください。ChatGPTの出力をきれいにする際にも便利です。