VSCodeでMarkdownをHTML化する方法

VSCodeを使うと、MarkdownファイルをHTML形式に自動変換できます。
この記事では、自動変換の意義とVSCodeを利用するメリットについて軽く触れた後で、具体的な利用方法について解説します。

MarkdownからHTMLへの自動変換の意義

Markdownはシンプルな記法で構造化された文書を書くことができる方法の一つで、以下のような利点があります。

(ほぼ)いつでもどこでも書ける
レイアウトやスタイルを考えなくてよい
GitHubやQiitaなど、様々なプラットフォームでいい感じに変換して表示してくれる
テキストなので差分管理できる

一方で、ウェブページとして利用したりブラウザで表示する際は、通常はMarkdownファイルではなくHTMLファイルを利用します。
したがって、MarkdownからHTMLに自動変換できれば、Markdownで作成した文章をウェブページに簡単に展開することが可能となります。

VSCodeを利用するメリット

VSCodeは柔軟かつ拡張性の高いテキストエディタであり、Windows、macOS、Linuxなど、様々な環境で同様に利用できます。
VSCodeはMarkdownの編集にも適しており、拡張機能として以下のような機能も追加できます。

リアルタイムでMarkdownをHTMLに変換してプレビューする機能
MarkdownをHTML形式で出力する機能

そのため、Markdownの編集やHTMLへの変換を効率的に行って素早くコンテンツを作成するのに適したツールだと思います。
（他のテキストエディタもいろいろ試しましたが、使用感もいいしmermaidで作図できるし、結局VSCodeに落ち着きました）

具体的な利用方法

初期設定

以下の手順でVSCodeによるプレビュー機能と出力機能が利用できるようになります。
（Windows10での手順を記載していますので、Mac等の方ぜんぜん違ったらごめんなさい！）

VSCodeをインストールする
- VSCodeのダウンロードページでインストーラをダウンロード
  - OSに合ったインストーラを選ぶ
- ダウンロードしたインストーラを実行する
拡張機能をインストールする
- VSCodeを起動し、ctrl+shift+Xで拡張パッケージの検索欄を表示する
- そこから以下を検索してInstallボタンを押す
  - markdown PDF
    - 出力機能
  - Markdown Preview Mermaid Support
    - プレビュー機能。mermaidで書かれた図もプレビューできます
    - mermaidについては【mermaid】markdownのドキュメントに図を描く方法をご覧ください～
  - Mermaid Markdown Syntax Highlighting
    - mermaidをMarkdownファイル内で書いたときに、シンタックスハイライトをしてくれます
Markdownファイルを開く
- テキストファイルの拡張子を.mdにして、VSCodeのウィンドウにDnDすれば開ける
- このタイミングでポップアップが出る気がしますが、OKで大丈夫です（何のポップアップかは忘れました）
プレビュー機能の初期設定をする
- ctrl+K ctrl+T を押すと現れるリストの中からLight Modernを選択する
  - 黒背景だとプレビューで文字が見えなかった気がします
  - もしかしたらそのうち黒背景でも問題なく表示されるようになるかも
- 開いてあるMarkdownファイルのウィンドウのどこかをクリックしてをアクティブにし、ctrl+shift+Vを押すとプレビューが表示される
出力機能の初期設定をする
- ctrl+shift+Pで開いた検索窓でMarkdown PDF: Export (html)を検索し、その歯車マークを左クリックする
- Keybindingの欄を左ダブルクリックする
- ショートカットキーにしたいキーを押して、Enterで確定する。
  - デフォルトで指定されているキーが多いので結構被る。ctrl+shift+/とかだと大丈夫だった気がします
- 開いてあるMarkdownファイルのウィンドウのどこかをクリックしてをアクティブにし、設定したショートカットキーを押すと、Markdownファイルと同じディレクトリにHTMLファイルが出力される

普段の利用方法

テキストファイルを開く
- 画面内にDnD
ファイルを編集する
- 一般的なエディタと同じ
プレビューを表示する
- プレビューしたいファイルのウィンドウをアクティブにし、ctrl+shift+Vを押す
  - 別の方法として、ウィンドウ右上の「ウィンドウに虫眼鏡マーク」を押すことで表示できます
Markdownファイルを上書き保存する
- ctrl+S
HTML形式で出力する
- 初期設定時に設定したショートカットキーを押す

VSCodeのそのほかの拡張機能

初めての人は以下を入れるとよさそうです。

Japanese Language Pack for VS Code

日本語にできます。
初期設定は以下。
- インストールする (ctrl+shift+X → 検索)
- ctrl+shift+Pで開いた検索窓でconfigure display languageを検索し、日本語を設定する

まとめ

VSCodeを使ったMarkdown→HTMLへの自動変換について紹介しました。
VSCodeもMarkdown使い勝手良いので、ぜひ使ってみてください～

Share!

In this article