markdownをPDFに一括変換するアプリをgulpタスクで書いた(node.js markdown-pdf)|おちゃカメラ。

本日限定

Amazonタイムセール開催中

セール商品を見に行く

PDF形式で資料を作る機会があり、何か楽に作成できないか探してたところ、markdown-pdfを見つけました。markdown-pdfは、markdownファイルからPDFファイルに変換してくる便利なプラグインです。

今回はmarkdown-pdfを利用して、PDFのスタイルをカスタマイズしたり、gulpタスクで一括変換できるものを作ってみましたのでご紹介します。

デモ＆サンプル

markdownファイルを変換した結果を公開していますので、まずは以下をご覧ください。

インストールの方法

インストールは以下の手順で行います。まずは事前にnode.jsを用意してください。次に以下のようにgithubのプロジェクトをcloneし、npmインストールで依存パッケージをインストールします。

node-markdown2pdf

github
tea3/node-markdown2pdf

gitからは、次のようなコマンドでダウンロードとインストールができます。

bash

1
2
3

$ git clone https://github.com/tea3/node-markdown2pdf.git
$ cd node-markdown2pdf
$ npm install

使い方

markdownファイルをPDFファイルに一括変換する手順は以下のようになります。

./file/markdown/にmarkdownファイルを入れる
gulpタスクを実行
PDFファイルが作成されます。./file/pdf/をご確認ください

gulpタスクは以下となります。

bash

$ gulp b

カスタマイズ

生成するPDFファイルのカスタマイズは、以下から行います。

スタイルのカスタマイズ

PDFのスタイルは、./src/css/style.stylからカスタマイズすることができます。

例えば、フォントやカラーのカスタマイズは./src/css/variables.stylで可能となっており、外部のフォントを使用したい場合は、@importや@font-faceすれば使えるようになっています。

./src/css/variable.styl

// --------------------------
// (例) Nato Sansを使う場合
// --------------------------
// If you want to use "Noto Sans Japanese"
@import url("https://fonts.googleapis.com/earlyaccess/notosansjapanese.css");

// // If you want to use "myFonts"
// @font-face
//  font-family: 'myFonts';
//  font-style: normal;
//  font-weight: 100;
//  src: url("../fonts/myFonts.eot") format('embedded-opentype')
//  src: url("../fonts/myFonts.woff") format('woff')
//  src: url("../fonts/myFonts.otf") format('opentype')

// setting sans font
font-sans = "Noto Sans Japanese" , "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3" ,"Yu Gothic", YuGothic, "游ゴシック体", Meiryo, "メイリオ", sans-serif;

注意点としては、上記のように外部フォントをインポートする場合、フォントのロード時間を考慮したPDFレンダリング遅延時間の指定が必須となります。詳しくは、この次に説明するmarkdown-pdfのオプションを参考に設定を行って下さい。

markdown-pdfのオプション

今回ご紹介しているnode-markdown2pdfは、markdown-pdfに依存しています。markdown-pdfのオプションからは、PDFの用紙サイズや余白などのPDFに関わるオプションが設定できます。設定の変更は./index.jsのmarkdownpdf()メソッドから行って下さい。

./index.js

function convertPDF(markdownPath , pdfPath){
    // 初期の設定では、A4サイズのPDF、スタイルはstyle.css、PDFのレンダリング遅延時間：5秒、余白：2cmが設定されています。
    markdownpdf({
      cssPath     : "src/dist/style.css" ,
      paperFormat : "A4" ,
      renderDelay : 5000 ,
      paperBorder : "2cm"
    }).from(markdownPath).to(pdfPath , function () {
      log.info(" -> " + pdfPath);
    doTask();
  });
}

主なオプションは以下の通りです。

オプション	説明
cssPath	PDFに適用するスタイルシートのファイルパス
paperFormat	PDFの用紙サイズ。`A3`,`A4`,`A5`,`Legal`,`Letter`,`Tabloid`が指定可能
paperOrientation	用紙の向き。`portrait`または`landscape`が指定可能
paperBorder	用紙の余白
renderDelay	PDFのレンダリング遅延時間。外部ファイルを読み込む際にその読込時間を設ける必要がある時に指定する