Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
42
Help us understand the problem. What is going on with this article?
@cawpea

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

More than 3 years have passed since last update.

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を埋め込んでいます。

42
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
cawpea
Frontend / UI / UX / Agile / Coffee
goodpatch
Goodpatch(株式会社グッドパッチ)はUI/UXデザインを強みにビジネスモデルやブランド、組織をデザインし、デザインの価値向上を目指すグローバルデザインカンパニーです。2020年6月30日、デザイン会社初の東証マザーズ上場。サービスやプロダクトの企画設計から関わりコンセプトメイキング、UX設計、プロトタイピング、UIデザイン、実装までワンストップで提供しています。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
42
Help us understand the problem. What is going on with this article?