Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
13
Help us understand the problem. What are the problem?

posted at

updated at

Markdown Preview EnhancedでPDF出力する。

VS CodeにインストールしたMarkdown Preview Enhancedで、PDF出力する方法のメモです。
Windows環境前提です。

Chromeをインストールする、またはEdgeを指定する

Google Chromeをインストールする場合

Markdown Preview Enhancedをインストールして、[Chrome (Puppeteer)] -> [PDF]を選択しただけだと、このようなエラーになります。

TypeError [ERR_INVALID_ARG_TYPE]: The "file" argument must be of type string. Received type object

エラーを見ても全然意味がわかりませんが、
Documentation

You need to have the Chrome browser installed.

とあるので、Chromeをインストールします。

Edgeを指定する場合

Google Chromeの代わりにChromium版Edgeを使用することができます。

setting.jsonに下記の様に設定します。

"markdown-preview-enhanced.chromePath": "C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe"

font-family を変更する

Chromeをインストールすると、PDFを出力できるようになったはずですが、俗に「中華フォント」と呼ばれるフォントで日本語が表示させてしまいます。

CSSを編集し、フォントを指定します。
~\.mume\style.less にCSSファイルがあるので、印刷用の設定を追加します。

@media print {
.markdown-preview.markdown-preview {
    font-family: "MS PMincho";
}
}

PlantUML用のfont-family を変更する

前述のfont-familyの変更だけでは、Markdown内のPlantUML(svg)は変わりません。
svg textを追加します。

@media print{
.markdown-preview.markdown-preview, svg text {
    font-family: "MS PMincho";
}
}
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
13
Help us understand the problem. What are the problem?