vscode markdown 導出為 pdf 方法探究

• vscode markdown 導出為 pdf 方法探究
  • 前言
  • Open in Browser 導出
  • Chrome（Puppeteer）導出
  • pandoc 導出
  • prince 導出
  • eBook 導出
  • 特別提示
    • front matter 的編寫
    • pandoc parse
  • 其他插件
    • markdown pdf
    • Markdown Converter
    • 然后就沒有然后了
  • 總結

前言

Markdown Preview Enhanced（下文簡稱為 MPE） 是 vscode 中的神級插件。對 markdown 文件提供了許多方面的支持，功能十分強大，上天入地無所不能。本文介紹的 markdown 轉化為 pdf 文件主要就是基于該插件。

雖然說插件的作者寫了詳細的使用文檔，但是由于該插件的高級功能需要用戶本身有著較好的計算機基礎，因此對于小白(對我就是那個小白😄)而言，仍然不是件容易的事。

我研究了一下午如何使用 MPE 導出 pdf 文檔，雖然說目前仍然無法導出十全十美的文檔，但總算有了一些突破，特此分享一下。如果有朋友，vscode 導出 pdf 有更好的主意，也請不吝賜教。

這邊還需要提一下，之前 MPE 還支持 phantomjs 打印不過現在不支持了。

點擊此處，下載本文演示用于 pdf 導出的 md 文檔。

Open in Browser 導出

最通用的方式，就是右鍵預覽頁面，然后選擇 Open in Browser，然后打印瀏覽器頁面。這個方式的打印效果，隨著打印所用的瀏覽器以及所使用的虛擬打印機的不同，而有輕微的差異。

僅展示在 chrome 打開，用 adobe acrobat 打印的文件。總體感覺上看，chrome 對 pdf 打印的支持稍微好于 firefox。

具體效果，有興趣的朋友可以自己嘗試一下。但總的來說這種方式有一大缺點，那就是 打印出來的 pdf 是圖片類型的，文章中的連接之類全部失效。

Chrome（Puppeteer）導出

接下來講一個稍復雜的，用 Chrome（Puppeteer）導出。首先，你電腦上得安裝有 Chrome 瀏覽器。然后，右鍵預覽頁面，選擇 Chrome(Puppeteer) 選項下面的 PDF，即可。

這種方式導出的 pdf 文檔，是符合我們喜好的文字型的 pdf 文檔。

但是默認樣式下有個問題就是 文字太淡。事實上說明文檔中介紹，這種方式應該是能通過 front matter 來進行調整的。所謂的 Front-matter 是文件最上方以 --- 分隔的區域，用于指定個別文件的變量，具體可以參考 hexo 的說明。

然而遺憾的是，幫助文檔中對 Puppeteer 的 front matter 介紹太少，我一一試下感覺效果不好。編寫的 front matter 如下（不知道其他可以的參數名是什么）：

puppeteer:pdf:format: A4displayHeaderFooter: truemargin:top: 0.05cmright: 0.05cmbottom: 0.05cmleft: 0.05cmimage:quality: 90fullPage: true

不過從圖像上看，這個 front matter 好像一點效果都沒有 😢。

pandoc 導出

和前一節中的 Puppeteer 不同的是使用 pandoc 必須要編寫 front matter。幫助文檔中對于 pandoc front matter 介紹 的稍微詳細一些。在我不斷嘗試下，終于能夠打印出還算過得去的 pdf 文檔。這里安裝 pandoc 之類的操作就請參考幫助文檔。我們直接進入正題，我編寫的 front matter 如下：

title: 測試 author: luwantaomail@qq.com date: 2019年6月8日 # 指定漢字字體，如果缺少中文顯示將不正常 CJKmainfont: 方正蘇新詩柳楷簡體-yolan # latex 選項 fontsize: 12pt linkcolor: blue urlcolor: green citecolor: cyan filecolor: magenta toccolor: red geometry: margin=0.3in papersize: A4 documentclass: article# pandoc設置 output:pdf_document:path: /Exports/Habits.pdftoc: truetoc_depth: 2number_sections: truehighlight: tango # 打印背景色 # 保存文件時自動生成 # export_on_save: # pandoc: true

效果如下：

效果還算不錯。用了 tango 代碼高亮主題，這個主題好就好在，代碼部分有深一點的背景色，易于區分。

prince 導出

首先需要安裝 prince,如果安裝 prince 后，右鍵預覽選擇 PDF(prince) 提示 princexml 沒有安裝，是 prince 沒有被添加到系統變量中，請按如下操作。

默認，情況下 prince 導出效果如下：

可以看到，對中文和 latex 的支持不好。

其實幫助文檔已經提到，prince 對 ketex 和 mathjax 的支持不好。并且這個導出的文檔無法支持目錄跳轉，于是我就不再進一步研究了。

eBook 導出

最后就是 eBook 導出了。終于快寫玩了 😄。eBook 到處需要用到 Calibre，按幫助文檔說明安裝，將 ebook-convert 加入到系統變量。

在導出 pdf 前同樣需要編寫 front matter ，否則導出的 pdf 為空。不過就算是編寫了 front matter ebook 目前導出 pdf 還是存在問題。

這一點其實幫助文檔中也有提到。不過導出 equb 文件效果還是不錯的。這是我編寫的導出 equb 的 front matter：

ebook:title: mytestauthor: luwantaomail@qq.commargin: 10cover: https://csdn-blog-1258434200.cos.ap-shanghai.myqcloud.com/undefinedhwc_ttoto.jpgepub:no-default-epub-cover: truepretty-print: true

效果如下：

latex 支持倒可以，不過有部分圖像不能正確顯示，用 calibre 將這個 equb 轉換成 pdf 后效果更差：

所以，這種方式目前也只是看看而已了。

特別提示

front matter 的編寫

編寫 front matter 時，不熟悉的人（如我）很容易犯錯，所以可以將設置中 Front Matter Rendering Option 設置為 table，這樣 front matter 將在預覽中以 table 形式存在，比較直觀（默認是none）:

更改之后顯示的表格:

如果明顯寫錯，那么就看不到表格。另外注意這邊空格和tab也得嚴格區分開，否則雖然能看到表格，但是設置實際上是無效的。

pandoc parse

MPE 的設置中有個選項，Use Pandoc Parse。這個設置慎用，如果勾選了這個，那么 MPE 將用 pandoc 解析md，目前看來會導致一些問題。比如無法跳轉目錄（在預覽中）、語法拓展高亮失效等。

其他插件

既然已經試了 MPE 的這么多種轉換方法，不妨試一下其他插件，看有沒有好用又方便的。

markdown pdf

這個插件配置還算簡單，只要設置 chrome.exe 的路徑即可。但是效果不好，如圖：

。

latex 不支持的話，可以下地獄了 😒 當然也可能是我沒認真研究，評分這么高的插件應該不至于如此。

Markdown Converter

這個插件也是基于 chromium 不過，作者考慮到了 墻 自己提供了 chromium 供用戶下載。安裝后在默認設置的情況下，轉換后只有我的名字 😱

然后我查看設置，似乎也沒有什么設置能改變這一切 😏

然后就沒有然后了

然后我搜了一下，似乎沒有什么其他能用的插件了，于是今天先到此為止 😃。

總結

如果僅用 markdown preview enchanced 插件，那么 pandoc 導出無疑是最好的方式。然后要寫出得到更完美的 pdf 文檔，就需要好好研究一下 pandoc 的用法了。

你可以下載查看一下本文用 pandoc 和 Puppeteer 轉換成 pdf 的效果。

鏈接：https://pan.baidu.com/s/1B0ANQADSgbxU1vnzp2p2Eg
提取碼：m1em

總結

以上是生活随笔為你收集整理的vscode markdown preview enhance 插件 pdf 导出的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。