markdownをPDFに一括変換するgulpタスクを書いた

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

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

photo by Mr. Alex Garcia - Double Cliche on flickr

デモ＆サンプル

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

• markdownファイル
• 変換されたPDFのサンプル

インストールの方法

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

1
2
3

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

使い方

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

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

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

1

$ gulp b

カスタマイズ

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

スタイルのカスタマイズ

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// --------------------------
// (例) Nato Sansを使う場合
// --------------------------
// If you want to use "Noto Sans Japanese"
@import url("http://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()メソッドから行って下さい。

1
2
3
4
5
6
7
8
9
10
11
12

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();
  });
}

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

他にも色々できるみたいですので、詳しくはmarkdown-pdfをご覧ください。

github
alanshaw - markdown-pdf

UXの時代 〜IoTとシェアリングは産業をどう変えるのか〜

  Amazonでレビューを見る