md2html-mcp

Markdown を「読みやすい HTML 文書」に変換する MCP（Model Context Protocol）サーバーです。 Claude などの AI アシスタントに追加すると、会話の中で Markdown を渡すだけで、そのままブラウザで開けるきれいな HTML ファイルを作ってくれます。

1. Claude Code への登録

ターミナルで次の 1 行を実行するだけで登録できます。

claude mcp add md2html -- npx -y md2html-mcp

npx が npm から必要なものを自動でダウンロードして起動します。登録できたか確認します。

claude mcp list

一覧に md2html が表示されれば準備完了です。すでに起動中の Claude Code があれば、 一度終了して立ち上げ直すと認識されます。

2. 使い方

登録できたら、あとは AI にお願いするだけです。ツールは AI が自動で呼び出します。

例1: いま書いた Markdown を HTML にする

このMarkdownを読みやすいHTMLにして。
（続けて Markdown を貼り付ける）

例2: 手元の .md ファイルを変換する

~/docs/仕様書.md をHTMLに変換して。

変換が終わると、AI が保存先のファイルパスを教えてくれます。そのファイルをブラウザで開けば完成です。

例3: 見た目を指定する

このREADMEをHTMLにして。本文はもう少し広め（1000px）で、コードの色分けはオンのままでいい。

「テーマを暗く」「目次はいらない」「数式も表示して」のように、普通の言葉で注文できます。 指定できる項目は次の「オプション一覧」を参照してください。

3. オプション一覧

AI への指示で、次の項目を調整できます（指定しなければ既定値が使われます）。

| 指定できること | 値 | 既定 | 説明 | |----------------|----|------|------| | テーマ | light / dark | light | 配色 | | 目次 | オン / オフ | オン | 見出しからサイドバー目次を生成 | | コードの色分け | オン / オフ | オン | プログラムコードを言語別に色分け | | 図（Mermaid） | オン / オフ | オン | mermaid ブロックを図として描画 | | 数式（KaTeX） | オン / オフ | オン | $...$ / $$...$$ を数式表示 | | 画像の埋め込み | オン / オフ | オン | ローカル画像をファイル内に取り込む | | 本文の幅 | 数値（px） | 800 | 読みやすさのための最大幅 | | フォント | フォント名 | 端末標準フォント | 本文・見出しのフォント。未指定なら閲覧端末の標準フォントを使用（フォント本体は埋め込まない） | | タイトル | 任意の文字列 | 先頭の見出し | ブラウザのタブ名とページタイトル。未指定ならフロントマターの title → 先頭の H1 → Document の順で自動決定 |

4. 提供している機能（ツール）

AI が状況に応じて自動で使い分けます。ふだんは意識する必要はありません。

| ツール | 役割 | |--------|------| | convert_markdown_to_html | 会話中の Markdown を HTML ファイルにして保存 | | convert_markdown_file | 手元の .md ファイルを読み込み、隣に .html を生成 | | preview_html | 保存せずに HTML の中身だけを確認 |

5. 開発者向け

ソースから動かす・改造する場合は、リポジトリを取得して依存を入れます。 npm install の際に prepare（= tsc）が走り、dist/ も自動でビルドされます。

git clone https://github.com/sakes9/md2html-mcp.git md2html
cd md2html
npm install            # 依存のインストール + ビルド

npm run setup:hooks    # git フック（lefthook）を入れる（任意）
npm run test:convert   # 付属サンプルを変換して examples/sample.html を生成

ローカルビルドを直接登録する場合は、パッケージ名の代わりに node /path/to/md2html/dist/index.js を指定します。 npm への公開（配布）手順は docs/npm-distribution.md を参照してください。 GitHub から直接インストールさせる別方式は docs/distribution.md にあります。

6. 登録を外す

Claude Code から登録を削除するには次を実行します。

claude mcp remove md2html