初めに
こんにちは株式会社BFT名古屋支店新人エンジニアのないとうです。
最近Markdownを使って記述する機会がにわかに増えています。
しかし、メモ帳等の通常のテキストエディタで表示した場合、Markdownで記述した内容がそのまま表示されてしまいます。
ですのでMarkdownに対応しているエディタやブラウザで設定を行って内容を確認する必要があります。
自分で見る分にはそれで十分ですが、他の方に見てほしい場合は設定やエディタのインストールがなくても見られる形式にした方が良いと思われます。
そこで今回はMarkdownで記載したファイルをHTMLで出力する方法を紹介したいと思います。
目次
MarkdownのファイルをHTMLで出力する方法
MarkdownのファイルをHTMLで出力する方法として以下の方法があります。
- Markdownエディタに搭載されている機能を使う
- 変換ツールを使う
エディタ、ツールともに多くの種類がありますが今回は
- Visual Studio Codeを使う方法
- Pandocを使う方法
の2つを紹介したいと思います。
Visual Studio Codeを使う方法
Visual Studio Codeの拡張機能である、Markdown All in Oneを用いて変換を行います。
この拡張機能はVisual Studio CodeでMarkdownのプレビュー機能やショートカットキーによる編集の補助機能を追加します。
また今回は使用していませんが、ユーザー設定を変更することで自動でPDFやHTMLに変換する機能やCSSを設定することで出力されたときの見た目を調整することができます。
Markdown All in Oneの追加
Visual Studio Codeに拡張機能を追加する方法を紹介します。
①サイドメニューにある拡張機能を押下する。
②検索欄に「Markdown」と入力しMarkdown All in Oneのインストールを押下する
HTMLで出力する
インストールした拡張機能でファイルをHTMLで出力する方法を紹介します。
①編集画面で右クリックをして画像赤枠の「Markdown~」を押下しプレビューを起動する
②プレビュー画面上で右クリックをし「HTML」→「HTML（offline）」を押下する
変換されたことを確認する
画像のようにMarkdownのファイルが存在するフォルダ内に同じファイル名のHTMLファイルが作成されます。
作成されたHTMLファイルを開くとプレビューで表示された内容と同じ内容がブラウザ上に表示されます。
Visual Studio CodeでのHTML出力まとめ
- 機能のインストール、HTML出力が画面上で簡単に出来る
- 見た目の変更は既存のCSSを変更する必要があるため知識が必要
Pandocを使う方法
PandocはCLI上で拡張子の変更ができるツールで、オプションを指定することで目次を追加したり、CSSやテンプレートを適用することができます。
このテンプレートは、gitなどで無料で公開されているので簡単に手に入れられます。
Pandocのインストール
Pandocのインストール方法を紹介します。
①Pandocは下記URLのgitからインストーラーをダウンロードし、インストーラーの画面に従ってインストールを行う
②コマンドラインで「pondoc -v」と入力し画像のように情報が出力されインストールされていることを確認する
HTMLで出力する
Pandocを使用してHTMLで出力する方法を紹介します。
①コマンドプロンプトで以下のコマンドを入力する
pandoc -f markdown -t html ".mdファイルのパス" > "出力先のパス"
こちらもVisual Studio Codeの時と同様に出力先のパスに指定した場所にHTMLファイルが作成されていると思います。
オプションを使ってHTMLで出力する
コマンドで出力する際にPandocではオプションを指定することでCSSやテンプレートを使用したり、目次を追加したりすることができます。
以下の表によく使われるオプションをまとめました。
| オプション | 効果 |
|---|---|
| -f | 出力元フォーマット指定 |
| -t | 出力先フォーマット指定 |
| -c | CSSファイルの適用 |
| --toc | 目次の追加 |
| --template=FILE名 | テンプレートの使用 |
これらのオプションを使用して以下のコマンドでHTMLを出力することができます。
#テンプレートを使用する場合 pandoc -f markdown -t html --toc --template="テンプレートファイルのパス" ".mdファイルのパス" > "出力先のパス" #CSSを使用する場合 pandoc -f markdown -t html --toc -c "CSSファイルのパス" ".mdファイルのパス" > "出力先のパス"
前述したようにCSSで見た目を調整する場合は知識が必要ですが、テンプレートは下記サイトのように無料で公開されているものを使用して見た目を調整することができます。
実際にテンプレートを使うと見た目が大きく変わるので、ぜひ試してみてください。
PandocでのHTML出力まとめ
- コマンドでHTML出力が可能
- オプションを指定することで目次の作成や、見た目の変更が可能
- テンプレートは配布されているので、見た目の変更が簡単に出来る
最後に
今回MarkdownファイルをHTMLに変換する方法を紹介しました。
どちらも同様の方法でHTMLの他にPDFにも変換が可能なので、試してみてください。
個人的にはテンプレートを用いて見た目の変更が簡単に出来るPandocを使った方法が好みです。
しかし、紹介した方法以外にも変換する方法ありますので使いやすいものありましたらまた紹介したいと思います。
それでは。
