[Grunt & Yeoman] grunt-markdown-pdf で markdown を pdf に変換する

markdown で書いた手順書の配布にあたって、閲覧できないユーザーがいると困るのでフォーマットを変換したい。

[markdown]
grunt-markdown-pdf なるものを知りました。

> * [grunt.js – Markdown を自動で PDF 生成してくれる grunt-markdown-pdf について紹介するよ – Qiita](http://qiita.com/astronaughts/items/824f4dc163e9fa3dff2e)

## インストール

同じ作者さんの [markdown-pdf](https://github.com/alanshaw/markdown-pdf) のラッパーだそう。

> * [alanshaw/grunt-markdown-pdf](https://github.com/alanshaw/grunt-markdown-pdf)

“`prettyprinted
% npm install grunt-markdown-pdf –save-dev
“`

## Gruntfile

プラグインのロードに [jit-grunt](https://github.com/shootaroo/jit-grunt) を使っているのでこんな感じで書きます。

> * [Grunt: plugin をロードする5つの方法 | deadwood](https://www.d-wood.com/blog/2014/01/09_5240.html#jit-grunt)

“`ruby:Grunfile.coffee
‘use strict’
module.exports = (grunt) ->
# require(“load-grunt-tasks”)(grunt)
require(‘jit-grunt’)(grunt, {
bower: ‘grunt-bower-task’,
markdownpdf: ‘grunt-markdown-pdf’
})
# grunt-markdown-pdf
markdownpdf:
# options:
# cssPath: ‘docs/style/’
files:
src: ‘docs/*.md’
dest: ‘docs/’
grunt.registerTask ‘default’, [
‘markdownpdf’
]
“`

## style の指定

配布されている markdown 用の装飾 CSS を使って、見栄えを良くした
い。どうもオプションで CSS を指定できるよう。
ためしにこちらの CSS をダウンロードして設置してみます。

> * [Github Markdown CSS – for Markdown Editor Preview](https://gist.github.com/andyferra/2554919)

CSSまでのフルパスで書きます。

“`ruby
options:
cssPath: ‘/Users/****/projects/****/docs/style/github.css’
“`

もしくは

“`ruby
options:
cssPath: ‘../../../../../docs/style/github.css’
“`

> * [tools/Gruntfile.coffee at master · DriftwoodJP/tools](https://github.com/DriftwoodJP/tools/blob/master/markdown2pdf/Gruntfile.coffee)

## 画像パス

このようなディレクトリ構成で

“`prettyprinted
.
├── Gruntfile.coffee
├── docs
│   ├── README.md
│   ├── README.pdf
│   └── img
“`

画像ファイルをこのような形で参照しても、生成された PDF では表示されませんでした。

“`prettyprinted
“`

調べてみるとこんなイシューがありました。

> * [Images in pdf · Issue #2 · alanshaw/grunt-markdown-pdf](https://github.com/alanshaw/grunt-markdown-pdf/issues/2)

エディターで編集中もプレビューしたいので、下記のようにフルパスで書く方法にしたところ、無事表示されました。

“`prettyprinted
“`
[/markdown]