Introduction

前回の続き。

開発メモその151 Visual Studio CodeのMarkdown機能を強化 · A certain engineer "COMPLEX"

https://taktak.jp/2018/11/12/3825

Introduction仕事ではVisual Studio Codeを使ってMarkdownを書いています。拡張機能のmarkdown-pdfにはお世話になっております。最近、mermaidというガントチャートやフローチャートをテキストで記述できるライブラリが気になっており…

どうもMarkdown Preview Enhancedでもヘッダー、フッターの調節ができる模様。
よく考えたら、markdown-pdfと同じpuppeteerを使っているのだから当然と言えば当然なのかな?

Resolution

Puppeteerのインストール

前回は省略したので。
Chocolatelyが入っているとインストールが簡単です。

Chocolatey Software

Chocolatey - The package manager for Windows

https://chocolatey.org/

Chocolatey is software management automation for Windows that wraps installers, executables, zips, and scripts into compiled packages. Choco…

管理者でコンソールを起動します。


$ choco install nodejs /y
Chocolatey v0.10.10
Installing the following packages:
nodejs
By installing you accept licenses for the packages.
Progress: Downloading nodejs 10.13.0... 100%

nodejs.install v10.13.0 [Approved]
nodejs.install package files install completed. Performing other installation steps.
Installing 64 bit version
Installing nodejs.install...
nodejs.install has been installed.
  nodejs.install may be able to be automatically uninstalled.
Environment Vars (like PATH) have changed. Close/reopen your shell to
 see the changes (or in powershell/cmd.exe just type `refreshenv`).
 The install of nodejs.install was successful.
  Software installed as 'msi', install location is likely default.

nodejs v10.13.0 [Approved]
nodejs package files install completed. Performing other installation steps.
 The install of nodejs was successful.
  Software install location not explicitly set, could be in package or
  default install location if installer.

Chocolatey installed 2/2 packages.
 See the log for details (C:\ProgramData\chocolatey\logs\chocolatey.log).

続いてNode.js command promptを起動します。

> npm install -g puppeteer

> puppeteer@1.10.0 install C:\Users\TAKUYA\AppData\Roaming\npm\node_modules\puppeteer
> node install.js

Downloading Chromium r599821 - 135.9 Mb [====================] 99% 0.0s
Chromium downloaded to C:\Users\TAKUYA\AppData\Roaming\npm\node_modules\puppeteer\.local-chromium\win64-599821
+ puppeteer@1.10.0
added 42 packages from 22 contributors in 17.873s

-gオプション必須です。
起動中のVisual Studio Codeは再起動します。でないとpuppeteerが反映されません。

ヘッダー・フッターを付与する

Markdownファイルの先頭に下記のような記述を追記。

---
puppeteer:
  displayHeaderFooter: true
  headerTemplate: "<span>This is header</span>"
  footerTemplate: "<span>This is footer</span>"
---

ただし、デフォルトだと出力文字がすごく小さい。
この領域は、タグが使える。なので下記のようにフォントを使って調整可能。

---
puppeteer:
  displayHeaderFooter: true
  headerTemplate: "<div style=\"font-size: 9px; margin-left: 1cm;\"> <span>This is header</span></div>"
  footerTemplate: "<span>This is footer</span>"
---

ヘッダー・フッターにはテンプレートが使える。

定義	意味	使用例
date	日付	`<span class='date'></span>`
title	ファイル名	`<span class='title'></span>`
url	フルパスファイル名	`<span class='url'></span>`
pageNumber	現在のページ番号	`<span class='pageNumber'></span>`
totalPages	ドキュメントの総ページ数	`<span class='totalPages'></span>`

背景を印刷する

前回言及したコードハイライトのブロックの背景が白くなる問題の解決。

---
puppeteer:
  printBackground : true
---

日本語が文字化け

フォントの問題と思われる。

プレビュー

PDF出力

中国語フォントっぽいなぁ… ただ、puppeteerのバージョンの問題という情報が。

GAミント至上主義

【解決】puppeteerを1.10にするとPDFの日本語が文字化けする問題 - GAミント至上主義

https://uyamazak.hatenablog.com/entry/2018/11/09/131009

2018/11/13 追記結論 Chromium 72.0.3606.0(Developer Build)を使ったところ直ったので、次のバージョン（1.11）では直るはず。そのため1.10をスキップするだけで問題は解決しそう。追記ここまで yagish履歴書のHTML→PDF…

1.10.0が問題とのことなので1.9.0に戻してみる。

1	> npm install -g puppeteer@1.9.0

直りました。

フォント変更

前回との同じくCSSをカスタマイズします。

.markdown-preview.markdown-preview {
  // modify your style here
  // eg: background-color: blue;

  h1, h2, h3, h4, h5, h6, p {
    font-family: 'ヒラギノ丸ゴ ProN W4', '游ゴシック体', 'Yu Gothic', 'YuGothic', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'ＭＳ　Ｐゴシック', 'MS PGothic', sans-serif;
  }
}

A certain engineer "COMPLEX"

開発メモ その152 Visual Studio CodeのMarkdown機能を強化 その2