, ,

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

公開日: 2014/09/03
更新日: 2018/11/09

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

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

Contents

インストール

同じ作者さんの markdown-pdf のラッパーだそう。

% npm install grunt-markdown-pdf --save-dev

Gruntfile

プラグインのロードに jit-grunt を使っているのでこんな感じで書きます。

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 をダウンロードして設置してみます。

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

      options:
        cssPath: '/Users/****/projects/****/docs/style/github.css'

もしくは

      options:
        cssPath: '../../../../../docs/style/github.css'

画像パス

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

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

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

![](./img/test.png)

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

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

![](/Users/****/projects/****/docs/img/test.png)