Markdownで書いたファイルをPDFで出力

Markdownで書いたファイルをPDFで出力

md-to-pdfを利用してMarkdownで書かれたファイルをPDFに変換する対応手順

環境

  • OS  CentOS Linux release 8.0.1905 (Core)
  • node V10.16.3
  • npm 6.9.0
  • npx md-to-pdf  2.8.1

※centos8にnodeのインストール手順はこちら

事前準備

ディレクトリの作成とpackage.json作成を行う

## 検証ディレクトリ作成
mkdir chpdf
 
## 移動
cd chpdf
 
## 全てyesなので
yarn
or
npm init -y

md-to-pdfインストール

md-to-pdfをインストールする

## インストール
yarn add -D md-to-pdf
or
npm i -D md-to-pdf

## バージョン確認
npx md-to-pdf -v

<出力結果>
2.8.1

実行

mdファイルをPDFに変換してみる。

テスト用にtest.mdを下記の内容で作成

# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6

- リスト1
    - ネスト リスト1_1
        - ネスト リスト1_1_1
        - ネスト リスト1_1_2
    - ネスト リスト1_2
- リスト2
- リスト

# Tab
    class Hoge
        def hoge
            print 'hoge'
        end
    end

---

    # Space
    class Hoge
      def hoge
        print 'hoge'
      end
    end

```
 class Hoge
   def hoge
     print 'hoge'
   end
 end
```

PDFに変換する

## 実行
npx md-to-pdf

test.pdfが作成される

pdfを確認してみる

複数のmdファイルを一括で処理

複数のファイルも同一階層にあれば一括でpdfに変換することができる

同様に実行する

## 実行
npx md-to-pdf
or
npx md-to-pdf *.md

<出力結果>
  ✔ generating PDF from test1.md
  ✔ generating PDF from test2.md
  ✔ generating PDF from test3.md

PDFファイルが3つ作成される

Header/Footerを追加する

公式にある下記のコードをmdファイル先頭に追加すれば、ヘッダーとフッターを追加することができる

---
pdf_options:
  format: A4
  margin: 30mm 20mm
  displayHeaderFooter: true
  headerTemplate: |-
    <style>
      section {
        margin: 0 auto;
        font-family: system-ui;
        font-size: 11px;
      }
    </style>
    <section>
      <span class="date"></span>
    </section>
  footerTemplate: |-
    <section>
      <div>
        Page <span class="pageNumber"></span>
        of <span class="totalPages"></span>
      </div>
    </section>
---

ヘッダー

フッター

GitHubライクにもできる

下記のコードを先頭に追加すればGithubライクなスタイルにも変更可能

---
stylesheet: https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.10.0/github-markdown.min.css
body_class: markdown-body
css: |-
  .page-break { page-break-after: always; }
  .markdown-body { font-size: 11px; }
  .markdown-body pre > code { white-space: pre-wrap; }
---

生成されたPDF