35
48

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Pandocを使ってMarkdownを整形されたHTMLに変換する

Posted at

Markdownはとても便利ですが、専用のビューアーで表示しないと中々見づらいので、リテラシーが低めの方にドキュメントを共有する際にはHTMLの方が都合が良い場合があります。
そこで、コマンドラインから簡単にMarkdownからHTMLに変換できるツールのPandocを使ってみました。

Pandocとは

Markdownなどのドキュメントファイルを別のフォーマットに変換できるツール。
Markdown以外にも色々なフォーマットのファイルを変換できる。詳細は後述のドキュメントを参照。

ドキュメント

インストール

Pandoc公式サイトからインストーラーを入手して実行。

インストール後に以下を実行してインストールされているかを確認。

$ pandoc --version

MarkdownからHTMLに変換してみる

以下を実行するとMarkdownをHTMLに変換した文字列が標準出力される。

$ pandoc -f markdown -t html ".mdファイルのパス"
# 例: pandoc -f markdown -t html ./README.md

実際にHTMLファイルとして出力する場合は以下のように実行。

$ pandoc -f markdown -t html ".mdファイルのパス" > "出力先のパス"
# 例: pandoc -f markdown -t html ./README.md > ./README.html

これでHTMLファイルに変換されますが、スタイルがあまり整っていないのがちょっと残念。

出力したHTMLのスタイルを整形する

もし、変換後のHTMLファイルを整えたい場合は、CSSファイルを既存のテンプレートに適用する方法と、新たにテンプレートを作成する事で対応可能。
CSSを適用する場合は、以下のように-cオプションでCSSを指定するだけでOK。

$ pandoc -f markdown -t html -c ./example.css ./README.md > ./README.html

テンプレートをカスタマイズする

事前準備

まずは事前準備としてユーザーディレクトリに.pandocディレクトリを作成。
ユーザーディレクトリが不明の場合はpandoc --versionを実行すると"Default user data directory: "という部分にパスが表示されるのでそれを参照。

$ mkdir -p ~/.pandoc/templates
$ cd ~/.pandoc/templates

テンプレート生成

$ pandoc -D html5 > mytemplate.html

このmytemplate.htmlを好きな形に編集する。

テンプレートを適用

以下のように--templateオプションでテンプレート用htmlファイルを指定する。

$ pandoc -f markdown -t html --template=mytemplate ./README.md > ./README.html

因みにGithubのスタイルをベースにしたPandoc用のテンプレートmd2html-template-for-pandocを作ったので、良かったらご利用ください。
※僕の場合はCSSファイルの依存を無くしたかったので、HTMLに直接styleを埋め込んでいます。

35
48
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
35
48

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?