VS CodeのMarkdownをHTMLに変換する方法

2026年10月26日

VS Codeでは、Markdownファイルを標準機能で編集・プレビューできます。

ただし、MarkdownプレビューとHTMLファイルへの変換は別の機能です。

VS Code標準機能ではMarkdownの表示確認はできますが、通常の.htmlファイルとして書き出したい場合は、PandocやVS Code拡張機能などを利用する必要があります。

ここでは、VS CodeでMarkdownをHTMLに変換する代表的な方法を詳しく解説します。

VS Code標準機能でMarkdownをプレビューする

Markdownファイルを作成する

まず、VS CodeでMarkdownファイルを作成します。

例えば、次のようなファイルです。

sample.md

ファイルの内容は、次のように記述できます。

# サンプルページ

これはMarkdownで書かれた文章です。

## 見出し

- 項目1
- 項目2
- 項目3

[OpenAI](https://openai.com/)

拡張子を.mdにすると、VS CodeがMarkdownファイルとして認識します。

Markdownプレビューを表示する

Markdownファイルを開いた状態で、WindowsやLinuxでは次のショートカットを使用します。

Ctrl + Shift + V

macOSでは次のショートカットです。

Shift + Command + V

Markdownのレンダリング結果がVS Code内に表示されます。

編集画面とプレビューを横に並べたい場合は、WindowsやLinuxでは次のキーを順番に押します。

Ctrl + K
V

macOSでは次の操作です。

Command + K
V

Markdownを編集するとプレビューにも反映されるため、変換前の内容確認に便利です。

MarkdownプレビューとHTML変換は別物

ここで注意したいのは、VS CodeのMarkdownプレビューを表示しても、HTMLファイルが作成されるわけではないことです。

Markdownプレビューは、Markdownの内容をVS Code内部でレンダリングして確認するための機能です。

例えば、

sample.md

をプレビューしても、

sample.html

が自動的に生成されるわけではありません。

HTMLファイルとして保存したい場合は、別の変換処理が必要です。

Pandocを使ってMarkdownをHTMLに変換する

Pandocとは

MarkdownをHTMLへ変換する代表的な方法の一つがPandocです。

Pandocは、Markdown、HTML、Word、LaTeXなど、さまざまな文書形式を相互変換できるCLIツールです。

MarkdownからHTMLへの変換だけでなく、CSSの適用や目次の生成などにも対応しているため、本格的な文書変換に向いています。

Pandocが利用できるか確認する

Pandocをインストールしたら、VS Codeの統合ターミナルで次のコマンドを実行します。

pandoc --version

Pandocのバージョン情報が表示されれば利用できます。

コマンドが見つからない場合は、Pandocがインストールされていないか、PATHが正しく設定されていない可能性があります。

MarkdownをHTMLへ変換する

例えば、

sample.md

を、

sample.html

へ変換する場合は、次のコマンドを使用します。

pandoc sample.md -o sample.html

-oは出力先ファイルを指定するオプションです。

これにより、Markdownの内容がHTMLへ変換されます。

完全なHTML文書として出力する

-sまたは–standaloneを使用する

Pandocで単純に変換した場合、HTMLの一部分だけが生成されることがあります。

ブラウザーでそのまま開ける完全なHTML文書を作成したい場合は、-sを指定します。

pandoc sample.md -s -o sample.html

-sは次のオプションの短縮形です。

--standalone

そのため、次のように記述しても同じ意味になります。

pandoc sample.md --standalone -o sample.html

standalone形式では、html、head、bodyなどを含む独立したHTML文書が生成されます。

通常のWebブラウザーで開くHTMLを作りたい場合は、-sを付ける方法が分かりやすいでしょう。

入力形式と出力形式を明示する

-fと-tを指定する

Pandocでは、入力形式と出力形式を明示できます。

pandoc sample.md -f markdown -t html -s -o sample.html

それぞれの意味は次のとおりです。

-f markdown

入力形式をMarkdownに指定します。

-t html

出力形式をHTMLに指定します。

-s

standalone形式のHTMLを生成します。

-o sample.html

出力先ファイルを指定します。

ただし、通常は.mdや.htmlといった拡張子からPandocが形式を判断できるため、次のような短いコマンドでも問題ありません。

pandoc sample.md -s -o sample.html

Markdownの種類を指定して変換する

Pandoc MarkdownとGFMは完全には同じではない

Markdownには複数の仕様があります。

代表的なものには、次のような種類があります。

Pandoc Markdown
CommonMark
GitHub Flavored Markdown
VS CodeのMarkdownプレビュー

これらは基本的な記法は似ていますが、すべての挙動が完全に一致するわけではありません。

例えば、GitHub Flavored Markdownに近いMarkdownを変換したい場合は、次のように入力形式を指定できます。

pandoc sample.md -f gfm -t html -s -o sample.html

表やタスクリストなど、Markdown拡張記法を多く使用している場合は、入力形式の違いに注意しましょう。

CSSを適用してHTMLへ変換する

CSSファイルを用意する

MarkdownをそのままHTMLに変換すると、デザインは比較的シンプルです。

見た目を整えたい場合はCSSを指定できます。

例えば、次のようなファイル構成にします。

project/
├─ sample.md
└─ style.css

style.cssには、例えば次のように記述します。

body {
  max-width: 800px;
  margin: 40px auto;
  font-family: sans-serif;
  line-height: 1.8;
}

h1 {
  border-bottom: 2px solid #333;
}

h2 {
  margin-top: 40px;
}

PandocでCSSを指定する

CSSを指定してHTMLへ変換する場合は、次のようにします。

pandoc sample.md -s -c style.css -o sample.html

-cを使うことで、HTMLから参照するCSSファイルを指定できます。

Webページとして利用したい場合は、CSSを設定すると読みやすいデザインにできます。

目次付きHTMLを作成する

–tocを使用する

Markdownの記事が長い場合は、目次を自動生成できます。

pandoc sample.md -s --toc -o sample.html

CSSと組み合わせる場合は、次のようにします。

pandoc sample.md -s --toc -c style.css -o sample.html

Markdown内の見出し構造をもとに目次が作られるため、長いドキュメントやマニュアルなどに便利です。

CSSや画像をHTML内に埋め込む

–embed-resourcesを使用する

HTMLファイルだけを他の人へ渡したい場合、CSSや画像などの外部ファイルがあると扱いにくいことがあります。

例えば通常は、

sample.html
style.css
images/

のように複数ファイルが必要になることがあります。

Pandocでは、--embed-resourcesを使うことでCSSや画像などのリソースをHTML内へ埋め込めます。

pandoc sample.md --embed-resources -c style.css -o sample.html

これにより、外部ファイルへの依存を減らした自己完結型のHTMLを作成できます。

-sを追加しても問題ない

次のように-sを併記することもできます。

pandoc sample.md -s --embed-resources -c style.css -o sample.html

ただし、現在のPandocでは--embed-resourcesを使用するとstandalone HTMLとして処理されるため、必ずしも-sを別途指定する必要はありません。

明示的にstandalone形式であることを分かりやすくしたい場合は、併記しても問題ありません。

VS Code拡張機能でMarkdownをHTMLに変換する

拡張機能を使うメリット

Pandocは高機能ですが、基本的にはターミナルからコマンドを実行します。

コマンド操作を避けたい場合は、VS Codeの拡張機能を利用する方法もあります。

拡張機能を使えば、右クリックやコマンドパレットからHTMLへ書き出せる場合があります。

Markdown PDFを使ってHTMLへ変換する

Markdown PDFはHTML出力にも対応している

「Markdown PDF」というVS Code拡張機能は、名前にPDFと付いていますが、HTMLへのエクスポートにも対応しています。

Markdownファイルを開いて、

markdown-pdf: Export (html)

を実行すると、HTMLとして出力できます。

基本的な流れは次のとおりです。

VS Codeを開く
↓
Extensionsを開く
↓
Markdown PDFを検索する
↓
インストールする
↓
Markdownファイルを開く
↓
右クリックまたはコマンドパレットを開く
↓
Export (html)を実行する

コマンドを入力せずにHTMLを書き出したい場合に便利です。

保存時の自動変換にも対応している

Markdown PDFでは設定によって、Markdownを保存したときに自動変換させることもできます。

例えば、設定に次の項目があります。

"markdown-pdf.convertOnSave": true

頻繁にMarkdownを修正してHTMLへ書き出す場合は便利です。

Markdown to HTML系の拡張機能を使う

HTML変換に特化した拡張機能もある

VS Code Marketplaceには、MarkdownをHTMLへ変換することに特化した拡張機能も公開されています。

例えば「Markdown to HTML」のような拡張機能では、

Markdown to HTML: Convert to HTML

などのコマンドからMarkdownをHTMLへ変換できます。

保存時にHTMLを再生成する自動更新機能を持つものもあります。

ただし、VS Code拡張機能は開発状況や仕様が変更される可能性があります。

インストールする前に、Marketplaceで対応機能や更新状況を確認するとよいでしょう。

VS Codeのプレビューに近いHTMLを作る

Pandocの出力はVS Codeプレビューと同じとは限らない

PandocでMarkdownをHTMLへ変換しても、VS CodeのMarkdownプレビューと完全に同じデザインになるとは限りません。

VS CodeとPandocでは、Markdownの解析方法やCSSが異なるためです。

特に次のような記法では差が出ることがあります。

テーブル
脚注
数式
タスクリスト
独自Markdown拡張
HTML混在

VS Codeのプレビューに近い見た目でHTMLを保存したい場合は、プレビュー結果をエクスポートするタイプの拡張機能を検討するとよいでしょう。

生成したHTMLをVS Codeで確認する

Integrated Browserを使用する

HTMLへ変換したら、生成されたファイルをVS Codeで確認できます。

例えば、

sample.html

をVS Codeで開き、右クリックして、

Open in Integrated Browser

を選択すると、VS Code内のブラウザーで表示できます。

これにより、

Markdownを編集
↓
PandocでHTMLへ変換
↓
HTMLをVS Code内で確認

という作業フローを作れます。

VS CodeのTaskでMarkdown変換を自動化する

tasks.jsonにPandocを登録する

Markdownを頻繁にHTMLへ変換する場合は、VS CodeのTaskとして登録すると便利です。

例えば、.vscode/tasks.jsonに次のように記述します。

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Markdown to HTML",
      "type": "shell",
      "command": "pandoc",
      "args": [
        "${file}",
        "-s",
        "-o",
        "${fileDirname}/${fileBasenameNoExtension}.html"
      ],
      "problemMatcher": []
    }
  ]
}

この設定では、現在開いているファイルをPandocへ渡します。

例えば、

article.md

を開いた状態でTaskを実行すると、

article.html

を同じフォルダーへ生成できます。

ただし、Markdown以外のファイルを開いている場合もTask自体は実行できるため、Markdownファイルをアクティブにしてから実行する必要があります。

npm scriptsで変換コマンドを管理する

package.jsonに登録する

Web制作プロジェクトなどでは、npm scriptsにPandocコマンドを登録する方法もあります。

例えば、package.jsonに次のように記述します。

{
  "scripts": {
    "build:html": "pandoc article.md -s -o article.html"
  }
}

その後、VS Codeの統合ターミナルで、

npm run build:html

を実行すればHTMLを生成できます。

複数人で作業する場合や、変換方法をプロジェクト内で統一したい場合にも便利です。

日本語MarkdownをHTMLへ変換するときの注意点

UTF-8で保存する

PandocはUTF-8を利用するため、日本語を含むMarkdownもUTF-8で保存しておくのが安全です。

VS Codeでは画面下部のエンコーディング表示から、現在の文字コードを確認できます。

通常はUTF-8で問題ありません。

Markdownの改行ルールに注意する

Markdownで、

文章A
文章B

と記述しても、必ずHTMLの<br>として処理されるとは限りません。

段落を分けたい場合は、

文章A

文章B

のように空行を入れるのが基本です。

HTML変換後の改行がおかしい場合は、Markdown側の記述も確認しましょう。

Markdown内の画像が表示されない場合

相対パスを確認する

Markdownに画像を記述している場合は、HTMLへ変換したあとも画像へのパスが正しくなければなりません。

例えば、

![サンプル画像](images/sample.png)

と記述している場合は、次のような構成が考えられます。

project/
├─ sample.md
├─ sample.html
└─ images/
   └─ sample.png

HTMLだけを別のフォルダーへ移動すると、相対パスが崩れて画像が表示されなくなることがあります。

HTML単体で共有したい場合は、--embed-resourcesを利用すると扱いやすくなります。

MarkdownをHTMLへ変換できない場合の原因

Pandocコマンドが見つからない

次のようなエラーが表示される場合があります。

pandoc is not recognized

または、

command not found: pandoc

この場合は、Pandocがインストールされていないか、PATHが通っていない可能性があります。

まず次のコマンドを確認します。

pandoc --version

バージョンが表示されなければ、Pandocのインストール状態を確認してください。

HTMLにデザインが付いていない

MarkdownをHTMLへ変換しただけでは、見た目がシンプルになることがあります。

これはエラーではありません。

デザインを整えたい場合はCSSを指定します。

pandoc sample.md -s -c style.css -o sample.html

VS Codeのプレビューと見た目が違う

VS CodeのMarkdownプレビューとPandocは、Markdown処理やCSSが同一ではありません。

そのため、変換結果の見た目が多少異なることがあります。

VS Code上で正常に表示されていても、Pandocでは一部のMarkdown記法の解釈が変わる場合があります。

VS CodeでMarkdownをHTMLに変換する方法の選び方

手軽さを重視するなら拡張機能

HTMLを数回書き出すだけであれば、VS Code拡張機能を使う方法が手軽です。

ターミナル操作が不要なので、初心者でも扱いやすいでしょう。

高機能さを重視するならPandoc

継続的にHTMLを生成する場合や、CSS、目次、画像埋め込みなどを利用したい場合はPandocが向いています。

例えば、基本的な変換は次のコマンドで行えます。

pandoc sample.md -s -o sample.html

CSSを追加するなら、

pandoc sample.md -s -c style.css -o sample.html

目次も追加するなら、

pandoc sample.md -s --toc -c style.css -o sample.html

CSSや画像をHTML内部へ埋め込みたい場合は、

pandoc sample.md --embed-resources -c style.css -o sample.html

を利用できます。

VS CodeでMarkdownをHTMLに変換する方法まとめ

VS CodeではMarkdownの編集とプレビューを標準機能で行えます。

ただし、MarkdownプレビューはHTMLファイルを書き出す機能ではありません。

実際に.htmlファイルを生成したい場合は、PandocやVS Code拡張機能を利用するのが基本です。

単純なHTML変換であれば、

pandoc sample.md -s -o sample.html

で対応できます。

見た目を整える場合はCSSを指定し、長い文書では--tocで目次を生成できます。

また、HTMLファイルだけで共有したい場合は--embed-resourcesを利用すると便利です。

一方、コマンド操作を避けたい場合は、Markdown PDFやMarkdown to HTMLなどの拡張機能を利用する方法があります。

Web制作や技術文書の作成で継続的にMarkdownをHTML化するのであれば、PandocとVS Code Taskを組み合わせて自動化すると効率的です。

以上、VS CodeのMarkdownをHTMLに変換する方法についてでした。

最後までお読みいただき、ありがとうございました。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

VS CodeのMarkdownをHTMLに変換する方法

採用はこちら

VS Code標準機能でMarkdownをプレビューする

Markdownファイルを作成する

Markdownプレビューを表示する

MarkdownプレビューとHTML変換は別物

Pandocを使ってMarkdownをHTMLに変換する

Pandocとは

Pandocが利用できるか確認する

MarkdownをHTMLへ変換する

完全なHTML文書として出力する

-sまたは–standaloneを使用する

入力形式と出力形式を明示する

-fと-tを指定する

Markdownの種類を指定して変換する

Pandoc MarkdownとGFMは完全には同じではない

CSSを適用してHTMLへ変換する

CSSファイルを用意する

PandocでCSSを指定する

目次付きHTMLを作成する

–tocを使用する

CSSや画像をHTML内に埋め込む

–embed-resourcesを使用する

-sを追加しても問題ない

VS Code拡張機能でMarkdownをHTMLに変換する

拡張機能を使うメリット

Markdown PDFを使ってHTMLへ変換する

Markdown PDFはHTML出力にも対応している

保存時の自動変換にも対応している

Markdown to HTML系の拡張機能を使う

HTML変換に特化した拡張機能もある

VS Codeのプレビューに近いHTMLを作る

Pandocの出力はVS Codeプレビューと同じとは限らない

生成したHTMLをVS Codeで確認する

Integrated Browserを使用する

VS CodeのTaskでMarkdown変換を自動化する

tasks.jsonにPandocを登録する

npm scriptsで変換コマンドを管理する

package.jsonに登録する

日本語MarkdownをHTMLへ変換するときの注意点

UTF-8で保存する

Markdownの改行ルールに注意する

Markdown内の画像が表示されない場合

相対パスを確認する

MarkdownをHTMLへ変換できない場合の原因

Pandocコマンドが見つからない

HTMLにデザインが付いていない

VS Codeのプレビューと見た目が違う

VS CodeでMarkdownをHTMLに変換する方法の選び方

手軽さを重視するなら拡張機能

高機能さを重視するならPandoc

VS CodeでMarkdownをHTMLに変換する方法まとめ

関連記事