A certain engineer "COMPLEX"

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

Introduction


前回の続き。

Introduction仕事ではVisual Studio Codeを使ってMarkdownを書いています。拡張機能のmarkdown-pdfにはお世話になっております。最近、mermaidというガントチャートやフ...

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

Resolution


Puppeteerのインストール

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

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

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


$ 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のバージョンの問題という情報が。

yagish履歴書のHTML→PDF変換で使っているpuppeteerのバージョンを1.8.0から1.10.0にしたところ、PDFで日本語が表示できなくなった。 Ubuntu16.04上のDockerで動かしてお...

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


> 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 Pゴシック', 'MS PGothic', sans-serif;
}
}

コメントを残す

メールアドレスが公開されることはありません。

%d人のブロガーが「いいね」をつけました。