この記事を書いてる人: 
tea

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

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

Ads
 node-markdown2pdf

keyboard

photo by Mr. Alex Garcia - Double Cliche on flickr

デモ&サンプル

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

インストールの方法

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

bash
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タスクは以下となります。

bash
1
$ gulp b

カスタマイズ

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

スタイルのカスタマイズ

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

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

./src/css/variable.styl
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.jsmarkdownpdf()メソッドから行って下さい。

./index.js
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();
});
}

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

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

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

github
alanshaw - markdown-pdf

Ads
 記事を書いてる人
gravatar
tea (てぃー)

ゆるふわポートレートや自然風景を撮影しています。その他の趣味は音楽制作/メダカの鑑賞/web。撮影や写真掲載・寄稿等のご依頼もお待ちしてます。お問い合わせは以下のフォームまたはSNSよりお願い致します。

 お問い合わせ

 撮影のご依頼

 ポートフォリオ

 各作例のご紹介

 シェアする
 記事名とURLをコピーする

markdownをPDFに一括変換するアプリをgulpタスクで書いた - TPB
https://photo-tea.com/p/convert-markdown-to-pdf/

 おすすめ記事
Ads
 作例掲載